模块化

在有 Babel 的情况下，我们可以直接使用 ES6 的模块化

  1. // file a.js
  2. export function a() {}
  3. export function b() {}
  4. // file b.js
  5. export default function() {}
  7. import {a, b} from './a.js'
  8. import XXX from './b.js'

CommonJS

CommonJs 是 Node 独有的规范，浏览器中使用就需要用到 Browserify 解析了。

  1. // a.js
  2. module.exports = {
  3.     a: 1
  4. }
  5. // or
  6. exports.a = 1
  8. // b.js
  9. var module = require('./a.js')
  10. module.a // -> log 1

在上述代码中，module.exports 和 exports 很容易混淆，让我们来看看大致内部实现

  1. var module = require('./a.js')
  2. module.a
  3. // 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
  4. // 重要的是 module 这里，module 是 Node 独有的一个变量
  5. module.exports = {
  6.     a: 1
  7. }
  8. // 基本实现
  9. var module = {
  10.   exports: {} // exports 就是个空对象
  11. }
  12. // 这个是为什么 exports 和 module.exports 用法相似的原因
  13. var exports = module.exports
  14. var load = function (module) {
  15.     // 导出的东西
  16.     var a = 1
  17.     module.exports = a
  18.     return module.exports
  19. };

再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。

对于 CommonJS 和 ES6 中的模块化的两者区别是：

  • 前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案

  • 前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响

  • 前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化

  • 后者会编译成 require/exports 来执行的

AMD

AMD 是由 RequireJS 提出的

  1. // AMD
  2. define(['./a', './b'], function(a, b) {
  3.     a.do()
  4.     b.do()
  5. })
  6. define(function(require, exports, module) {   
  7.     var a = require('./a')  
  8.     a.doSomething()   
  9.     var b = require('./b')
  10.     b.doSomething()
  11. })