javascript设计模式之Module模块
2015-07-30 08:59
666 查看
模块是任何强大的应用程序架构不可或缺的一部分,它通常能够帮助我们清晰地分离和组织项目中的代码单元。
JavaScript实现模块模式 的几种方法:
(1)对象字面量表示法
(2)Module模式
(3)AMD模式
(4)CommonJS模块
(5)ECMAScript Harmony
使用对象字面量有助于封装和组织代码。
在JavaScript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公用/私有方法和变量,从而屏蔽来自全局作用域的特殊部分,避免命名冲突。
示例:购物车
优点:
(1)只有我们的模块才能享有拥有私有函数的自由。因为他们不会暴露于页面的其余部分。
(2)鉴于函数往往已经声明并且命名,在试图找到哪些函数抛出异常时,这将使得在调试器中显示堆栈变得容易。
他创建了一种新的模式,能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象,它拥有指向私有函数的指针,该函数是他希望展示为公有的方法。
示例:
JavaScript实现模块模式 的几种方法:
(1)对象字面量表示法
(2)Module模式
(3)AMD模式
(4)CommonJS模块
(5)ECMAScript Harmony
1.对象字面量
示例:var myModule={ myProperty:"someValue", myConfig:{ useCaching:true, language:"en" }, myMethod:function(){ console.log("Hello World"); } } Module.myMethod();
使用对象字面量有助于封装和组织代码。
2.Module模式
Module模式最初是被定义为一种在传统软件工程中为类提供私有和公用的封装方法。在JavaScript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公用/私有方法和变量,从而屏蔽来自全局作用域的特殊部分,避免命名冲突。
示例:购物车
var basketModule=(function(){ var basket=[]; function doSomethingPrivate(){ //...... } return { addItem:function(values){ basket.push(values); }, getItemCount:function(){ return basket.length; }, getTotal:function(){ var itemCount=this.getItemConunt(), total=0; while(itemCount--){ total+=basket[itemCount].price; return total; } } } })();
优点:
(1)只有我们的模块才能享有拥有私有函数的自由。因为他们不会暴露于页面的其余部分。
(2)鉴于函数往往已经声明并且命名,在试图找到哪些函数抛出异常时,这将使得在调试器中显示堆栈变得容易。
3.改进--揭示模式(Revealing Module)
产生原因:Heilmann对于这种状况不满,当他想从另外一个方法调用一个公有方法或者访问公有变量时,必须重复主对象的名称。他也不喜欢使用Module模式时,必须切换到对象字面量表示法来让某种方法变为公有方法。他创建了一种新的模式,能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象,它拥有指向私有函数的指针,该函数是他希望展示为公有的方法。
示例:
var revealingModule=(function(){ var privateVar="private", publcVar="Hello World"; function privateFunction(){ console.log("Name:"+privateVar); } function publicSetName(strName){ privateName=strName; } function publicGetName(){ privateFunction(); } return { setName:publicSetName, greeting:publicVar, getName:publicGetName } })();
相关文章推荐
- Javascript Array操作函数整理
- JavaScript学习14:表单处理
- js中cookie的使用详细分析
- Javascript操作iframe
- javascript 语言精粹 笔记推荐。。
- Javascript中理解发布--订阅模式
- javaScript之function定义
- js代码实现微博导航栏
- 理解javascript中的原型和原型链
- 用javascript实现自动输出网页文本
- javascript中if和switch,==和===详解
- js判断浏览器类型及设备(移动页面开发)
- javascript设计模式之对象工厂函数与构造函数详解
- js代码验证手机号码和电话号码是否合法
- js代码实现随机颜色的小方块
- JS如何实现文本框随文本的长度而增长
- 使用js复制链接中的部分文字的方法
- javascript中递归函数用法注意点
- javaScript实现滚动新闻的方法
- javascript实现列表滚动的方法