Download presentation
Presentation is loading. Please wait.
Published byAndrew Chandler Modified over 9 years ago
1
Private/Public fields, Module, Revealing Module Learning & Development Team http://academy.telerik.com Telerik Software Academy
2
1. Public/Private fields in JavaScript 2. Module pattern 3. Revealing module pattern 4. Revealing prototype pattern 5. Singleton pattern 2
3
Using the function scope
4
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; }}
5
Live Demo
6
Hide members
7
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
8 var module = (function() { //private variables //private functions return { //public members someFunc: function() {…}, anotherFunc: function() {…} };}()); Structure:
9
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
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
11
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
12
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
13
Live Demo
14
Reveal the most interesting members
15
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
16 var module = (function() { //hidden variables //hidden functions return { //visible members //visible members someFunc: referenceToFunction anotherFunc: referenceToOtherFunction };}()); Structure:
17
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
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
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
20
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
21
Live Demo
22
Reveal the most interesting members (again)
23
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
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
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:
26
Module pattern provides encapsulation of variables and functions Provides a way to add visibility (exposed versus hidden) to members Provides extension capabilities 26
27
Live Demo
28
One object to rule them all!
29
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
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:
31
Live Demo
33
форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен 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# Николай Костов - блог за програмиране http://csharpfundamentals.telerik.com
34
“C# Programming @ Telerik Academy csharpfundamentals.telerik.com csharpfundamentals.telerik.com Telerik Software Academy academy.telerik.com academy.telerik.com Telerik Academy @ Facebook facebook.com/TelerikAcademy facebook.com/TelerikAcademy Telerik Software Academy Forums forums.academy.telerik.com forums.academy.telerik.com
35
Create the Snake game using the Revealing module pattern. Design the game such that it has at least three modules.
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.