前言

历史上,js没有模块化的概念,不能把一个大工程分解成很多小模块。这对于多人开发大型,复杂的项目形成了巨大的障碍,明显降低了开发效率,java,Python有import,甚至连css都有@import,但是令人费解的是js居然没有这方面的支持。es6出现之后才解决了这个问题,在这之前,各大社区也都出现了很多解决方法,比较出色的被大家广为流传的就有AMD, CMD, CommonJs, UMD,今天就来分析这几个模块化的解决方案。

模块加载

上面提到的几种模块化的方案的模块加载有何异同呢?
先来说下es6模块,es6模块的设计思想是尽量静态化,使得编译时就能确定依赖关系,被称为编译时加载。其余的都只能在运行时确定依赖关系,这种被称为运行时加载。下面来看下例子就明白了,比如下面这段代码:

let {a,b,c} = require("util");    //会加载util里的所有方法,使用时只用到3个方法

import {a,b,c} from 'util';    //从util中加载3个方法,其余不加载

模块化方案

1、COMMONJS

commonjs是服务端模块化采用的规范,nodejs就采用了这个规范。
根据commonjs的规范,一个单独的文件就是一个模块,加载模块使用require方法,该方法读取文件并执行,返回export对象。

// foobar.js
// 私有变量
var test = 123;
// 公有方法
function foobar () {
 
    this.foo = function () {
        // do someing ...
    }
    this.bar = function () {
        //do someing ...
    }
}

// exports对象上的方法和变量是公有的
var foobar = new foobar();
exports.foobar = foobar;

// 读取
var test = require('./foobar').foobar;
test.bar();

CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

2、AMD

// API
define(id?, dependencies?, factory);
id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。

dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。

factory,是一个需要进行实例化的函数或者一个对象。


// example
define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
        // or:
        return require("beta").verb();
    }
});

提到 AMD 就不得不提 requirejs;

RequireJS 是一个前端的模块化管理的工具库,遵循AMD规范,AMD的基本思想就是先加载需要的模块,然后返回一个新的函数,所有的操作都在这个函数内部操作,之前加载的模块在这个函数里是可以调用的。

3、CMD

CMD是seajs在推广的过程中对模块的定义的规范化产出
和AMD提前执行不同的是,CMD是延迟执行,不过requirejs从2.0开始也开始支持延迟执行了,这取决于写法。
AMD推荐的是依赖前置,CMD推荐的是依赖就近。

// AMD
define(['./a','./b'], function (a, b) {
    //依赖一开始就写好
    a.test();
    b.test();
});
 
// CMD
define(function (requie, exports, module) {
    //依赖可以就近书写
    var a = require('./a');
    a.test();

    ...

    // 软依赖
    if (status) {
        var b = requie('./b');
        b.test();
    }
});

4、UMD

UMD是AMD和commonjs的结合
AMD适用浏览器,commonjs适用服务端,如果结合了两者就达到了跨平台的解决方案。
UMD先判断是否支持AMD(define是否存在),存在用AMD模块的方式加载模块,再判断是否支持nodejs的模块(exports是否存在),存在用nodejs模块的方式,否则挂在window上,当全局变量使用。

(function(window, factory) {
    //amd
    if (typeof define === 'function' && define.amd) {
        define(factory);
    } else if (typeof exports === 'object') { //umd
        module.exports = factory();
    } else {
        window.jeDate = factory();
    }
})(this, function() {  
    ...module..code...
})
文章目录