当前有以下几种JavaScript模块化开发方式：
- <script>标签
- CommonJS
- AMD and 其他
- ES6 modules
- ...
<script>标签
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
不同模块接口导出通过修改全局变量。例如添加到window变量上。
这种方式的缺点：
- 全局变量冲突
- 依赖文件按序加载
- 开发者需要关心不同模块之间的依赖关系
- 项目较大时，管理很困难
CommonJs:同步加载require
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
该方式：定义一个同步require方法，加载依赖，同时返回需要导出接口。
eg. node.js
优点
- 服务端模块可以复用
- 已经有很多npm包
- 使用很简单
缺点
- 不太适用于浏览器端：由于模块都放在服务器端，对于浏览器，必须等待依赖模块加载完成，才能执行后续代码。等待时间取决于网速的快慢，可能要等很长时间，浏览器处于“假死”状态。
AMD:异步加载require
require(["module", "../file"], function(module, file) { /* ... */ });
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
优点
- 适用于浏览器端
- 多模块并行加载
缺点
- 有一定的编码开销
- 可读性较差，写起来也麻烦
ES6模块
import "jquery";
export function doStuff() {}
module "localModule" {}
优点
- 未来ES的发展趋势
- 静态分析比较容易
缺点
- 浏览器原生支持尚需时日
- 模块还比较少
