2015秋前端开发课件js oop6模块与模式

1、6-模块与模式私有/公开字段、模块、揭示模块2015 Spring, 本章内容 JavaScript中的公有/私有字段 模块模式 揭示模块模式 揭示原型模式 单例模式公有/私有字段使用函数作用域公有/私有字段 每个变量被定义为： 在全局作用域（公有） 在函数作用域（私有）var global = 5;function myFunction() var private = global;function innerFunction()var innerPrivate = private;公有/私有字段 演示模块模式隐藏成员优缺点 优点： 模块化代码至可重用对象 变量/函数不在全局命名空间中 只暴

2、露公有成员 缺点： 不易扩展 调试有问题模块模式：结构 结构：var module = (function () /私有变量/私有函数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();模块模式：概要 模块模式提供了变量和函数的封装 提供了加入可见性（公有/私有）到成员的方式 每个对象实例在内存中创建新的函数拷贝模块模式

6、演示揭示模块模式揭示最关注的成员揭示模块模式：优缺点 优点： 模块化代码到可重用对象中 变量/函数从全局命名空间取出 只暴露可见成员 清洁方式来暴露成员 易于改变成员私有性 缺点： 不易扩展 调试有问题 难以为测试来仿制隐藏对象揭示模块模式：结构 结构：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、函数的封装 提供了加入可见性（公有/私有）到成员的方式 扩展对象困难，因没有使用原型揭示模块模式 演示揭示原型模式揭示最关注的成员揭示原型模式：优缺点 优点： 模块化代码到可重用对象中 变量/函数从全局命名空间取出 只暴露可见成员 函数立即加载入内存 可扩展 缺点： this棘手 构造器从原型分离揭示原型模式：结构 结构：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);揭示原型模型：概述 模块模型提供变量和函数的封装 提供了加入可见性（公有/私有）到成员的方式 提供可扩展能力揭示原型模式 演示单例模式单一对象统治全部！Singleton单例模式：结构 结构：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