深入理解JavaScript 模块模式

(原文)http://www.cnblogs.com/starweb/archive/2013/02/17/2914023.html

英文:http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

模块模式是JavaScript一种常用的编码模式。这是一般的理解,但也有一些高级应用没有得到很多关注。在本文中,我将回顾基础知识,浏览一些不错的高级技巧,甚至我认为是原生基础的。
基础知识
首先我们开始简单概述模型模式。三年前Eric Miraglia(YUI)的博文使模型模式众所周知。如果你已经很熟悉模型模式,可以直接阅读“高级模式”。
匿名闭包
这是一切成为可能的基础,也是JavaScript最好的特性。我们将简单的创建匿名函数,并立即执行。所有函数内部代码都在闭包(closure)内。它提供了整个应用生命周期的私有和状态。

  1. (function () {
  2. // ... all vars and functions are in this scope only
  3. // still maintains access to all globals
  4. }());

复制代码

注意匿名函数周围的()。这是语言的要求。关键字function一般认为是函数声明,包括()就是函数表达式。
引入全局
JavaScript有个特性,称为隐性全局。使用变量名称时,解释器会从作用域向后寻找变量声明。如果没找到,变量会被假定入全局(以后可以全局调用)。如果会被分配使用,在还不存在时全局创建它。这意味着在匿名函数里使用全局变量很简单。不幸的是,这会导致代码难以管理,文件中不容易区分(对人而言)哪个变量是全局的。
幸好,匿名函数还有一个不错的选择。全局变量作为参数传递给匿名函数。将它们引入我们的代码中,既更清晰,又比使用隐性全局更快。下面是一个例子:

  1. (function ($, YAHOO) {
  2. // 当前域有权限访问全局jQuery($)和YAHOO
  3. }(jQuery, YAHOO));

复制代码

模块出口
有时你不只想用全局变量,但你需要先声明他们(模块的全局调用)。我们用匿名函数的返回值,很容易输出他们。这样做就完成了基本的模块模式。以下是一个完整例子:

  1. var MODULE = (function () {
  2. var my = {},
  3. privateVariable = 1;
  4. function privateMethod() {
  5. // ...
  6. }
  7. my.moduleProperty = 1;
  8. my.moduleMethod = function () {
  9. // ...
  10. };
  11. return my;
  12. }());

复制代码

注意,我们声明了一个全局模块MODULE,有两个公开属性:方法MODULE.moduleMethod和属性MODULE.moduleProperty。而且,匿名函数的闭包还维持了私有内部状态。同时学会之上的内容,我们就很容易引入需要的全局变量,和输出到全局变量。
高级模式
对许多用户而言以上的还不足,我们可以采用以下的模式创造强大的,可扩展的结构。让我们使用MODULE模块,一个一个继续。
扩充
模块模式的一个限制是整个模块必须在一个文件里。任何人都了解长代码分割到不同文件的必要。还好,我们有很好的办法扩充模块。(在扩充文件)首先我们引入模块(从全局),给他添加属性,再输出他。下面是一个例子扩充模块:

  1. var MODULE = (function (my) {
  2. my.anotherMethod = function () {
  3. // 此前的MODULE返回my对象作为全局输出,因此这个匿名函数的参数MODULE就是上面MODULE匿名函数里的my
  4. };
  5. return my;
  6. }(MODULE));

复制代码

我们再次使用var关键字以保持一致性,虽然其实没必要。代码执行后,模块获得一个新公开方法MODULE.anotherMethod。扩充文件没有影响模块的私有内部状态。
松耦合扩充 上面的例子需要我们首先创建模块,然后扩充它,这并不总是必要的。提升JavaScript应用性能最好的操作就是异步加载脚本。因而我们可以创建灵活多部分的模块,可以将他们无顺序加载,以松耦合扩充。每个文件应有如下的结构:

  1. var MODULE = (function (my) {
  2. // add capabilities...
  3. return my;
  4. }(MODULE || {}));

复制代码

这个模式里,var语句是必须的,以标记引入时不存在会创建。这意味着你可以像LABjs一样同时加载所有模块文件而不被阻塞。
紧耦合扩充
虽然松耦合很不错,但模块上也有些限制。最重要的,你不能安全的覆写模块属性(因为没有加载顺序)。初始化时也无法使用其他文件定义的模块属性(但你可以在初始化后运行)。紧耦合扩充意味着一组加载顺序,但是允许覆写。下面是一个例子(扩充最初定义的MODULE):

  1. var MODULE = (function (my) {
  2. var old_moduleMethod = my.moduleMethod;
  3. my.moduleMethod = function () {
  4. // method override, has access to old through old_moduleMethod...
  5. };
  6. return my;
  7. }(MODULE));

复制代码

我们覆写的MODULE.moduleMethod,但依旧保持着私有内部状态。
克隆和继承

  1. var MODULE_TWO = (function (old) {
  2. var my = {},
  3. key;
  4. for (key in old) {
  5. if (old.hasOwnProperty(key)) {
  6. my[key] = old[key];
  7. }
  8. }
  9. var super_moduleMethod = old.moduleMethod;
  10. my.moduleMethod = function () {
  11. // override method on the clone, access to super through super_moduleMethod
  12. };
  13. return my;
  14. }(MODULE));

复制代码

这种方式也许最不灵活。他可以实现巧妙的组合,但是牺牲了灵活性。正如我写的,对象的属性或方法不是拷贝,而是一个对象的两个引用。修改一个会影响其他。这可能可以保持递归克隆对象的属性固定,但无法固定方法,除了带eval的方法。不过,我已经完整的包含了模块。(其实就是做了一次浅拷贝)。
跨文件私有状态
一个模块分割成几个文件有一个严重缺陷。每个文件都有自身的私有状态,且无权访问别的文件的私有状态。这可以修复的。下面是一个松耦合扩充的例子,不同扩充文件之间保持了私有状态:

  1. var MODULE = (function (my) {
  2. var _private = my._private = my._private || {},
  3. _seal = my._seal = my._seal || function () {
  4. delete my._private;
  5. delete my._seal;
  6. delete my._unseal;
  7. },//模块加载后,调用以移除对_private的访问权限
  8. _unseal = my._unseal = my._unseal || function () {
  9. my._private = _private;
  10. my._seal = _seal;
  11. my._unseal = _unseal;
  12. };//模块加载前,开启对_private的访问,以实现扩充部分对私有内容的操作
  13. // permanent access to _private, _seal, and _unseal
  14. return my;
  15. }(MODULE || {}));

复制代码

何文件都可以在本地的变量_private中设置属性,他会对别的扩充立即生效(即初始化时所有扩充的私有状态都保存在_private变量,并被my._private输出)。模块完全加载了,应用调用MODULE._seal()方法阻止对私有属性的读取(干掉my._private输出)。如果此后模块又需要扩充,带有一个私有方法。加载扩充文件前调用MODULE._unseal()方法(恢复my._private,外部恢复操作权限)。加载后调用再seal()。
这个模式一直随我工作至今,我还没看到别的地方这样做的。我觉得这个模式很有用,值得写上。
子模块
最后的高级模式实际上最简单。有很多好方法创建子模块。和创建父模块是一样的:

  1. MODULE.sub = (function () {
  2. var my = {};
  3. // 就是多一级命名空间
  4. return my;
  5. }());

复制代码

虽然很简单,但我还是提一下。子模块有所有正常模块的功能,包括扩充和私有状态。
总结
大多数高级模式可以互相组合成更多有用的模式。如果要我提出一个复杂应用的设计模式,我会组合松耦合、私有状态和子模块。
这里我还没有涉及性能,不过我有个小建议:模块模式是性能增益的。他简化了许多,加快代码下载。松耦合可以无阻塞并行下载,等价于提高下载速度。可能初始化比别的方法慢一点,但值得权衡。只要全局正确的引入,运行性能不会有任何损失,可能还因为局部变量和更少的引用,加快子模块的加载。
最后,一个例子动态加载子模块到父模块(动态创建)中。这里就不用私有状态了,其实加上也很简单。这段代码允许整个复杂分成的代码核心及其子模块等平行加载完全。

  1. var UTIL = (function (parent, $) {
  2. var my = parent.ajax = parent.ajax || {};
  3. my.get = function (url, params, callback) {
  4. // ok, so I'm cheating a bit :)
  5. return $.getJSON(url, params, callback);
  6. };
  7. // etc...
  8. return parent;
  9. }(UTIL || {}, jQuery));

复制代码

我希望你能受益的,并请发表评论,分享您的想法。 现在,继续前进,并写出更好的,更模块化的JavaScript!

转自:http://www.oschina.net/translate/javascript-module-pattern-in-depth

(转)深入理解JavaScript 模块模式的更多相关文章

  1. 深入理解JavaScript 模块模式

    http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html 模块模式是JavaScript一种常用的编码模式.这是一般的 ...

  2. Javascript 模块模式

    模块模式(Module Pattern)提供了一种代码封装的方式,可以优雅地创建非耦合的代码块. 它是利用即时函数为对象创建私有变量和特权方法.严格来说,Javascript中没有私有成员的概念,所有 ...

  3. javascript模块模式

    目前模块模式得到了广泛应用,因为它提供了结构化的思想并且有助于组织日益增长的代码.模块模式提供了一种创建自包含非耦合代码片段有利工具,可以将它视为黑盒功能. 板栗: var array = (func ...

  4. JQuery日记6.5 Javascript异步模式(一)

    理解力JQuery前实现异步队列,有必要理解javascript异步模式. Javascript异步其实并不严重格异步感,js使某些片段异步方式在将来运行,流不必等待继续向下进行. 在多线程的语言中最 ...

  5. Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...

  6. 深入理解JavaScript系列(47):对象创建模式(上篇)

    介绍 本篇主要是介绍创建对象方面的模式,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码. 模式1:命名空间(namespace) 命名空间可以减少全局命名所需的数量,避免命名冲突或过度. ...

  7. 深入理解JavaScript系列(48):对象创建模式(下篇)

    介绍 本篇主要是介绍创建对象方面的模式的下篇,利用各种技巧可以极大地避免了错误或者可以编写出非常精简的代码. 模式6:函数语法糖 函数语法糖是为一个对象快速添加方法(函数)的扩展,这个主要是利用pro ...

  8. 【转】Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...

  9. 深入理解JavaScript系列(36):设计模式之中介者模式

    介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www ...

随机推荐

  1. Linux和Windows下ping命令详解(转:http://linux.chinaitlab.com/command/829332.html)

    一.Linux下的ping参数 用途 发送一个回送信号请求给网络主机. 语法 ping [ -d] [ -D ] [ -n ] [ -q ] [ -r] [ -v] [ \ -R ] [ -a add ...

  2. (1) 第一章 Java体系结构介绍

    1.网络带来的挑战和机遇 (1).挑战一: 网络包含的设备越来越广泛, 硬件体系不同, 操作系统不同,用途不同. java解决办法: 通过创建与平台无关的程序来解决这个问题.一个java程序可以不需要 ...

  3. Python namedtuple

    我们都知道Python中的tuple是一个非常高效的集合对象,但是我们只能通过索引的方式访问这个集合中的元素,比如下面的代码: Bob=('bob',30,'male') print'Represen ...

  4. Giving Data Backup Option in Oracle Forms 6i

    Suppose you want to give the data backup option in Oracle Forms application to some client users, wh ...

  5. 【Android】解析Json数据

    Json数据:"{\"UserID\":\"Allen\",\"Dep\":IT,\"QQ\":\" ...

  6. C# 调用 Outlook发送邮件实例

    添加引用:Microsoft.Office.Interop.Outlook using System; using System.Collections.Generic; using System.L ...

  7. cocos2d学习笔记

    doxygen工具 生成cocos2d的api文档 位图字体编辑工具 Glyph Designer http://www.71squared.com/glyphdesigner  收费的 CCLabl ...

  8. XMLHttpRequest 加载进度

    XMLHttpRequest 相关资料请移步这里直接查看,我这里就不在赘述: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpReque ...

  9. Android NDK开发入门实例

    AndroidNDK是能使Android应用开发者把从c/c++编译而来的本地代码嵌入到应用包中的一系列工具的组合. 注意: AndroidNDK只能用于Android1.5及以上版本中. I. An ...

  10. services 文件

    Services 文件列出了服务使用的标准端口号.可以向表中添加自己定义的项,来给自己的服务选择.(安装在Windows目录下的一个子目录中,取决于Windows版本) # Copyright (c) ...