前端开发中常见模块规范

commonjs 规范

主要是正像服务端(后端)的模块规范，尤其是在nodejs发展起来后得到快速发展。

事例1：

//file a moduleA
//模块通过module.exports导出对外的变量或接口
module.exports = function( value ){
    return value * 2;
}
//-------- 分割线 ----
//fileb
//通过 require() 来导入其他模块的输出到当前模块作用域中
var fs = require('fs');
// ea6 语法
import fs from 'fs'; 
//using
fs.readFile('/path/file_a.js', (err, data) => {
  if (err) throw err;
  console.log(data);
});

AMD规范

常见与requirejs中，特点：声明加载前置，能很好的表明加载间的依赖关系，也有很好的包装特性。
缺点是在项目中资源前置加载导致阻塞加载引起的页面加载缓慢问题。

define(id?: String, dependencies?: String[], factory: Function|Object);
//定义
define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模块的输出
    $('body').text('hello world');
});
// 使用
define(['myModule'], function(myModule) {});

CMD规范

常见与seajs中，由阿里玉伯推动。特点，也就是常说的懒加载，就近声明就近加载。

// define(function(require, exports, module) {}）

//CMD
define(function (requie, exports, module) {
    //依赖可以就近书写
    var a = require('./a');
    a.test();
    ...
    //软依赖，根据条件加载
    if (status) {
        var b = requie('./b');
        b.test();
    }
});

UMD 规范

为了兼容以上规范，一些常见的js库使用这种规范，如：jQuery/Zepto/Underscore等

(function (window, factory) {
    if (typeof exports === 'object') {

        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {

        define(factory);
    } else {

        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});

---

参考：
CommonJS规范
AMD, CMD, CommonJS和UMD —- 我是豆腐不是渣