模块化

CommonJS

• 一个文件为一个模块
• 通过module.exports 暴露模块接口
• 通过require 引入模块
• 同步执行

在CommonJS中一个文件为一个模块，模块内的变量外界是不能直接被访问到的，那就只能通过module.exports接口暴露出来的方法，变量或者api,然后在需要调用的方法通过 require引入模块。

var req = require('./request');
exports = module.exports = {
    req
}
复制代码

AMD

AMD表示的是Async Module Definition异步加载模块

• 使用define定义模块
• 使用require 加载模块
• RequireJS 库
• 依赖前置，提前执行

define {
    // 模块名
    "alpha",
    // 依赖
    ["require","othermodule"]
}
复制代码

CMD

CMD表示的是Common Module Definition 表示的就是通用模块定义

• 一个文件为一个模块
• 使用define定义一个模块
• 使用require 来加载一个模块
• SeaJS
• 尽可能懒执行

// 所有模块都通过define定义
define(function(require,exports,module) {
    // 通过require引入依赖
    var $ = require('jquery');
    var Spinning = require('./spinning');
    
    // 通过exports 对外提供接口
    exports.doSomeThing = ...
    
    // 或者通过module.exports 提供整个接口
    module.exports = ...
})
复制代码

UMD

Universal Module Definition 通用解决方案

• 判断是否支持AMD
• 判断是否支持CommonJS
• 如果都没有，使用全局变量

(function(root,factory) {
    if(typeof define === 'function' && define.amd) {
        define([],factory);
    } else if(typeof exports === 'object') {
        module.exports = factory();
    } else {
        // 都没有的话，直接暴露给浏览器窗口
        root.returnExports = factory();
    }
}(this,function() {
    return {};
})
复制代码

ESM

ESM 表示的是EcmaScript Module

• 一个文件一个模块
• export 暴露的模块的接口
• import 引入模块的方法

// 引入模块
import theDefault, {named1,named2} from 'src/mylib';
import {named1,named2} from 'src/mylib';
import * as mylib from 'src/mylib';

// 暴露接口
export var myVa1 = ''; 
export let myVa2 = '';
export const myVa3 = '';

export function myFunc();
export class MyClass {};
复制代码