javascript模块化比较

当前有以下几种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的发展趋势
• 静态分析比较容易

缺点

• 浏览器原生支持尚需时日
• 模块还比较少