前端工程师手册

模块化简介

需要模块管理的原因就是JavaScript发展的越来越快,超过了它产生时候的自我定位。由于没有模块管理的概念,在做大型项目或者文件组织的时候,就会异常纠结。所以才会产生出这么多的模块管理工具。模块化的主要特征是:

  • 模块化,可重用
  • 封装了变量和function,和全局的namaspace不接触,松耦合
  • 只暴露可用public的方法,其它私有方法全部隐藏

实现方式

低级写法

初级阶段,代码中充斥的是各种函数,通过名称区分:

function func1() {}

function func2() {}

实际上这些函数都被挂载到了全局变量下,使用的时候可以直接调用,缺点就是: "污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

对象写法

解决上述污染问题,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。

var module1 = new Object({
    _count : 0,
    m1 : function (){
      //...
    },
    m2 : function (){
      //...
    }
  });
// 等价于
var module2 = {
    _count: 0,
    m1 : function (){
      //...
    },
  m2 : function (){
    //...
  }
}

外部可以通过定义的变量名访问,起到了一点点的命名空间作用,但是同样缺点明显: 会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内_count的值。

立刻执行函数(Immediately-Invoked Function Expression,IIFE) or 匿名闭包

如果你不需要传参数或者没有一些特殊苛刻的要求的,可以使用立刻执行函数,该实例在内存中只会存在一份copy。

var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();

这样可以很好的保护私有变量,通过return来设置公开的方法。缺点也有: 动态添加方法的时候比较麻烦,且无法修改内部私有变量.

放大模式 or 宽放大模式(Loose augmentation)

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。

var module1 = (function (mod){
    mod.m3 = function () {
      //...
    };
    return mod;
  })(module1);

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

var module1 = ( function (mod){
    //...
    return mod;
  })(window.module1 || {});

构造函数

使用new操作符完成的构造函数,比如:

var Person = function(name) {
    var name = name || 'leo'; // 私有变量,通过闭包访问

    return {
        // 暴露公开的成员
        setName: function (name) {
            name = name;
        },
        getName: function () {
            return name;
        }
    };
}

var leo = new Person(); // Object{setName: function, getName: function()}

console.log(leo.getName());

每次用的时候都要new一下,也就是说每个实例在内存里都是一份copy。

引用全局变量

JavaScript有一个特性叫做隐式全局变量,不管一个变量有没有用过,JavaScript解释器反向遍历作用域链来查找整个变量的var声明,如果没有找到var,解释器则假定该变量是全局变量,如果该变量用于了赋值操作的话,之前如果不存在的话,解释器则会自动创建它,这就是说在匿名闭包里使用或创建全局变量非常容易,不过比较困难的是,代码比较难管理,尤其是阅读代码的人看着很多区分哪些变量是全局的,哪些是局部的。

匿名函数里我们可以提供一个比较简单的替代方案,我们可以将全局变量当成一个参数传入到匿名函数然后使用,相比隐式全局变量,它又清晰又快,我们来看一个例子:

(function ($, YAHOO) {
    // 这里,我们的代码就可以使用全局的jQuery对象了,YAHOO也是一样
} (jQuery, YAHOO));

基本的Module模式

有时候可能不仅仅要使用全局变量,而是也想声明全局变量,如何做呢?我们可以通过匿名函数的返回值来返回这个全局变量,这也就是一个基本的Module模式,来看一个完整的代码:

var blogModule = (function () {
    var my = {}, privateName = "博客园";

    function privateAddTopic(data) {
        // 这里是内部处理代码
    }

    my.Name = privateName;
    my.AddTopic = function (data) {
        privateAddTopic(data);
    };

    return my;
} ());

上面的代码声明了一个全局变量blogModule,并且带有2个可访问的属性:blogModule.AddTopic和blogModule.Name,除此之外,其它代码都在匿名函数的闭包里保持着私有状态。同时根据上面传入全局变量的例子,我们也可以很方便地传入其它的全局变量。

Module扩展方式

Module模式的一个限制就是所有的代码都要写在一个文件,但是在一些大型项目里,将一个功能分离成多个文件是非常重要的,因为可以多人合作易于开发。再回头看看上面的全局参数导入例子,我们能否把blogModule自身传进去呢?答案是肯定的,我们先将blogModule传进去,添加一个函数属性,然后再返回就达到了我们所说的目的,上代码:

var blogModule = (function (my) {
    my.AddPhoto = function () {
        //添加内部代码
    };
    return my;
} (blogModule));

但是有一个问题,这里扩展的方法,好像无法调用函数内部的私有变量,但是可以将一些需要的私有变量挂载到对象下。

松耦合扩展

上面的代码尽管可以执行,但是必须先声明blogModule,然后再执行上面的扩展代码,也就是说步骤不能乱,怎么解决这个问题呢?我们来回想一下,我们平时声明变量的都是都是这样的:var cnblogs = cnblogs || {} ;,确保cnblogs对象,在存在的时候直接用,不存在的时候直接赋值为{},我们来看看如何利用这个特性来实现Module模式的任意加载顺序:

var blogModule = (function (my) {

    // 添加一些功能   

    return my;
} (blogModule || {}));

这样每个单独分离的文件都保证这个结构,那么我们就可以实现任意顺序的加载,所以,这个时候的var就是必须要声明的,因为不声明,其它文件读取不到的。缺点: 没办法重写你的一些属性或者函数,也不能在初始化的时候就是用Module的属性。

紧耦合扩展

紧耦合扩展限制了加载顺序,但是提供了我们重载的机会,看如下例子:

var blogModule = (function (my) {
    var oldAddPhotoMethod = my.AddPhoto;

    my.AddPhoto = function () {
        // 重载方法,依然可通过oldAddPhotoMethod调用旧的方法
    };

    return my;
} (blogModule));

通过这种方式,我们达到了重载的目的,当然如果你想在继续在内部使用原有的属性,你可以调用oldAddPhotoMethod来用。

跨文件共享私有对象

如果一个module分割到多个文件的话,每个文件需要保证一样的结构,也就是说每个文件匿名函数里的私有对象都不能交叉访问,那如果我们非要使用,那怎么办呢? 我们先看一段代码:

var blogModule = (function (my) {
    var _private = my._private = my._private || {},

        _seal = my._seal = my._seal || function () {
            delete my._private;
            delete my._seal;
            delete my._unseal;

        },

        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };

    return my;
} (blogModule || {}));

任何文件都可以对他们的局部变量_private设属性,并且设置对其他的文件也立即生效。一旦这个模块加载结束,应用会调用 blogModule._seal()"上锁",这会阻止外部接入内部的_private。如果这个模块需要再次增生,应用的生命周期内,任何文件都可以调用_unseal() ”开锁”,然后再加载新文件。加载后再次调用_seal()”上锁”。

参考资料