JavaScript的模块模式
来源:互联网 发布:db2数据库如何删除 编辑:程序博客网 时间:2024/04/29 18:33
在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(Module Pattern)。
JS中有一个显著的特性: 匿名函数(anonymous function),通过匿名函数的建立和执行,匿名函数里的代码就形成了一个闭包(closure),从而形成,封装和控制一个对象的Private和Public的特性,避免了全局变量的泛滥和与其他脚本的冲突。
(function () {// 所有的变量和函数只在这个范围内有效// 仍然可以使用全局变量}());
经典的模块模式模板
var myNamespace = (function () { var myPrivateVar, myPrivateMethod; // A private counter variable myPrivateVar = 0; // A private function which logs any arguments myPrivateMethod = function( foo ) { console.log( foo ); }; return { // A public variable myPublicVar: "foo", // A public function utilizing privates myPublicFunction: function( bar ) { // Increment our private counter myPrivateVar++; // Call our private method using bar myPrivateMethod( bar ); } };})();
通过闭包,可以看到,当我们使用myNamespace时,我们只能看到myPublic*的属性和方法,而myPrivate*的属性和方法是无法直接访问的。
基本模式扩展
Import mixins
JS有一个重要特性叫隐式全局变量,也就是说无论什么时候,JS解释器都对一个变量寻找var声明,如果没有找到,就视为这个变量时全局变量。这样看起来在闭包中使用全局变量时很容易的事,但同时很容易造成代码的混乱。好在匿名函数也可以接收参数,这样通过参数传递,我们可以把想使用的全局变量import到匿名函数中,从而提供一个更清晰干净的使用方法。
(function ($, YAHOO) {// 这样就可以访问jQuery (as $) 和 YAHOO 库}(jQuery, YAHOO));
Module exports
有时候不仅仅使用全局变量,而且也想声明一个自己的全局变量,这可以通过匿名函数的return value轻松实现。
var MODULE = (function () {var my = {},privateVariable = 1;function privateMethod() {// ...}my.moduleProperty = 1;my.moduleMethod = function () {// ...};return my;}());
高级扩展
基于上面的基本模式,我们可以继续扩展。
Augmentation
基本模块模式的限制是我们必须把整个模块放在一个file里,那么当需要把一个模块分散到多个文件时,怎么办呢?一个号办法就是augment modules。我们首先输入module,然后增加属性方法,然后再输出。例子如下
var MODULE = (function (my) {my.anotherMethod = function () {// added method...};return my;}(MODULE));
Loose Augmentation
上面的例子需要先有一个Module,然后在此基础上增加新的特性。但有的时候,我们异步加载JS脚本,这样就需要一个低耦合的模块建立方法, 通过如下结构便可实现。
var MODULE = (function (my) {// add capabilities...return my;}(MODULE || {}));
Sub-modules
可以基于Module建立Sub modules,这个非常简单,例子如下:MODULE.sub = (function () {var my = {};// ...return my;}());
至此,我们简单的介绍了模块模式,该模式作为最经典的JS模式,被各种JS框架广泛使用。它使得你的代码封装性更强,结构化更合理,更OOP。
- JavaScript的模块模式
- Javascript的一种模块模式
- Javascript的一种模块模式
- javascript模式--模块模式
- 转Javascript的一种模块模式
- JavaScript编程模式:模块的力量
- 理解JavaScript模块模式
- Javascript模块模式
- Javascript 模块模式
- javascript(模块模式)
- javascript 模式之模块模式
- JavaScript 设计模式 - 模块模式
- javascript 设计模式-模块模式
- JavaScript的自执行方法和模块模式
- 深入理解JavaScript 模块模式
- 深入理解JavaScript 模块模式
- JavaScript 模块模式(三)
- 深入理解JavaScript 模块模式
- 交叉工具链制作至尊宝典
- 入门CSS框架960Grid的最佳教程
- 行锁原理 [不错的总结]
- 日语最常用100常用语
- 数字信号产生之解析信号的产生
- JavaScript的模块模式
- 单例模式
- android wifi工作流程
- css-高度自适应的问题
- Eval 结合后台的截取字符串函数
- 内联函数
- [Hadoop源码解读](二)MapReduce篇之Mapper类(转)
- 程序中调用命令行命令,不显示那个黑黑的DOS窗口
- WINCE6.0+S3C2443下SD卡驱动