js模块化演进及原理浅析

转发自：https://github.com/bigo-frontend/blog/

模块化解决了什么问题

我们仔细想一下，Javascript编程其实很多时候就是管理变量以及变量赋值这件事，比如把一个value赋值给一个变量，给一个变量加上一个value，或者把两个变量相加的结果赋值给另外一个变量，怎样去管理这些变量对日后如何维护这些代码就显得至关重要。

在开发中如果我们一次仅需要考虑几个变量，那么工作就会变得很简单。幸运的是，JavsScript有个作用域链来帮助我们解决变量过多的问题，因为作用域链的存在，在一个函数的内部无法访问另外一个函数内部的变量，这样就使得我们在编程的时候只需要关注自己函数内部的那几个变量就可以了，不需要过分去担心其他函数的影响，头发也可以少掉几根。

但是，很多时候我们不得不跟其他函数共享状态，这时候我们会将这些变量存储在全局（window/global）上，项目小的时候当然问题不大，但是当项目一大，变量一多，通过script引入代码的加载顺序等等问题就开始让后期维护变得很蛋疼，因此人们开始思考如何在没有模块的语言上去实现模块这一件事情。。。

原始时期

直接定义依赖

function a() {}
function b() {}

在原始时期，“模块化”也就是直接定义函数，共享变量，这种做法最明显的缺点就是污染了全局变量，变量的重名会导致后面覆盖前面，并且各个模块成员之间看不出有什么直接的关系。

闭包模块化

var modules = (fuction(my, $) {
    function privateMethod() {
        // ...
    }

    my.moduleProperty = 1;
    my.moduleMethod = function () {
        //$()....
        //privateMethod()...
        // ...
    };

    return my;
}(widnow.modules || {}, jQuery))

通过立即执行函数（IIFE），外部函数无法调用到里面的privateMethod，解决了全局变量污染的问题。同时这种模式还可以将一个模块拆分，在闭包内可以调用或继承其他子模块、添加新的方法，新的变量，返回新的模块。但是同时缺点也很明显：

  • 为了在模块内部调用其他全局变量，必须显示注入全局变量，比如上面注入了jQuery
  • 跨文件使用模块时，需要将模块挂载到全局变量上（window）上
  • 没有解决如何管理这些模块的问题，各个模块之间的依赖关系需要通过script的引入顺序来保证

CommonJS

概述

从1999年开始，js模块化的探索都是基于语言层面上的优化，真正的改变要从2009年CommonJS的引入开始，Node采用CommonJS模块规范，每个文件就是一个模块，有自己的作用域，在一个文件里面定义的变量、函数、类都是私有了。

// package/lib is a dependency we require
const lib = require('package/lib');

// some behaviour for our module
function foo(){
    lib.log('hello world!');
}

// export (expose) foo to other modules
exports.foo = foo;

规范

  • module模块本身，是Module的一个实例
  • exports指向module.exports，可以通过exports向module.exports对象中添加变量
  • require用于加载模块（核心）

特点

  • 所有模块都运行在模块作用域，不会污染全局作用域
  • 模块加载的顺序，按照代码中出现的顺序执行（也就是同步）
  • 模块输入的值是复制（基础类型为复制，引用类型为值引用），第一次加载结果就被缓存了，之后再加载就直接读取缓存中的结果，如果要让模块再次运行，需要清除缓存。或者直接导出函数，每次调用函数重新计算。

实现

由于篇幅有限，这里不讨论require的加载选择路径优先级的判断，也不讨论模块缓存的过程，并假定加载的文件都是js文件，主要实现代码如下源代码

function Module(id, parent) {
    this.id = id;                         
    this.expotrs = {};
    this.parent = parent;
    if (parent && parent.children) {
      parent.children.push(this);
    }
    this.fileanme = null;
    this.loaded = false;
    this.children = [];
}
// 这里的module是全局变量
module.exports = Module;

// 通过一个path加载模块，并返回exports属性
Module.prototype.require = function(path) {
    return Module._load(path, this);
}

Module._load = function(path, parent) {
    const filename = path;
    var module = new Module(filename, parent);
    // 加载模块
    module.load(filename);

    // 输出模块的exports属性
    return module.exports;
}

Module.prototype.load = function(filename) {
    // 通过磁盘中读取文件
    var content = fs.readFileSync(filename, 'utf8');
    module._compile(content, filename);
    this.loaded = true;
}

// 模块编译
Module.prototype._compile = function(content, filename) {
  const self = this;
  const args = [self.exports, require, self, filename, dirname];
  // 在沙箱中执行代码
  return compiledWrapper.apply(self.exports, args);
}

从代码中可以看出，模块加载实质上就是注入了exports，require，module三个全局变量，然后执行模块的源码，最后将模块的exports的变量输入

(function (exports, require, module, __filename, __dirname) {
  // 模块源码
});

不足

  • 缺少模块封装的能力，CommonJS规范中每个模块都是一个文件，这意味着每个文件只有一个模块。这在服务器上是可行的，但是在浏览器中就不是很友好，浏览器中需要做到尽可能少的发起请求。
  • 使用同步的方式加载依赖，在浏览器中由于JS的加载会阻塞渲染，同步加载会导致长时间的白屏，对于用户体验是致命的。
  • CommonJS规范中使用了export的对象来暴露模块，可以讲需要导出的变量附加到export上，但是要导出一个函数确是能使用module.export，这种语法容易让人感到困惑。

AMD

概述

AMD，全称是Asynchronous Module Definition，即异步模块加载机制，它采用异步方式加载模块，模块的加载不影响后面语句的运行，AMD规范定义了一个define全局方法用来定义和加载模块

define(id?, dependencies?, factory);
  • id: 模块标识，可以省略
  • dependences：所依赖的模块数组，可以省略
  • factory：模块的实现，或者一个对象

AMD也使用了使用require全局方法来加载模块，但不同于CommonJS，它要求两个参数，dependences是需要前置的依赖，只有所有前置依赖都加载完了才会触发回调函数，dependences的加载是通过动态创建sciprt和事件监听的方式来异步加载模块，解决了CommonJS同步加载的问题。

require([dependence], callback);

RequireJS使用

RequireJS 是 AMD 规范的代表之作，基本使用方式如下

define(['./a','./b'], function (moduleA, moduleB) {
  // 依赖前置
  moduleA.mehodA();
  console.log(moduleB.dataB);
  // 导出数据
  return {};
});

RequireJS的实现

这里同样不讨论RequireJS的模块信息配置，缓存的过程，也不考虑各种链接补全的情况，只是简单实现模块的加载调用，以及所有依赖加载完毕触发callback回调的过程

依赖的定义

// 缓存定义的模块
const defMap = {}
define = (name, deps, callback) => {
    defMap[name] = { name, deps, callback }
}

依赖模块加载与调用

模块加载的时候会首先通过Modules构造函数创建一个模块实例，然后调用初始化init的方法传入需要加载的依赖跟回调函数

// 全局require方法
req = require = (name, deps, callback) => {
    const mod = new Module(name)
    mod.init(deps, callback)
}

// 模块加载构造函数
class Modules {
    constructor(name) {
        this.name = name
        this.depCount = 0
        this.deps = []
        this.depExports = []
        this.callback = null
        this.defineFn = () => {}
    }
    init(deps, callback) {
        this.deps = deps
        this.callback = callback
        // 判断是否有依赖，有依赖先加载依赖
        if (deps.length === 0) {
            this.check()
        } else {
            this.enable()
        }
    }
}

其中enable函数用来遍历依赖，并绑定回调函数definedFn

class Module {
    ...
    // 加载依赖
    enabne() {
        this.deps.forEach((name, i) => {
            // 记录加载的模块数
            this.depCount++

            // 实例化依赖模块，绑定回调
            const mod = new Module(name)
            mod.definedFn = exports => {
                this.depCount--
                // 返回的代码，将模块代码存储起来，全部加载完毕后当作变量传递给父模块调用
                this.depExports[i] = exports
                // 每次返回一个回调都check一下是否所有依赖都加载完了
                this.check()
            }

            // 通过script加载模块
            loadModule(name)
        })
    }
}

loadModule是源码的核心，通过动态创建scirpt异步加载依赖，加载完之后再循环加载子模块的依赖，直到全部依赖都加载完毕。

const loadModule = (name, url) => {
   const head = document.getElementsByTagName('head')[0]
   const node = document.createElement('script')
   node.type = 'text/javascript'
   node.async = true
   // 设置一个 data 属性，便于依赖加载完毕后拿到模块名 
   node.setAttribute('data-module', name)
   node.addEventListener('load', onScriptLoad, false)
   node.src = url
   head.appendChild(node)
   return node
}

// 节点绑定的onload事件函数
const onScriptLoad = evt => {
    const node = evt.currentTarget
    node.removeEventListener('load', onScriptLoad, false)
    // 获取模块名
    const name = node.getAttribute('data-module')
    // 实例化子模块
    const mod = new Module(name)
    // 从全局变量defMap中获取模块的依赖和回调
    const def = defMap[name]
    // 循环加载子模块的依赖
    mod.init(def.deps, def.callback)
}

check函数检查依赖是否全部加载完毕了，加载完毕之后执行回调函数。

class Module {
    ...
    // 检查依赖是否加载完毕
    check() {
        // 依赖数小于1，表示依赖全部加载完
        if (this.depCount < 1) {
            // 触发回调函数，并获取该模块的内容
            this.exports = this.callback.apply(null, this.depExports)
            // 激活defined回调，表示当前模块加载完成
            this.definedFn(exports)
        }
    }
}

可以看出，RequireJS最核心的原理就是通过动态加载script并且监听load事件的方式来实现异步加载模块

CMD

概述

相对于AMD的异步加载，CMD更倾向于懒加载，而且CMD的写法跟CommonJS极为相近，只需要在CommonJS外增加一个函数调用即可，如下

// CMD
define(function(require, exports, module) {
    const $ = require('Jquery')
    $('id')
})

AMD规范的代表作品sea.js在模块加载方式上与RequireJS的原理一致，都是通过动态加载script并且监听load事件的方式来实现异步加载模块，跟RequireJS的主要区别在与依赖声明跟加载的时机，其中RequireJS在声明的时候先优先加载了。sea.js则使用懒加载，按需加载的方式，只有在require的地方，才会真正加载运行该模块。

sea.js实现原理

sea.js看起来像是很神奇，JS不是异步的吗？但怎么sea.js调用模块看起来像是同步的？原理这里采用了知乎的一段回答卢勃

  1. 通过回调函数的Function.toString函数，使用正则表达式（后面改成了状态机进行词法分析的方式）来捕捉内部的require字段，找到require('jquery')内部依赖的模块jquery
  2. 根据配置文件，找到jquery的js文件的实际路径
  3. 在dom中插入script标签，载入模块指定的js，绑定加载完成的事件，使得加载完成后将js文件绑定到require模块指定的id（这里就是jquery这个字符串）上
  4. 回调函数内部依赖的js全部加载（暂不调用）完后，调用回调函数
  5. 当回调函数调用require('jquery')，即执行绑定在'jquery'这个id上的js文件，即刻执行，并将返回值传给$

UMD

UMD（Universal Module Definnition）通用模块定义模式，主要用来解决CommonJS模式和AMD模式代码不能在服务端跟Web端通用的问题，并同时还支持老式的全局变量规范。

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 
    typeof define === 'function' && define.amd ? define(factory) :
    (global = global || self, global.myBundle = factory());
}(this, (function () { 
    const main = () => {
        return 'hello world';
    };

    return main;
})))

上面代码做了3个判断

  1. 判断module是否为一个对象，并且是否存在module.exports来判断是否为CommonJS规范
  2. 判断define是否为函数，并且是否存在define.amd，来判断是否为AMD规范
  3. 如果以上两种都没有，则为原始的代码规范

ES Modules

概述跟语法

相对于CommonJS和AMD两种比较流行的社区模块加载方案，前者主要用于服务器层面，后者主要用于浏览器层面，ES 2015终于在语言标准层面上，实现了模块功能，而且语法更加简洁，更加人性化。

模块导出只有一个关键字export，可以直接导出变量，函数，或者通过大括号直接输出一组变量，更有独特的default可以用来直接导出默认值。

// moduleA
// 直接导出某个变量跟函数
export const name = 'chen'
export function getName() {
    return 'chen'
}

// 可以通过大括号输出一组变量
const anotherName = 'nomad'
const function getAnotherName() {
    return 'nomad'
}
export { anotherName, getAnotherName }

// 也可以直接导出默认值
export default anotherName

模块导入可以通过import命令加载其他JS文件中export的变量，同样可以同时导入其他文件中的默认值default（如果存在）跟其他变量

import defaultName, { name, getName, anotherName, getAnotherName } from './moduleA'

具体语法包括导入变量的改名，导入并同时导出的复合写法等就不再赘述，具体可以查看网上的教程。

CommonJS跟ES Modules的差异

CommonJS模块的require是同步加载模块，而ESM 会对静态代码分析，即在代码编译时进行模块的加载，在运行时之前就已经确定了依赖关系（可解决循环引用的问题，后面原理部分有解释）

CommonJS模块输入的是值拷贝（基础类型为复制，引用类型为值引用）

// CommonJS
// ModuleA
const obj = {
  a: 1
}
let b = 1
setTimeout(() => {
  obj.a++
  b++
});
exports.obj = obj;
exports.b = b;

// ModuleB
const { obj, b } = require('./moduleA');
console.log(`a: ${obj.a}`);
console.log(`b: ${b}`);
setTimeout(() => {
  console.log(`a: ${obj.a}`);
  console.log(`b: ${b}`);
}, 100);

// result
// a: 1
// b: 1
// a: 2
// b: 1

ESM模块是动态引用，变量不会被缓存，而是成为一个指向加载模块的引用，只有真正取值的时候才会进行计算取值

// ESM
// moduleA
const obj = {
  a: 1
}
let b = 1
setTimeout(() => {
  obj.a++
  b++
});
export { obj, b }

// moduleB
import { obj, b } from './moduleA.mjs';
console.log(`a: ${obj.a}`);
console.log(`b: ${b}`);
setTimeout(() => {
  console.log(`a: ${obj.a}`);
  console.log(`b: ${b}`);
}, 100);

// result
// a: 1
// b: 1
// a: 2
// b: 2

ESM加载的过程

  1. 构造（Construction）：找到文件下载，并解析成模块记录（module record）
  2. 实例化（Instantiation）：把所有export的变量放入到内存中（暂时不求值），然后把相关export跟import都指向同一个内存区域
  3. 求值（Evaluation）：运行代码，把得到值放到指向的内存区域

构造（Construction）

从入口文件开始，并通过代码解析（module specifiers）找到入口文件所依赖的模块，一步一步找到其他模块，并将所有模块解析成模块记录（module record），并缓存到module map中，遇到不同文件获取相同依赖，都会直接在module map缓存中获取，注意这里并不是要把所有模块的依赖关系全部解析完再开始下一步，因为浏览器一次性下载这么多文件会跟CommonJS一样阻塞主线程。所以这也就是为什么ESM spec要把3个加载过程区分开执行的原因。

image

实例化（Instantiation）

实例化的过程就是将代码导出的变量一一指向内存。JS引擎通过优先深度后序遍历遍历整个模块关系图，即从依赖关系的最后一个模块（没有引入其他模块）开始实例化，并将所有模块导出的变量绑定在内存上，然后再将所有模块导入变量绑定到与导出变量同一个内存区域。所以一旦导出值发生变化，导入值也会变化。这也是ESM导出的是值引用的原理。同样也解决了循环调用的问题，为什么CommonJS无法解决循环调用的详细解释请查看图解ES Modules

image

求值（Evaluation）

求值步骤相对简单，只要运行代码把计算出来的值填入之前记录的内存地址就可以了，这里就不展开说明了。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349

推荐阅读更多精彩内容