3.13JavaScript模块之CommonJS、AMD、UMD、ES6 Module

1.CommonJS

CommonJS以服务器为目标环境，能够一次性把所有模块加载到内存。

• 导入：require(‘路径’)
• 导出：module.exports和exports

//hello.js模块
'use strict';

var s = 'Hello';

function greet(name) {
    console.log(s + ', ' + name + '!');
}

module.exports = greet;

'use strict';

// 引入hello模块:
var greet = require('./hello');

var s = 'Michael';

greet(s); // Hello, Michael!

module.exports = variable;

输出的变量可以是任意对象、函数、数组等等。

2.AMD(Asynchronous Module Definition)

AMD(异步模块定义)以浏览器为目标执行环境，这需要考虑网络延时的问题。

• 导入：require([‘模块名称’], function (‘模块变量引用’){// 代码});
• 导出：define(function (){return ‘值’);

define('moduleA',['moduleB'],function(moduleB) {
  return {
    stuff: module.doStuff();
  };
});

3.UMD(Universal Module Definition)

UMD(统一模块定义)是为了统一CommonJS和AMD生态系统而生。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        //浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

4.ES6 Module

ES6 Module是ECMA-262引入的模块规范，可运用于浏览器或服务器环境。每个模块只能有一个模块导出。

• 导入：import {模块名A，模块名B…} from ‘模块路径’
• 导出：export(命名导出)和export default(默认导出)

import { foo } from './fooModule.js';

//命名导出多行形式
const foo = 'foo';
export { foo };
//命名导出单行形式
export const foo = ‘foo’；
//命名导出别名
const foo = 'foo';
export { foo as myFoo };

//默认导出多行形式
const foo = 'foo';
export default foo;
//默认导出单行形式
export default 'foo';
//以上两种默认导出等同于下面
export { foo as default };