JavaScript is the language of Web. It has its own styles and vocabulary, which is very different from languages we are familiar with like C, C++, Java, C# etc. While not having classes and functions to be acting as FIRST CLASS CITIZENS for most of the tasks sometimes its difficult to manage very large JavaScript files. And, there comes the need of a common pattern for writing efficient JavaScript.

1. Patterns in Javascript
Prototype & Module Patterns
Presentation By :
Ashutosh Mahto
Mindfire Solutions

2. Patterns In Javascript
Agenda to Discuss
1. Why to concern about design patterns in Javascript?
2. Before we begin what needs to be known?
3. Prototype Pattern – Structure, Advantages & Drawbacks
4. Module Pattern – Structure, Advantages & Drawbacks
5. Some Enhanced Patterns –
Revealing Module Pattern
Revealing Prototype Pattern

3. Patterns In Javascript
Why a Design Pattern
1. Scattered variables and function
2. Conflicts may arise between variables and methods
3. Difficult to manage when code becomes larger
4. Often result into repeated functions for similar purpose

4. Patterns In Javascript
Why a Design Pattern
”A pattern is a reusable solution that can be applied to
commonly occurring problems in software design”
Benefits of choosing a design pattern 1. Patterns are proven solutions
2. Patterns can be easily reused
3. Patterns can be expressive

5. Patterns In Javascript
Before we begin
Namespaces
- Reduces number of globals and chance of scattered globals
- Avoids naming conflicts
Ex. var MFLib = MFLib || {};
Closures
- Local variables for a function are kept alive after the function has
returned
- Used widely to differentiate public and private members in javascript
Public and Private members in Javascript
- Javascript doesn't have special syntax for public and private
- Can be implemented using closures

6. Patterns In Javascript
Before we begin
Prototypes
- Prototype is the base of Object Oriented Programming in
javascript
- Every function contains a prototype object that can be
chained through its constructor.
var Person= function(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
}
var student = new Person("Satish");

7. Patterns In Javascript
Prototype Pattern : Structure
Prototype For Product
MFLib.Product = function (name) {
this.Id = '';
}
MFLib.Product.prototype.setPrice = function (price) {}
MFLib.Product.prototype.setDescription = function
(description) {}

8. Patterns In Javascript
Prototype Pattern : Advantages & Drawbacks
Advantages
1. Modularizes and isolates the code
2. Separates related variables and methods from global
context
3. Easy to be extended through prototype
Drawbacks
1. Restricts access to private members

9. Patterns In Javascript
Module Pattern : Structure
Shopping Cart Module
MFLib.ShoppingCart = (function () {
/* Private Variables */
var _basket = [];
/* Private Method */
function getShoppingCartTotal() {}
return {
CreateBasketItem: function () {},
AddItem: function () {},
RemoveItem: function () {},
GetTotal: getShoppingCartTotal
};
})();

10. Patterns In Javascript
Module Pattern : Structure
Shopping Cart Module
MFLib.ShoppingCart = (function () {
/* Private Variables */
var _basket = [];
/* Private Method */
function getShoppingCartTotal() {}
return {
CreateBasketItem: function () {},
AddItem: function () {},
RemoveItem: function () {},
GetTotal: getShoppingCartTotal
};
})();

11. Patterns In Javascript
Module Pattern : Important Points
Global Import
By passing globals as parameters to our anonymous function, we import them
into our code
MFLib.ShoppingCart = (function ($,window,document,undefined) {
})(jQuery,window,document,undefined);
Augmentation
MFLib.ShoppingCart = (function (self, utilities) {
self.Save = function () {}
return self;
})(MFLib.ShoppingCart, MFLib.Utilities);

12. Patterns In Javascript
Module Pattern : Advantages & Drawbacks
Advantages
1. Modularizes and isolates the code
2. Separates related variables and methods from global
context
3. Establishes control over public and private members
Drawbacks
1. Performance wise not good as Prototype pattern
2. Large code may result into repeated function
3. Not easy to extend

13. Patterns In Javascript
Some Enhanced Patterns : Revealing Module Pattern
”Enhancement to module pattern in which private
members are also exposed”
Important points :
1. Benefits when we need to have some private
members exposed
2. Private functions remain protected even if public
functions get modified by some chance.
Ex. ShoppingCart.GetTotal = null;

14. Patterns In Javascript
Some Enhanced Patterns : Revealing Prototype
Pattern
”Combination of Prototype pattern and Module
pattern”
Important points :
1. Better performance than Module Pattern
2. Include prototypes to define the methods in a
module
3. Exposes members through prototype

15. Patterns In Javascript
Any Question ???

16. Patterns In Javascript
References and Recommendations

Books
−
Javascript The Good Parts, Douglas Crockford
−
Javascript: The Definitive Guide, David Flanagan
−
Professional Javascript For Developers, Nicholas Zakas

Blogs

Articles

Stack Overflow
Get in touch with :
−
Douglas Crockford
−
Nicholas Zakas
−
Addy Osmani
−
Paul Irish

17. Patterns In Javascript
Thank You !!!