Your SlideShare is downloading. ×
0
Patterns in Javascript
Prototype & Module Patterns

Presentation By :
Ashutosh Mahto
Mindfire Solutions
Patterns In Javascript

Agenda to Discuss
1. Why to concern about design patterns in Javascript?
2. Before we begin what n...
Patterns In Javascript

Why a Design Pattern
1. Scattered variables and function
2. Conflicts may arise between variables ...
Patterns In Javascript

Why a Design Pattern
”A pattern is a reusable solution that can be applied to
commonly occurring p...
Patterns In Javascript

Before we begin
Namespaces
- Reduces number of globals and chance of scattered globals
- Avoids na...
Patterns In Javascript

Before we begin
Prototypes
- Prototype is the base of Object Oriented Programming in
javascript
- ...
Patterns In Javascript

Prototype Pattern : Structure
Prototype For Product
MFLib.Product = function (name) {
this.Id = ''...
Patterns In Javascript

Prototype Pattern : Advantages & Drawbacks
Advantages
1. Modularizes and isolates the code
2. Sepa...
Patterns In Javascript

Module Pattern : Structure
Shopping Cart Module
MFLib.ShoppingCart = (function () {
/* Private Var...
Patterns In Javascript

Module Pattern : Structure
Shopping Cart Module
MFLib.ShoppingCart = (function () {
/* Private Var...
Patterns In Javascript

Module Pattern : Important Points
Global Import
By passing globals as parameters to our anonymous ...
Patterns In Javascript

Module Pattern : Advantages & Drawbacks
Advantages
1. Modularizes and isolates the code
2. Separat...
Patterns In Javascript

Some Enhanced Patterns : Revealing Module Pattern
”Enhancement to module pattern in which private
...
Patterns In Javascript

Some Enhanced Patterns : Revealing Prototype
Pattern
”Combination of Prototype pattern and Module
...
Patterns In Javascript

Any Question ???
Patterns In Javascript

References and Recommendations


Books
−

Javascript The Good Parts, Douglas Crockford

−

Javasc...
Patterns In Javascript

Thank You !!!
Upcoming SlideShare
Loading in...5
×

Patterns In-Javascript

328

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
328
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Every developer starts his journey with C, and in most of the cases till he reaches upto web development he gains sufficient knowledge in C, C++, C# or may be Java at least.
    And here starts the problem. When it comes to javascript most of us usually ignore the basics of javascript assuming its the same, except few array declaration, weak typing etc.
    So this seminar is not intended to touch the basic declaration, initialization concepts but something additional to that.
  • Transcript of "Patterns In-Javascript"

    1. 1. Patterns in Javascript Prototype & Module Patterns Presentation By : Ashutosh Mahto Mindfire Solutions
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Patterns In Javascript Any Question ???
    16. 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. 17. Patterns In Javascript Thank You !!!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×