该文章是直接翻译国外一篇文章，关于JS的Module模式的深度解析(这也是JS设计模式中的一种模式)。
都是基于原文处理的，其他的都是直接进行翻译可能有些生硬，所以为了行文方便，就做了一些简单的本地化处理。
如果想直接根据原文学习，可以忽略此文。
同时该篇文章也算是，前端模块化的番外篇。(这篇文章也在准备当中,敬请期待) 复制代码
模块模式是一种常用的代码模式。它简单实用，但是也有一些“优雅”的使用方式，没有得到开发者的重视。所以，这篇文章，带大家来重温一下基层的用法，并且介绍一些比较优雅的使用方式。
译者注：
模块模式，其实就是JS实现模块化的最基础的地基。例如AMD,UMD,COMMONJS,还有ES6的module都是基于这个实现方式(构建一个IIFE,{独立作用域})来实现模块化编程
还有一点就是ES6中
class是ES5构造函数的语法糖。ES5在自定义一个类，需要构造函数+构造函数.prototype来实现，但是为什么ES6的class却可以将prototype中的方法放在class的代码范围中。（也就是说，class一次性将构造函数和prototype都构建了。）如果想了解Class如何优雅的进行“糖化”
基础用法
我们来简单回顾一下什么是module pattern。如果你对基础知识比较熟悉的话，可以跳过这部分，直接翻阅"高级用法"。
匿名作用域(Anonymous Closures)
匿名作用域是实现模块化最基本的结构，也是在JS的语言范畴中，最好的实现方式。我们简单的构建了一个匿名函数，并且立马执行该匿名函数。在该函数中的所有代码都独立的运行在指定作用域中。并且该作用域中定义的私有变量和状态值贯穿项目的所有周期。
(function () { //在该作用域中的所有变量和函数都挂载在了全局变量上(都是全局变量) }()); 复制代码
Notice:
在匿名函数外包还有一个
()。这是必须要的。因为在JS中如果一个语句是以
function开头，JS引擎会认为这是一个函数声明。而通过()包裹之后，就变成了函数表达式。
导入全局变量
JS语法中，存在一个很有意思的特性：隐含的全局变量。
当访问一个变量名，JS编译器就会循着作用域链（
scope chain）去查找是否在指定的结点中存在与之相同的变量名。如果在整条作用域链中都没有发现该变量名，这个变量就会被自动赋给全局变量。当编译器对一个原本不存在的变量进行赋值，该变量也会自动挂载在全局变量。
针对隐含的全局变量这个特性，在一个匿名作用域中使用/创建一个变量是非常简单的。而这恰恰让代码变的维护性下降。
幸运的是，匿名函数为我们提供了一种解决方案。通过将全局变量作为参数传入到匿名函数中，直接对传入的全局变量赋值和查值。这样就比隐含的全局变量通过作用域链查找和赋值变量的方式更快，更简洁。
(function ($, YAHOO) { //在该作用域中，就能访问jQuery, YAHOO的实例了 }(jQuery, YAHOO)); 复制代码
模块导出
有些应用场景中，不仅仅是用到全局变量，而且还想声明一个全局变量。我们可以通过在匿名函数中return一个对象，来实现声明全局变量。
var MODULE = (function () { var my = {}, privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; }()); 复制代码
Notice:
我们声明了一个名为
MODULE的全局模块，该模块拥有两个公共(public)属性：一个方法(
MODULE.moduleMethod)、一个变量(MODULE.moduleProperty)并且该模块通过匿名函数实现了私有的(private)变量和方法。
高级用法
尽管上面的简单用法，能满足我们90%的模块需求，但是我们可以基于普通用法，来构建更加高级的用法
追加属性和方法(Augmentation)
针对上述模块实现而言，存在一个弊端/限制，就是一个文件定义整个模块的实现。 针对大型项目而言，代码的布局的高内聚，低耦合很重要。所以，有些特定的实现是不需要都堆砌在一个文件中的。
而argment modules这种代码布局方式就应运而生。
- 1. 导入指定模块
- 2. 在指定模块中新增属性
- 3. 导出修饰之后的模块
var MODULE = (function (my) { //基于MODULE的基础上，新增指定方法/属性 my.anotherMethod = function () { }; return my; }(MODULE)); 复制代码
在该匿名函数被执行之后，原先的module就会新增了一个新的公共方法(MODULE.anotherMethod)。该文件也可以存在自己的私有方法等。
宽松的扩展(Loose Augmentation)
我们上述的例子中，要求我们先构建一个初始模块，然后进行追加操作。其实这种处理方式不是必要的。因为，</code>标签可以实现异步加载，这样的话，就不存在模块初始化的问题，可能追加的模块先加载。这样就不会存在<strong>初始模块</strong>这个概念。</div><div>所以，我们需要一种定义模块的方式，而这种方式是不关心各个模块的加载顺序。</div><div>Talk is cheap ,show you the code:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22var%20MODULE%20%3D%20(function%20(my)%20%7B%5Cn%5Ct%2F%2F%20%E9%9A%8F%E6%84%8F%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7%5Cn%5Ctreturn%20my%3B%5Cn%7D(MODULE%20%7C%7C%20%7B%7D))%3B%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22HLx8p%22%7D"></div><div>Notice:</div><blockquote style="background-color: #F8F8F8;"><div>1.在该中模式下，<code>var</code>的声明是必要的。</div><div>2. 导入的模块是不需要考虑先前是否存在。也就意味着，使用<code>Loose Augmentation</code>构建的模块，在调用的时候，可以利用类似于<code>LABjs</code>的工具库，实现<strong>平行</strong>加载。</div></blockquote><h2 id="OfYNO"><br /></h2><h2 id="Jco7p">严谨的扩展(Tight Augmentation)</h2><div><br /></div><div>虽然利用<code>loose augmentation</code>构建的模块很好，但是也对模块新增了一些约束。其中比较重要的就是，1.你无法<strong>安全</strong>的对模块中的属性和方法进行<strong>重写</strong>。2.在初始化的时候，是无法使用在另外一个文件中定义的模块的属性。</div><div>而<code>Tight augmentation</code>隐藏了加载顺序。但是允许进行方法和属性的<strong>重载(override)</strong> 我们将原先实现过的<code>MODULE</code>作为参数传入到函数中</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22var%20MODULE%20%3D%20(function%20(my)%20%7B%5Cn%5Ctvar%20old_moduleMethod%20%3D%20my.moduleMethod%3B%5Cn%20%20%20%20%2F%2F%E8%BF%9B%E8%A1%8C%E6%96%B9%E6%B3%95%E7%9A%84%E9%87%8D%E6%96%B0%EF%BC%8C%E4%BD%86%E6%98%AF%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87old_moduleMethod%E8%AE%BF%E9%97%AE%E5%8E%9F%E6%9D%A5%E7%9A%84%E6%96%B9%E6%B3%95%5Cn%5Ctmy.moduleMethod%20%3D%20function%20()%20%7B%5Cn%5Ct%5Ct%2F%2F%20...%5Cn%5Ct%7D%3B%5Cn%5Ctreturn%20my%3B%5Cn%7D(MODULE))%3B%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22EbeKB%22%7D"></div><div>上述代码中，我们即对<code>MODULE.moduleMethod</code>进行<strong>重写</strong>，同时保持了对原始方法的<strong>引用</strong>(如果有必要的话)。</div><h2 id="u2Pth"><br /></h2><h2 id="N9MTY">复制和继承(Cloning and Inheritance)</h2><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22var%20MODULE_TWO%20%3D%20(function%20(old)%20%7B%5Cn%5Ctvar%20my%20%3D%20%7B%7D%2C%5Cn%5Ct%5Ctkey%3B%5Cn%5Ctfor%20(key%20in%20old)%20%7B%5Cn%5Ct%5Ctif%20(old.hasOwnProperty(key))%20%7B%5Cn%5Ct%5Ct%5Ctmy%5Bkey%5D%20%3D%20old%5Bkey%5D%3B%5Cn%5Ct%5Ct%7D%5Cn%5Ct%7D%5Cn%5Ctvar%20super_moduleMethod%20%3D%20old.moduleMethod%3B%5Cn%5Ctmy.moduleMethod%20%3D%20function%20()%20%7B%5Cn%5Ct%5Ct%2F%2F%E9%87%8D%E6%96%B0%E5%A4%8D%E5%88%B6%E4%B9%8B%E5%90%8E%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E9%80%9A%E8%BF%87super_moduleMethod%E6%9D%A5%E8%AE%BF%E9%97%AE%E5%8E%9F%E5%A7%8B%E6%96%B9%E6%B3%95%5Cn%5Ct%7D%3B%5Cn%5Ctreturn%20my%3B%5Cn%7D(MODULE))%3B%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22e2sJN%22%7D"></div><div>该实现方式，可能是最<strong>灵活</strong>的选择。</div><h2 id="Sg0xp"><br /></h2><h2 id="Y3cEI">跨文件的私有变量(Cross-File Private State)</h2><div><br /></div><div>将一个模块分成很多文件组成最大的限制就是：每个文件拥有自己的私有变量，同时这些私有变量无法跨文件访问。这样就无法进行单一模块的拆分处理。</div><div>但是，利用<code>loosely augmented module</code>可以很好的解决这个问题：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22var%20MODULE%20%3D%20(function%20(my)%20%7B%5Cn%5Ctvar%20_private%20%3D%20my._private%20%3D%20my._private%20%7C%7C%20%7B%7D%2C%5Cn%5Ct%5Ct_seal%20%3D%20my._seal%20%3D%20my._seal%20%7C%7C%20function%20()%20%7B%5Cn%5Ct%5Ct%5Ctdelete%20my._private%3B%5Cn%5Ct%5Ct%5Ctdelete%20my._seal%3B%5Cn%5Ct%5Ct%5Ctdelete%20my._unseal%3B%5Cn%5Ct%5Ct%7D%2C%5Cn%5Ct%5Ct_unseal%20%3D%20my._unseal%20%3D%20my._unseal%20%7C%7C%20function%20()%20%7B%5Cn%5Ct%5Ct%5Ctmy._private%20%3D%20_private%3B%5Cn%5Ct%5Ct%5Ctmy._seal%20%3D%20_seal%3B%5Cn%5Ct%5Ct%5Ctmy._unseal%20%3D%20_unseal%3B%5Cn%5Ct%5Ct%7D%3B%5Cn%5Ct%2F%2F%20permanent%20access%20to%20_private%2C%20_seal%2C%20and%20_unseal%5Cn%5Ctreturn%20my%3B%5Cn%7D(MODULE%20%7C%7C%20%7B%7D))%3B%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22dwwiC%22%7D"></div><div>任何文件都可以在<strong>局部变量</strong>(<code>_private</code>)上设置属性，并且在其他文件中可以<strong>立马</strong>范围到。</div><div>一旦该模块<strong>加载</strong>完成，程序调用<code>MODULE._seal()</code>，用于阻止外部文件访问该模块的内部属性(<code>internal _private</code>)。</div><div>如果需要对该模块进行扩展，则在应用程序的生命周期中任何文件下的内部方法中在新模块加载之前调用<code>_unseal()</code>。在扩展之后，继续调用<code>_seal()</code>用于私有属性的加密处理。</div><h2 id="kQ4r5"><br /></h2><h2 id="ptJss">子模块（Sub-modules）</h2><div><br /></div><div>我们上述介绍的高级模块都很简单。同时也有很多构建一个<strong>子模块</strong>的方式。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22MODULE.sub%20%3D%20(function%20()%20%7B%5Cn%5Ctvar%20my%20%3D%20%7B%7D%3B%5Cn%5Ct%2F%2F%20...%5Cn%5Ctreturn%20my%3B%5Cn%7D())%3B%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22cI2dI%22%7D"></div><h1 id="59q7A"><br /></h1><h1 id="qKbTs">总结</h1><div><br /></div><div>大多数的高级模式都可以互相组合用于构建一个更加方便的模式。如果想要构建一个比较复杂的程序。可以尝试<strong>loose augmentation</strong>、<strong>private state</strong>、 和 <strong>sub-modules</strong>的组合。</div>
