模块是任何强大应用程序中不可或缺的一部分,它通常能帮助我们清晰地分离和组织项目中的代码单元。
js中实现模块的方法:
1.对象字面量表示法
2.Module模式
3.AMD模块
4.CommonJS模块
5.ECMAScript Harmony 模块
对象字面量
对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始,在对象的外部,新成员可以使用如下赋值语句添加到对象字面量上,myModule.property = “someValue”。
var myModule = { myProperty:"someValue", myConfig:{ useCaching:true, language:"en" }, //基本方法 myMethod:function(){ //... }, //根据当前配置输出信息 myMethod2:function(){ console.log("Caching is:"+(this.myConfing.useCaching) ? "enabled":"disabled"); }, //重写当前配置 myMethod3:function(newConfig) { if(typeof newConfig ==="object"){ this.myConfig = newConfig; console.log(this.myConfig.language); } }, }; myModule.myMethod3({ language:"fr", usecaching:false })
使用对象字面量有助于封装和组织代码。
在javascript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。
module模式使用了闭包封装“私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式,防止起泄露至全局作用域,并与别的开发人员的接口发生冲突。通过该模式,只需要返回一个公有的API,而其他的一切则都维持在私有闭包里。
在module模式内,由于闭包的存在,声明变量和方法只在该模式内部可用,但在返回对象上定义的变量和方法,则对外部使用者都是可用的
module模式的实现
var testModule = (function(){ var counter = 0; return { incrementCounter:function(){ return ++counter; }, resetCounter:function(){ console.log("counter value prior to reset" + counter); counter = 0; } } })(); //增加计数器 testModule.incrementCounter(); //检查计数器值并重置 testModule.resetCounter();
代码的其他部分是无法直接读取incrementCounter()和resetCounter()。counter变量实际上是完全与全局作用域隔离的,因此它表现的就像是一个私有变量,它的存在被局限于模块的闭包内,因为唯一能够访问其作用域的代码就是这两个函数。上述方法进行了有效的命名空间设置,所以在测试代码中,所有的调用都需要加上前缀。
//包含命名空间、公有、和私有变量的Module模式 var myNamspace = (function(){ //私有计数器变量 var myPrivateVar = 0; //记录素有参数的私有函数 var myPrivateMethod = function(foo){ console.log(foo); }; return { //公有变量 muPublicVar:"foo", //调用私有变量和方法的公有函数 myPublicFunction:function(bar){ myPrivateVar++; myPrivateMethod(bar); } } })();
引用全局变量
JavaScript有一个特性叫做隐式全局变量,不管一个变量有没有用过,JavaScript解释器反向遍历作用域链来查找整个变量的var声明,如果没有找到var,解释器则假定该变量是全局变量,如果该变量用于了赋值操作的话,之前如果不存在的话,解释器则会自动创建它,这就是说在匿名闭包里使用或创建全局变量非常容易,不过比较困难的是,代码比较难管理,尤其是阅读代码的人看着很多区分哪些变量是全局的,哪些是局部的。
不过,好在在匿名函数里我们可以提供一个比较简单的替代方案,我们可以将全局变量当成一个参数传入到匿名函数然后使用,相比隐式全局变量,它又清晰又快,我们来看一个例子:
//全局模块 var myModule = (function(jQ,_){ function privateMethod1(){ jQ(".container").html(test); } return { publicMethod:function(){ privateMethod1(); } } })(jQuery,_); myModule.publicMethod(); //全局模块 var myModule = (function(){ //模块对象 var module = {}; privateVariale = "Hello"; function privateMethod(){ //... } module.publicproperty = "Foobar"; module.publiceMethod = function(){ } return module; })();
声明全局变量,而不需要实现它们,并可以同样地支持全局引入的概念
Module模式的还是存在一定的不足:
1. 由于我们访问公有和私有成员的方式不同,当我们想改变可见性时,实际上我们必须修改每一个曾经使用过该成员的存在。
2. 我们无法访问那些之后在方法里面添加的私有成员,
3. 无法为私有成员创建自动化单元测试,bug需要修正补丁时会增加额外的复杂性。
4. 开发人员无法轻易地扩展私有方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
问题内容: 我最近正在读《 学习JavaScript设计模式》 这本书。我没有得到的是模块模式和显示模块模式之间的区别。我觉得他们是同一回事。有人可以举一个例子吗? 问题答案: 至少有三种不同的方法来实现模块模式,但是显示模块模式是唯一具有正式名称的模块模式后代。 基本模块模式 模块模式必须满足以下条件: 私有成员住在封闭中。 公共成员暴露在返回对象中。 但是这个定义有很多歧义。通过以不同方式解决
本文向大家介绍javascript设计模式之装饰者模式,包括了javascript设计模式之装饰者模式的使用技巧和注意事项,需要的朋友参考一下 在js函数开发中,想要为现有函数添加与现有功能无关的新功能时,按普通思路肯定是在现有函数中添加新功能的代码。这并不能说错,但因为函数中的这两块代码其实并无关联,后期维护成本会明显增大,也会造成函数臃肿。 比较好的办法就是采用装饰器模式。在保持现有函数及其内
本文向大家介绍javascript设计模式之迭代器模式,包括了javascript设计模式之迭代器模式的使用技巧和注意事项,需要的朋友参考一下 迭代器模式分为内部迭代器和外部迭代器,内部迭代器就是在函数内部定义好迭代的规则,它完全接手整个迭代的过程,外部只需一次初始调用。 内部迭代器 以下自行实现的类似jquery中$.each()的each()函数就是内部迭代器 内部迭代器在调用时非常方便,但是
本文向大家介绍学习JavaScript设计模式之模板方法模式,包括了学习JavaScript设计模式之模板方法模式的使用技巧和注意事项,需要的朋友参考一下 一、定义 模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类。 二、示例 Coffee or Tea (1) 把水煮沸 (2) 用沸水浸
本文向大家介绍学习JavaScript设计模式之策略模式,包括了学习JavaScript设计模式之策略模式的使用技巧和注意事项,需要的朋友参考一下 把不变的部分和变化的部分隔开是每个设计模式的主题。 条条大路通罗马。我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法、也可以使用gzip算法。其灵活多样,我们可以采用策略模式解决。 一、定义 定义一系列的算法,把它们一个个封装
本文向大家介绍JavaScript设计模式之单例模式实例,包括了JavaScript设计模式之单例模式实例的使用技巧和注意事项,需要的朋友参考一下 《Practical Common Lisp》的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案。 不管是弱类型或强类型,静态或动态语言,命令式或说