js模块化

cjs(CommonJS)

CommonJS规范加载模块是同步的

// module变量代表当前模块，是一个对象，它的exports属性是对外的接口，其他文件加载该模块，实际上就是读取module.exports变量
module.exports.a = 1;
module.exports.b = function(){
    console.log('b')
}
console.log(module)

// 为了方便，Node提供 exports = module.exports
// exports只能用'.'运算符加属性，不能直接赋值，直接赋值便 != module.exports，无法再导出
exports = function(x) {console.log(x)};
// 下面module.exports直接赋值会覆盖前面的exports
exports.hello = function() {
  return 'hello';
};
module.exports = 'Hello world';

// require方法用于加载模块，加载会运行代码，可以多次加载，但是只会在第一次加载时运行一次
var example = require('./example.js');

AMD(Asynchronous Module Definition)

异步模块定义：主要用于浏览器，由于该规范不是原生js支持的，使用AMD规范进行开发的时候需要引入第三方的库函数RequireJS

// 定义模块
define([id], [dependencies], factory)
// 异步方式加载模块，加载完成之后运行回调函数。
require([module], callback);

参考¹

CMD(Common Module Definition)

module单例懒加载

define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});
define(function(require, exports, module) {
  // 异步加载多个模块，在加载完成时，执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });
});
define({
    foo: "bar"
});
define('foo bar');

参考²

seajs³

UMD(Universal Module Definition)

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是commonjs模块规范，nodejs环境')
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        console.log('是AMD模块规范，如require.js')
        define(factory)
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是CMD模块规范，如sea.js')
        define(function(require, exports, module) {
            module.exports = factory()
        })
    } else {
        console.log('没有模块环境，直接挂载在全局对象上')
        root.umdModule = factory();
    }
}(this, function() {
    return {
        name: '我是一个umd模块'
    }
}))

seajs⁴

ES6

import

// 变量提升
foo();
import { foo } from 'my_module';
// 报错，import在编译阶段执行，在运行时才能得到结果的表达式、变量这些语法结构不能使用
import { 'f' + 'oo' } from 'my_module';
// import语句会执行所加载的模块，因此可以仅仅执行模块，但是不输入任何值
import 'lodash';
// 多次重复执行同一句import语句，只会执行一次，而不会执行多次。
import 'lodash';

export

// export 输出具名函数或变量
export function a (){};
export let a = 12;
// export default可以输出匿名函数或值，export default命令的本质：default = 后面的值
export default function a2(){};
export default function(){}
export default 12
// export default就是输出一个叫做default的变量或方法，可以这样写
export {add as default};

export 与 import 的复合写法

export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

import 语句可以引用 ES 模块或 CommonJS 模块
CommonJS 模块 require 总是将它引用的文件视为 CommonJS。不支持使用 require 加载 ES 模块，因为 ES 模块具有异步执行

参考⁵

---

1. https://www.jianshu.com/p/a882db309f17 ↩︎

2. https://github.com/cmdjs/specification/blob/master/draft/module.md ↩︎

3. https://github.com/seajs/seajs/issues/242 ↩︎

4. https://www.cnblogs.com/wenbinjiang/p/11429368.html ↩︎

5. https://es6.ruanyifeng.com/#docs/module#import-%E5%91%BD%E4%BB%A4 ↩︎