JavaScript模块化

一、何为JavaScript模块化

类比为Java的包管理功能。
如下图，org.lin.app.App 唯一定位App类，为了使用java.util.Random类，必须显示使用import语句导入。
遗憾的是，早期的JavaScript没有类似的模块管理功能。

二、node.js与Common JS

node.js将JavaScript作为服务端语言，首次为JavaScript引入了模块管理功能。
node.js模块化的规范被称为Common JS规范。
在node.js中，每个js文件为一个单独的模块，模块内变量私有，导出模块内容使用export语句，导入其他模块使用import语句。
例子：
hello.js:

//hello.js 
function sayHello() { 
    console.log("hello world");
}; 
//导出hello模块
module.exports = {
	//导出sayHello方法
	sayHello : sayHello
}

main.js:

//main.js 
//导入hello模块，实际上返回exports对象
var hello = require('./hello'); 
//调用sayHello方法
hello.sayHello();

参考：http://www.runoob.com/nodejs/nodejs-module-system.html

三、AMD与require.js

Common JS 的 require 同步加载依赖的js文件，在浏览器环境下，由于网络延迟等原因将导致浏览器卡死。

于是，require.js被开发出来，其模块化规范称为AMD(Asynchronous Module Definition），即异步模块加载。

require.js中，模块的导入是异步进行的，依赖所导入模块的代码在回调函数中执行。

AMD规范：

require([module], callback);

require.js：

//导入math模块
require(['math'], function (math) {
	   //math模块导入完成后，回调函数才执行
　　　　math.add(2, 3);

　　});

参考：
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html
http://www.requirejs.cn/

四、ES6模块化

事实上，新一代的JavaScript规范，已经原生提供了模块化的支持。

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
//导出cube方法，导出foo常量
export { cube,foo };

//导入my-module.js模块中的cube和foo
import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

参考：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export