了解前端模块化

前言

随着我们前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理，这时候就有人问什么是模块化？模块化就是将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起。

模块化规范

比较常用的有CommonJS, AMD, ES6、CMD规范。

AMD

AMD是RequireJS 在推广过程中对模块定义的规范化产出，AMD是异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块，实现AMD规范的模块化：用require.config()指定引用路径等，用define()定义模块，用require()加载模块。

//定义没有依赖的模块
define(function(){
   return 模块
})

//定义有依赖的模块
define(['md1', 'md2'], function(m1, m2){
   return 模块
})

//引入使用模块
require(['md1', 'md2'], function(m1, m2){
   使用m1/m2
})

// 引入路径和指定其引用名 
require.config({ 
    baseUrl: "js/lib", 
    paths: { 
        "jquery": "jquery.min", //实际路径为js/lib/jquery.min.js 
        "underscore": "underscore.min", 
    } 
});

CommonJS

CommonJs 是服务器端模块的规范是运行时同步加载的，Node.js采用了这个规范，根据CommonJS规范，一个单独的文件就是一个模块使用module.exports向外暴露函数和变量。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

// 定义模块m.js
var a = 0;
function b() {}
module.exports = { //在这里写上需要向外暴露的函数、变量
  a: a,
  b: b
}

// 引用自定义的模块时，参数包含路径，可省略.js
var m = require('./m.js');
var a = m.a
var b = m.b

ES6

ES6 在语言标准的层面上，实现了模块功能，其模块功能主要由三个命令构成：export、export default、import。export和export default命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能，如果输入的是export规定的模块需要用大括号输入，export default则不需要。

/** 定义模块 m.js **/
var a = 0;
var b = function () {};
export { a, b };

/** 定义模块 m1.js **/
var c = 0;
var d = function () {};
export default { c, d };

/** 引用模块 **/
import { a, b } from './m.js';

/** 引用模块 **/
import e from './m1.js';
var e1 = e.c
var e2 = e.d

CMD

CMD是另一种js模块化方案，它与AMD很类似，不同点在于：AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中产生的。