javascript模块化比较

当前有以下几种JavaScript模块化开发方式：

• 不同模块接口导出通过修改全局变量。例如添加到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的发展趋势
  • 静态分析比较容易

  缺点

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