JavaScript Modules and Patterns Telerik Software Academy

2 Table of Contents 1. Public/Private fields in JavaScript 2. Module pattern 3. Revealing module pattern 4. Revealing prototype pattern 5. Singleton pattern

Using 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; }

Live Demo

Hide 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 members someFunc: 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

Live Demo

Reveal 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: referenceToFunction anotherFunc: 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

Live Demo

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: pointerToSomeFunc anotherFunc: 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

Live Demo

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; } }; }();

Live 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# Николай Костов - блог за програмиране