美文网首页技术干货
JS 101 - Module Pattern

JS 101 - Module Pattern

作者: ifcode | 来源:发表于2014-07-24 20:37 被阅读116次

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

    相关文章

      网友评论

        本文标题:JS 101 - Module Pattern

        本文链接:https://www.haomeiwen.com/subject/pcbstttx.html