JavaScript模块模式实例详解
本文实例讲述了JavaScript模块模式。分享给大家供大家参考,具体如下:
在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(ModulePattern)。
JS中有一个显著的特性:匿名函数(anonymousfunction),通过匿名函数的建立和执行,匿名函数里的代码就形成了一个闭包(closure),从而形成,封装和控制一个对象的Private和Public的特性,避免了全局变量的泛滥和与其他脚本的冲突。
(function(){
//所有的变量和函数只在这个范围内有效
//仍然可以使用全局变量
}());
经典的模块模式模板
varmyNamespace=(function(){
varmyPrivateVar,myPrivateMethod;
//Aprivatecountervariable
myPrivateVar=0;
//Aprivatefunctionwhichlogsanyarguments
myPrivateMethod=function(foo){
console.log(foo);
};
return{
//Apublicvariable
myPublicVar:"foo",
//Apublicfunctionutilizingprivates
myPublicFunction:function(bar){
//Incrementourprivatecounter
myPrivateVar++;
//Callourprivatemethodusingbar
myPrivateMethod(bar);
}
};
})();
通过闭包,可以看到,当我们使用myNamespace时,我们只能看到myPublic*的属性和方法,而myPrivate*的属性和方法是无法直接访问的。
基本模式扩展
Importmixins
JS有一个重要特性叫隐式全局变量,也就是说无论什么时候,JS解释器都对一个变量寻找var声明,如果没有找到,就视为这个变量时全局变量。这样看起来在闭包中使用全局变量时很容易的事,但同时很容易造成代码的混乱。好在匿名函数也可以接收参数,这样通过参数传递,我们可以把想使用的全局变量import到匿名函数中,从而提供一个更清晰干净的使用方法。
(function($,YAHOO){
//这样就可以访问jQuery(as$)和YAHOO库
}(jQuery,YAHOO));
Moduleexports
有时候不仅仅使用全局变量,而且也想声明一个自己的全局变量,这可以通过匿名函数的returnvalue轻松实现。
varMODULE=(function(){
varmy={},
privateVariable=1;
functionprivateMethod(){
//...
}
my.moduleProperty=1;
my.moduleMethod=function(){
//...
};
returnmy;
}());
高级扩展
基于上面的基本模式,我们可以继续扩展。
Augmentation
基本模块模式的限制是我们必须把整个模块放在一个file里,那么当需要把一个模块分散到多个文件时,怎么办呢?
一个号办法就是augmentmodules。我们首先输入module,然后增加属性方法,然后再输出。例子如下
varMODULE=(function(my){
my.anotherMethod=function(){
//addedmethod...
};
returnmy;
}(MODULE));
Loose Augmentation
上面的例子需要先有一个Module,然后在此基础上增加新的特性。但有的时候,我们异步加载JS脚本,这样就需要一个低耦合的模块建立方法,通过如下结构便可实现。
varMODULE=(function(my){
//addcapabilities...
returnmy;
}(MODULE||{}));
Sub-modules
可以基于Module建立Submodules,这个非常简单,例子如下:
MODULE.sub=(function(){
varmy={};
//...
returnmy;
}());
至此,我们简单的介绍了模块模式,该模式作为最经典的JS模式,被各种JS框架广泛使用。它使得你的代码封装性更强,结构化更合理,更OOP。
更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。