2015秋前端開發(fā)課件js oop6模塊與模式

1、6-模塊與模式私有/公開字段、模塊、揭示模塊2015 Spring, 本章內(nèi)容 JavaScript中的公有/私有字段 模塊模式 揭示模塊模式 揭示原型模式 單例模式公有/私有字段使用函數(shù)作用域公有/私有字段 每個(gè)變量被定義為： 在全局作用域（公有） 在函數(shù)作用域（私有）var global = 5;function myFunction() var private = global;function innerFunction()var innerPrivate = private;公有/私有字段 演示模塊模式隱藏成員優(yōu)缺點(diǎn) 優(yōu)點(diǎn)： 模塊化代碼至可重用對(duì)象 變量/函數(shù)不在全局命名空間中 只暴

2、露公有成員 缺點(diǎn)： 不易擴(kuò)展 調(diào)試有問題模塊模式：結(jié)構(gòu) 結(jié)構(gòu)：var module = (function () /私有變量/私有函數(shù)return /公有成員someFunc: function() ,anotherFunc: function() ;();模塊模式：示例var controls = (function () /hidden members function formatResult(name, value) / /visible members return Calculator: function (name) var result; result = 0; this.ad

3、d = function (x) / ; this.subtract = function (x) /; this.showResult = function () / ; ;();var calc = new controls.Calculator(First);calc.add(7);calc.showResult();模塊模式：示例var controls = (function () /hidden members function formatResult(name, value) / /visible members return Calculator: function (nam

4、e) var result; result = 0; this.add = function (x) / ; this.subtract = function (x) /; this.showResult = function () / ; ;();var calc = new controls.Calculator(First);calc.add(7);calc.showResult();模塊模式：示例var controls = (function () /hidden members function formatResult(name, value) / /visible member

5、s return Calculator: function (name) var result; result = 0; this.add = function (x) / ; this.subtract = function (x) /; this.showResult = function () / ; ;();var calc = new controls.Calculator(First);calc.add(7);calc.showResult();模塊模式：概要 模塊模式提供了變量和函數(shù)的封裝 提供了加入可見性（公有/私有）到成員的方式 每個(gè)對(duì)象實(shí)例在內(nèi)存中創(chuàng)建新的函數(shù)拷貝模塊模式

6、演示揭示模塊模式揭示最關(guān)注的成員揭示模塊模式：優(yōu)缺點(diǎn) 優(yōu)點(diǎn)： 模塊化代碼到可重用對(duì)象中 變量/函數(shù)從全局命名空間取出 只暴露可見成員 清潔方式來暴露成員 易于改變成員私有性 缺點(diǎn)： 不易擴(kuò)展 調(diào)試有問題 難以為測(cè)試來仿制隱藏對(duì)象揭示模塊模式：結(jié)構(gòu) 結(jié)構(gòu)：var module = (function() /hidden variables /hidden functions return /visible memberssomeFunc: referenceToFunctionanotherFunc: referenceToOtherFunction;();揭示模塊模式：示例var contro

7、ls = (function () /hidden function function formatResult(name, value) / var Calculator = (function () var Calculator = function (name) / ; Ctotype.add = function (x) / ; Ctotype.subtract = function (x) / ; Ctotype.showResult = function () / ; return Calculator;

8、 (); return Calculator: Calculator ;();var calc = new controls.Calculator(First);揭示模塊模式：示例var controls = (function () /hidden function function formatResult(name, value) / var Calculator = (function () var Calculator = function (name) / ; Ctotype.add = function (x) / ; Ctot

9、ype.subtract = function (x) / ; Ctotype.showResult = function () / ; return Calculator; (); return Calculator: Calculator ;();var calc = new controls.Calculator(First);揭示模塊模式：示例var controls = (function () /hidden function function formatResult(name, value) / var Calculator = (function (

10、) var Calculator = function (name) / ; Ctotype.add = function (x) / ; Ctotype.subtract = function (x) / ; Ctotype.showResult = function () / ; return Calculator; (); return Calculator: Calculator ;();var calc = new controls.Calculator(First);揭示模塊模型：概述 模塊模型提供變量和

11、函數(shù)的封裝 提供了加入可見性（公有/私有）到成員的方式 擴(kuò)展對(duì)象困難，因沒有使用原型揭示模塊模式 演示揭示原型模式揭示最關(guān)注的成員揭示原型模式：優(yōu)缺點(diǎn) 優(yōu)點(diǎn)： 模塊化代碼到可重用對(duì)象中 變量/函數(shù)從全局命名空間取出 只暴露可見成員 函數(shù)立即加載入內(nèi)存 可擴(kuò)展 缺點(diǎn)： this棘手 構(gòu)造器從原型分離揭示原型模式：結(jié)構(gòu) 結(jié)構(gòu)：var Constructor = function () /constructor defined hereCtotype = (function() /hidden variables /hidden functions return /exp

12、osed memberssomeFunc: pointerToSomeFuncanotherFunc: pointerToAnotherFunc;();揭示模塊模式：示例var Calculator = function (name) / ;Ctotype = (function () var add, subtract, showResult, formatResult; add = function (x) / ; subtract = function (x) / ; showResult = function () / ; formatResult = fun

13、ction (name, value) / ; return add: add, subtract: subtract, showResult: showResult ;();var calc = new Calculator(First);揭示原型模型：概述 模塊模型提供變量和函數(shù)的封裝 提供了加入可見性（公有/私有）到成員的方式 提供可擴(kuò)展能力揭示原型模式 演示單例模式單一對(duì)象統(tǒng)治全部！Singleton單例模式：結(jié)構(gòu) 結(jié)構(gòu)：var module = function() var instance, getInstance; return getInstance: function() if(!instance) instance = new Instance(); return instance; ;();單例模式：示例var controls = function () var Calculator, calculatorInstance; Calculator = (function () function Calculator() / return Calculator; (); return get