JS 101 - Module Pattern

前面介绍过JS中的namespace, 看起来好像我们已经成功解决了全局空间冲突的问题了。 但前面提到的方法有一个缺点——我们无法限制对方法和变量的访问，他们都是公开的。另一个不够优雅的地方就是引入了大量的this和prototype声明，略显繁琐。今天要讲的这个设计模式提供了一种易读的方法解决了以上问题，也是JS中最常用的设计模式之一。

让我们先来看一个看起来很奇怪的函数：

(function() {
// some code
})();

这个有许多括号的函数叫做立即调用函数表达式IIFE，其含义就是声明一个函数并立即执行该函数。为什么我们要如此大费周章的弄一个立刻执行的函数呢？回顾一下JS的基础知识，我们知道JS中并没有block scope这个概念，只有function才拥有自己的 scope。因此IIFE实际上创建了一个封闭的scope，用来模拟private scope。

对前面提到的namespace稍作修改：

var MODULE = (function() {
// some code
})();

可得到一个名为MODULE的私密封装空间， 外界无法访问该空间内部。 这里为了提高可读性，用大写声明模块。

如果我们在MODULE内部有一个叫做privateMethod的函数：

var MODULE = (function() {

  var privateMethod = function() {
  };

})();

外界无法用类似MODULE.privateMethod()这样的手段访问该函数， 我们成功创建了一个private method！同理，我们也可以创建private variable。

当我们创建了封闭的私密空间后，该空间对外界而言就是一个看不见内部构造的黑盒。但如果这个黑盒不能给我们提供服务，他就失去了存在的意义。为了给外界提供服务，我们还需要给这个黑盒子设置一组借口。就好比插座， 我们虽然看不到埋在墙里的部分是什么，但我们知道只要用适配的插头接入插座， 就可以得到一定标准的电流来驱动电器。

Module Pattern中的接口由return实现：

var MODULE = (function() {

  return {
    publicMethod: function() {
    }
  };

})();

return返回一个对象字面量，这个对象字面量就是外界可访问的接口 : MODULE.publicMethod();

该接口可包含多个方法，这些方法可以访问private variable和private function:

var MODULE = (function() {

  var _privateName = '';
  var privateMethod = function() {
  };

  return {
    publicGetName: function() {
      return _privateName;
    },
    publicOne: function() {
    },
    publicTwo: function() {
    }
  };
})();

于是一个几乎完整的private scope就诞生了。在这里不得不佩服JS的前辈们，能在这么贏弱的语法上硬是搭建出了相对完善的语言结构。

上面这个模式已近完整，可应对绝大部分情况了。但我们还可以跟前面讲过的namespace结合起来，让return部分更清晰明了：

var MODULE = (function() {

  var publicObject = {};

  var privateMethod = function() {};  

  publicObject.methodOne = function() {};

  publicObject.methodTwo = function() {};

  return publicObject;
})();

通过将借口的方法整合进返回对象中，return语句现在简洁了许多。另外也可以不返回对象，而是先声明方法，然后返回公共方法的引用：

var MODULE = (function() {

  var privateMethod = function() {};  

  var methodOne = function() {};

  var methodTwo = function() {};

  return {
    methodOne: methodOne,
    methodTwo: methodTwo
  };
})();

就我个人而言，我一般采用后两种方法。若接口中方法较少教简单，也可以采用第一种方法。

此外，module 也可以接收参数:

var MODULE = (function (param) {
  // some code
})(param);

甚至接收另一个module作为参数：

var ModuleTwo = (function (Module) {
    // access to `Module`
})(Module);

于是你会看到许多看起来不可思议又精妙绝伦的module pattern代码，就留给各位自己去探索吧。