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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容