JavaScript Modules and Patterns

Telerik Software Academyhttp://academy.telerik.com

2

Table of Contents

1. Public/Private fields in JavaScript

2. Module pattern

3. Revealing module pattern

4. Revealing prototype pattern

5. Singleton pattern

Public/Private fieldsUsing the function scope

4

Public/Private Fields

• Each variable is defined:• In the global scope (Public)• In a function scope (Private)

var global = 5;

function myFunction() { var private = global;

function innerFunction(){ var innerPrivate = private; }}

Public/Private fieldsLive Demo

The Module PatternHide members

7

Pros and Cons

• Pros:• “Modularize” code into re-useable objects• Variables/functions not in global namespace• Expose only public members

• Cons: • Not easy to extend • Some complain about debugging

8

Module Pattern: Structure

var module = (function() {//private variables//private functions

return {//public memberssomeFunc: function() {…},anotherFunc: function() {…}

};}());

9

Module Pattern: Summary

• Module pattern provides encapsulation of variables and functions

• Provides a way to add visibility (public versus private) to members

• Each object instance creates new copies of functions in memory

Module PatternLive Demo

The Revealing Module PatternReveal the most interesting

members

12

Revealing Module Pattern: Pros and Cons

• Pros: • “Modularize” code into re-useable objects

• Variables/functions taken out of global namespace

• Expose only visible members

• "Cleaner" way to expose members

• Easy to change members privacy

• Cons: • Not easy to extend

• Some complain about debugging

• Hard to mock hidden objects for testing

13

Revealing Module Pattern: Structure

var module = (function() {//hidden variables //hidden functions

return { //visible members

someFunc: referenceToFunctionanotherFunc:

referenceToOtherFunction};

}());

14

Revealing Module Pattern: Summary

• Module pattern provides encapsulation of variables and functions

• Provides a way to add visibility (public versus private) to members

• Extending objects can be difficult since no prototyping is used

Revealing Module PatternLive Demo

The Revealing Prototype Pattern

Reveal the most interesting members (again)

17

Revealing Prototype Pattern:Pros and Cons

• Pros: • “Modularize” code into re-useable objects • Variables/functions taken out of global namespace • Expose only public members • Functions are loaded into memory once• Extensible

• Cons: • "this" can be tricky• Constructor is separated from prototype

18

Revealing Prototype Pattern:Structure

var Constructor = function () {//constructor defined here

}

Constructor.prototype = (function() {//hidden variables //hidden functions

return { //exposed members

someFunc: pointerToSomeFuncanotherFunc: pointerToAnotherFunc

};}());

19

Revealing Prototype Pattern:Summary

• Module pattern provides encapsulation of variables and functions

• Provides a way to add visibility (exposed versus hidden) to members

• Provides extension capabilities

Revealing Prototype PatternLive Demo

Singleton Pattern

One object to rule them all!

22

Singleton Pattern: Structure

var module = function() { var instance, getInstance; return { getInstance: function(){ if(!instance){ instance = new Instance(); } return instance; } };}();

Singleton PatternLive Demo

Augmenting ModulesLive Demo

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезания

ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGap

free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиране

Николай Костов - блог за програмиранеC# курс, програмиране, безплатно

?

? ? ??

?? ?

?

?

?

??

?

?

? ?

Questions?

?

JavaScript Modules and Patterns

http://academy.telerik.com