聊聊前端模块化规范

1. CommonJS

具体看，阮一峰写的javascript标准教程的commentjs章节

CommonJS规范由NodeJS采用，CommonJS定义每个文件就是一个模块，有自己的作用于，在一个文件里面定义的变量、函数、类、都是私有的，对其他文件不可见。
CommonJS加载模块是同步的，所以在加载完成后才执行后面操作，所以主要用于服务端编程，不适合在网页端使用。

Demo:
// 导出模块
var msg = require('./msg.js');
module.exports.log = function(msg){
    msg.handle(msg);
};
module.exports.version = '1.2';
// 依赖模块
var example = require('./example.js');
example.log('demo');
console.log(example.version);

2. AMD

AMD（异步模块定义）为浏览器环境设计，异步加载。由RequireJS采用，通过使用define来定义模块
define(id?: String, dependencies?: String[], factory: Function|Object);
第一个参数是模块id，第二个参数为依赖，factory的参数将由依赖的输出注入。前两个参数可选，默认依赖为[“require”, “exports”, “module”]

Demo:
// 定义模块
define('myModule', ['jquery'], function($) {
    $('body').text('hello world');
});
// 使用
require(['myModule'], function(myModule) {});

// 没有设置依赖的情况
require('muModule', function(require, exports, module) {
    var $ = require('jquery');
    // 兼容CommonJS的写法
  exports.add = function(x, y) {
        return x + y;
    };
    return {
        add: function(x, y) {
            return x + y;
        }
    };
    
});

3. CMD

和AMD用法类似，由玉伯开发的SeaJS采用。
与AMD所不同的是，CMD推崇依赖就近，AMD推崇依赖前置

4. ES6模块

DEMO:
// 普通模块 & 使用模块
import msg from './msg';
function log(msg) {
    msg.handle(msg);
}
export class Test {
    ...
}
export function other() {
    ...
}
export default log

5. UMD

UMD (Universal Module Definition), 提供一个前后端跨平台的解决方案(支持AMD与CommonJS模块方式),。
实现原理：
先判断是否支持Node.js模块格式（exports是否存在），存在则使用Node.js模块格式。
再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。
前两个都不存在，则将模块公开到全局（window或global）。