CommonJS + AMD + CMD + ES6 模块分析

ES6模块

加载：import

导出模块：export

ES6模块的特点如下：

• 编译时加载模块即静态加载，因为加载的是模块的部分接口（代码）。编译时执行模块。
• 同步加载模块。import()实现异步加载模块。
• 规范未完全统一，引擎不完全支持，服务端使用后使用babel将ES6转换成ES5，将import转为require。

示例：

// a.js  导出接口
var fun = function() {}

var b = 'xxx';

var c = 100;

export { fun as default, a, b, c };

// b.js  导入接口
import { default as alias, a as a_a, b, c } from './a';

CommonJS模块

加载：require

导出模板：module.exports(require的就是module.exports属性对应的值)、exports(指向module.exports)

CommonJS模块的特点如下：

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。
• 模块都是同步加载同步执行的。
• 运行时加载（整个模块），运行时执行。
• NodeJS实现了CommonJS规范。浏览器端和服务端都可以用，更推荐服务端用。

示例：

// common.js

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports = {
    x,
    addX
};

var example = require('./common.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

AMD&CMD模块

加载：require

导出模块：module.exports

AMD&CMD模块的特点如下：

• 所有代码都运行在模块作用域(define闭包)，不会污染全局作用域。-- 同CommonJS
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。-- 同CommonJS
• 模块加载的顺序，按照其在代码中出现的顺序。
• 模块都是异步加载的。
• 编译时加载，
• 浏览器端推荐用。

示例：

// ----------- AMD or CMD 定义模块 ----------------
define(function(require, exports, module){
  module.exports = {
    a : function() {},
    b : 'xxx'
  };
});

// ------------ AMD 加载模块 -------------
define(['./a.js'], function(am){
   am.a();
});

 
// ------------ AMD or CMD 加载模块 ------------- 

define(function(require, exports, module){
   var m = require('./a');
   m.a();
});

该用require还是import？

不同点

1、使用场景不同

require：CommonJS/AMD/CMD

import：ES6

2、含义不同

require相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……再把require的结果赋值给某个变量，相当于把require和module.exports进行平行空间的位置重叠。且输入是输出值的拷贝，模块内部变化影响不到外部引用。

import是解构赋值，可以导入模块的部分接口。且输入是输出值的引用，模块内部变化会影响到外部应用（也会随之变化）。

3、使用方式不同

require是运行时执行，理论上可以运用在代码的任何地方，甚至不需要赋值给某个变量之后再使用。

import则不同，它是编译时的（require是运行时的），它必须放在文件模块顶层，而且使用格式也是确定的，不容置疑。它不会将整个模块运行后赋值给某个变量，而是只选择import的接口进行编译，这样在性能上比require好很多。

资料

CommonJS 模块

AMD&CMD差异-玉伯

ES6 Module 模块

require和import