Private/Public fields, Module, Revealing Module Learning & Development Team Telerik Software Academy

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

Using the function scope

 Each variable is defined:  In the global scope (Public)  In a function scope (Private) 4 var global = 5; function myFunction() { var private = global; function innerFunction(){ var innerPrivate = private; }}

Live Demo

Hide members

 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 7

8 var module = (function() { //private variables //private functions return { //public members someFunc: function() {…}, anotherFunc: function() {…} };}());  Structure:

9 var controls = (function () { //hidden members //hidden members function formatResult(name, value) { //… } function formatResult(name, value) { //… } //visible members //visible members return { return { Calculator: function (name) { Calculator: function (name) { var result; var result; result = 0; result = 0; this.add = function (x) { //… }; this.add = function (x) { //… }; this.subtract = function (x) { //…}; this.subtract = function (x) { //…}; this.showResult = function () { //… }; this.showResult = function () { //… }; } }; };}()); var calc = new controls.Calculator('First'); calc.add(7);calc.showResult();  Example:

10 var controls = (function () { //hidden members //hidden members function formatResult(name, value) { //… } function formatResult(name, value) { //… } //visible members //visible members return { return { Calculator: function (name) { Calculator: function (name) { var result; var result; result = 0; result = 0; this.add = function (x) { //… }; this.add = function (x) { //… }; this.subtract = function (x) { //…}; this.subtract = function (x) { //…}; this.showResult = function () { //… }; this.showResult = function () { //… }; } }; };}()); var calc = new controls.Calculator('First'); calc.add(7);calc.showResult();  Example: The visible members create closures with them

var controls = (function () { //hidden members //hidden members function formatResult(name, value) { //… } function formatResult(name, value) { //… } //visible members //visible members return { return { Calculator: function (name) { Calculator: function (name) { var result; var result; result = 0; result = 0; this.add = function (x) { //… }; this.add = function (x) { //… }; this.subtract = function (x) { //…}; this.subtract = function (x) { //…}; this.showResult = function () { //… }; this.showResult = function () { //… }; } }; };}()); var calc = new controls.Calculator('First'); calc.add(7);calc.showResult(); 11  Example: Visible function constructor

 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 12

Live Demo

Reveal the most interesting members

 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 15

16 var module = (function() { //hidden variables //hidden functions return { //visible members //visible members someFunc: referenceToFunction anotherFunc: referenceToOtherFunction };}());  Structure:

17 var controls = (function () { //hidden function //hidden function function formatResult(name, value) { // … } function formatResult(name, value) { // … } var Calculator = (function () { var Calculator = (function () { var Calculator = function (name) { // … }; var Calculator = function (name) { // … }; Calculator.prototype.add = function (x) { // … }; Calculator.prototype.add = function (x) { // … }; Calculator.prototype.subtract = function (x) { // … }; Calculator.prototype.subtract = function (x) { // … }; Calculator.prototype.showResult = function () { // …}; Calculator.prototype.showResult = function () { // …}; return Calculator; return Calculator; }()); }()); return { return { Calculator: Calculator Calculator: Calculator }; };}()); var calc = new controls.Calculator('First');  Example:

18 var controls = (function () { //hidden function //hidden function function formatResult(name, value) { // … } function formatResult(name, value) { // … } var Calculator = (function () { var Calculator = (function () { var Calculator = function (name) { // … }; var Calculator = function (name) { // … }; Calculator.prototype.add = function (x) { // … }; Calculator.prototype.add = function (x) { // … }; Calculator.prototype.subtract = function (x) { // … }; Calculator.prototype.subtract = function (x) { // … }; Calculator.prototype.showResult = function () { // …}; Calculator.prototype.showResult = function () { // …}; return Calculator; return Calculator; }()); }()); return { return { Calculator: Calculator Calculator: Calculator }; };}()); var calc = new controls.Calculator('First');  Example: Create the function constructor hidden

19 var controls = (function () { //hidden function //hidden function function formatResult(name, value) { // … } function formatResult(name, value) { // … } var Calculator = (function () { var Calculator = (function () { var Calculator = function (name) { // … }; var Calculator = function (name) { // … }; Calculator.prototype.add = function (x) { // … }; Calculator.prototype.add = function (x) { // … }; Calculator.prototype.subtract = function (x) { // … }; Calculator.prototype.subtract = function (x) { // … }; Calculator.prototype.showResult = function () { // …}; Calculator.prototype.showResult = function () { // …}; return Calculator; return Calculator; }()); }()); return { return { Calculator: Calculator Calculator: Calculator }; };}()); var calc = new controls.Calculator('First');  Example: Expose (reveal) only references to hidden member

 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 20

Live Demo

Reveal the most interesting members (again)

 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 23

24 var Constructor = function () { //constructor defined here } Constructor.prototype = (function() { //hidden variables //hidden functions return { //exposed members //exposed members someFunc: pointerToSomeFunc anotherFunc: pointerToAnotherFunc };}());  Structure:

25 var Calculator = function (name) { // … }; Calculator.prototype = (function () { var add, subtract, showResult, formatResult; var add, subtract, showResult, formatResult; add = function (x) { // … }; add = function (x) { // … }; subtract = function (x) { // … }; subtract = function (x) { // … }; showResult = function () { // … }; showResult = function () { // … }; formatResult = function (name, value) { // … }; formatResult = function (name, value) { // … }; return { return { add: add, add: add, subtract: subtract, subtract: subtract, showResult: showResult showResult: showResult }; };}()); var calc = new Calculator('First');  Example:

 Module pattern provides encapsulation of variables and functions  Provides a way to add visibility (exposed versus hidden) to members  Provides extension capabilities 26

Live Demo

One object to rule them all!

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

30 var controls = function () { var Calculator, calculatorInstance; var Calculator, calculatorInstance; Calculator = (function () { Calculator = (function () { function Calculator() { //… } function Calculator() { //… } return Calculator; return Calculator; }()); }()); return { return { getCalculator: function () { getCalculator: function () { if (!calculatorInstance) { if (!calculatorInstance) { calculatorInstance = new Calculator(); calculatorInstance = new Calculator(); } return calculatorInstance; return calculatorInstance; } }; };}(); var calculator = controls.getCalculator();  Example:

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

 “C# Telerik Academy  csharpfundamentals.telerik.com csharpfundamentals.telerik.com  Telerik Software Academy  academy.telerik.com academy.telerik.com  Telerik Facebook  facebook.com/TelerikAcademy facebook.com/TelerikAcademy  Telerik Software Academy Forums  forums.academy.telerik.com forums.academy.telerik.com

Create the Snake game using the Revealing module pattern. Design the game such that it has at least three modules.