js的模块化之路

在ES6之前，官方没有出来import export这种模块化的语法。

为了提高代码复用、避免污染全局，民间写了很多模块化的实现：

1. 立即执行函数

(function(globalVariable){
   globalVariable.test = function() {}
   // ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable)

2. AMD和CMD

这个我在很久之前就写过博文：js模块化的两种规范AMD和CMD

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do()
  b.do()
})
// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a')
  a.doSomething()
})

3. CommonJs

这个是NodeJs出的模块化标准，直到现在还是很多人使用。

const mod = require('./mod.js');

module.exports = {mod};
exports.test = 123;

它的原理也很简单，就是每个模块文件都会包一层函数，然后最后加一条return module.exports，require的时候相当于执行这个函数

4. ES6 官方的 import export

这个具体用法我也写过一篇博文：ES6 import、export的写法

import mod from './mod.js'

let haha = '123'
if (mod.a === 1) {
    const name = 'mod2';
    import(`./${name}.js`).then(mod2 => {
　　　　// 拿到 mod2 的东西
　 })
}

export {
    mod,
    haha as default
}

 

这里说一下还在社区比较活跃的CommonJs和ES Module的区别吧

1. CommonJs的require是同步加载的，而 ES Module的 import ‘xxx’ from 可能是异步也可能是同步（推荐阅读：https://segmentfault.com/q/1010000005680390）

2. 都支持动态加载（就是支持在if语句里面加载，加载的目标可以是动态拼接的），CommonJs直接用 require() 同步，ES Module用 import() 异步

3. CommonJs是值拷贝，而 ES Module 是指向同一个内存，对象类型的当然都是一样，共用一块内存，但是普通类型CommonJs是普通的复制，而 ES Module 也是共用内存