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代码,就留给各位自己去探索吧。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,793评论 18 138
  • { "Unterminated string literal.": "未终止的字符串文本。", "Identifi...
    栗子雨阅读 6,230评论 0 3
  • { "Unterminated string literal.": "未终止的字符串文本。", "Identifi...
    Waullen阅读 6,275评论 0 3
  • "Unterminated string literal.": "未终止的字符串文本。", "Identifier...
    两个心阅读 6,626评论 0 4
  • 我基本從來不寫工作的事兒。 因為工作實在沒啥好寫的,不就是工作唄。 然後今天打算稍微寫一點,就寫JS吧。 我一直相...
    LostAbaddon阅读 1,333评论 22 21
  • 春节由于生病,导致报名的共读课程都拖延了下来。然后今天发现很多东西都给自己亮了红灯。人生,真的不能有意外。 好好学...
    SKY云峰阅读 130评论 0 1
  • 最近打卡都处于无标题状态,原因是写出来的东西都太散了,想到哪写到哪,所以也不想费心思取个好看的标题来吸引眼球,虽然...
    巧巧姐阅读 68评论 4 2
  • 5月21到22号的过度是在电影院中观看《超脑48小时》,我很喜欢这种电影,有高科技,有情节,有暴力,有温情,这种刚...
    今天安好阅读 3,200评论 0 0