JavaScript 模块化简析

时间 2020-08-04

原文原文链接

前言

关于模块化，最直接的表现就是咱们写的 require 和 import 关键字，若是查阅相关资料，就必定会遇到 CommonJS 、CMD AMD 这些名词，以及 RequireJS、SeaJS 等陌生框架。好比 SeaJS 的官网这样描述本身: “简单友好的模块定义规范，Sea.js 遵循 CMD 规范。天然直观的代码组织方式，依赖的自动加载……”javascript

做为前端新手，我表示实在是一脸懵逼，理解不能。按照我一向的风格，介绍一个东西以前总得解释一下为何须要这个东西。php

JavaScript 基础

作客户端的同窗对 OC 的 #import "classname"、Swift 的 Module 以及文件修饰符和 Java 的 import package+class 模式应该都不陌生。咱们习惯了引用一个文件就是引用一个类的模式。然而在 JavaScript 这种动态语言中，事情又有一些变化，举个例子说明:html

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body></html>

// index.jsfunction onPress() {    var p = document.getElementById('hello');
    p.innerHTML = 'Hello bestswifter';
}

HTML 中的 <script> 标签能够理解为 import，这样按钮的 onclick 事件就能够调用定义在 index.js 中的 onPress 函数了。前端

假设随着项目的发展，咱们发现点击后的文字须要动态生成，而且由别的 JS 文件生成，那么简单的 index.js 就没法胜任了。咱们假设生成的内容定义在 math.js 文件中:java

// math.jsfunction add(a, b) {    return a + b;
}

按照客户端的思惟，此时的 index.js 文件应该这样写:node

// index.jsimport "math.js"function onPress() {    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}

很不幸，JavaScript 并不支持 import 这种写法，也就是说在一个 JS 文件中根本没法引用别的 JS 文件中的方法。正确的解决方案是在 index.js 中直接调用 add 方法，同时在 index.html 中引用 math.js:web

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="math.js"></script>
  </head>
  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body></html>

// index.jsfunction onPress() {    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}

能够看到这种写法并不优雅， index.js 对别的 JS 文件中的内容并无控制权，可否调用到 add 方法彻底取决于使用本身的 HTML 文件有没有正确引用别的 JS 文件。编程

初步模块化

刚刚所说的痛点其实能够分为两种:swift

index.js 没法 import，依赖于 HTML 的引用segmentfault
index.js 中没法对 add 方法的来源作区分，缺乏命名空间的概念

第一个问题留在后面解答，咱们先着手解决第二个问题，好比先把函数放到一个对象中，这样咱们能够暴露一个对象，让使用者调用这个对象的多个方法:

//index.js function onPress() {    var p = document.getElementById('hello');
    p.innerHTML = math.add(1, 2);
}//math.jsvar math = {
    base: 0,
    add: function(a, b) {        return a + b + base;
    },
};

能够看到在 index.js 中已经能够指定一个简易版的命名空间了(也就是 math)。但目前还有一个小问题，好比 base 这个属性会被暴露给外界，也能够被修改。因此更好的方式是将 math 定义在一个闭包里，从而隐藏内部属性:

// math.jsvar math = (function() {    var base = 0;    return {
        add: function(a, b) {            return a + b + base;
        },
    };
})();

到目前为止，咱们实现了模块的定义和使用。不过模块化的一大精髓在于命名空间，也就是说咱们但愿本身的 math 模块不是全局的，而是按需导入，这样一来，即便多个文件暴露同名对象也不会出问题。就像 node.js 中那样，须要暴露的模块定义本身的 export 内容，而后调用方使用 require 方法。

其实能够简单模拟一下 node.js 的工做方式，经过增长一个中间层来解决: 首先定义一个全局变量:

// global.jsvar module = {    exports: {}, // 用来存储全部暴露的内容};

而后在 math.js 中暴露对象:

var math = (function() {    var base = 0;    return {
        add: function(a, b) {            return a + b + base;
        },
    };
})();module.exports.math = math;

使用者 index.js 如今应该是:

var math = module.exports.math;function onPress() {    var p = document.getElementById('hello');    // math
    p.innerHTML = math.add(1, 2);
}

现有模块化方案

上述简单的模块化方式有一些小问题。首先，index.js 必须严格依赖于 math.js 执行，由于只有 math.js 执行完才会向全局的 module.export 中注册本身。这就要求开发者必须手动管理 js 文件的加载顺序。随着项目愈来愈大，依赖的维护会变得愈来愈复杂。

其次，因为加载 JS 文件时，浏览器会中止渲染网页，所以咱们还须要 JS 文件的异步按需加载。

最后一个问题是，以前给出的简化版模块化方案并无解决模块的命名空间，相同的导出依旧会替换掉以前的内容，而解决方案则是维护一个 “文件路径 <–> 导出内容” 的表，而且根据文件路径加载。

基于上述需求，市场上出现了不少套模块化方案。为啥会有多套标准呢，实际上仍是由前端的特性致使的。因为缺少一个统一的标准，因此不少状况下你们作事的时候都是靠约定，就好比上述的 export 和 require。若是代码的提供者把导出内容存储在 module.exports里，而使用者读取的是 module.export，那天然是徒劳的。不只如此，各个规范的实现方式、使用场景也不尽相同。

CommonJS

比较知名的规范有 CommonJS、AMD 和 CMD。而知名框架 Node.js、RequireJS 和 Seajs 分别实现了上述规范。

最先的规范是 CommonJS，Node.js 使用了这一规范。这一规范和咱们以前的作法比较相似，是同步加载 JS 脚本。这么作在服务端毫无问题，由于文件都存在磁盘上，然而浏览器的特性决定了 JS 脚本须要异步加载，不然就会失去响应，所以 CommonJS 规范没法直接在浏览器中使用。

AMD

浏览器端著名的模块管理工具 Require.js 的作法是异步加载，经过 Webworker 的 importScripts(url); 函数加载 JS 脚本，而后执行当初注册的回调。Require.js 的写法是:

require(['myModule1', 'myModule2'], function (m1, m2){    // 主回调逻辑
    m1.printName();
    m2.printName();
});

因为这两个模块是异步下载，所以哪一个模块先被下载、执行并不肯定，但能够确定的是主回调必定在全部依赖都被加载完成后才执行。

Require.js 的这种写法也被称为前置加载，在写主逻辑以前必须指定全部的依赖，同时这些依赖也会马上被异步加载。

由 Require.js 引伸出来的规范被称为 AMD(Asynchronous Module Definition)。

CMD

另外一种优秀的模块管理工具是 Sea.js，它的写法是:

define(function(require, exports, module) {    var foo = require('foo'); // 同步
    foo.add(1, 2); 
    ...    require.async('math', function(math) { // 异步
        math.add(1, 2);
    });
});

Sea.js 也被称为就近加载，从它的写法上能够很明显的看到和 Require.js 的不一样。咱们能够在须要用到依赖的时候才申明。

Sea.js 遇到依赖后只会去下载 JS 文件，并不会执行，而是等到全部被依赖的 JS 脚本都下载完之后，才从头开始执行主逻辑。所以被依赖模块的执行顺序和书写顺序彻底一致。

由 Sea.js 引伸出来的规范被称为 CMD(Common Module Definition)。

ES 6 模块化

在 ES6 中，咱们使用 export 关键字来导出模块，使用 import 关键字引用模块。须要说明的是，ES 6 的这套标准和目前的标准没有直接关系，目前也不多有 JS 引擎能直接支持。所以 Babel 的作法其实是将不被支持的 import 翻译成目前已被支持的 require。

尽管目前使用 import 和 require 的区别不大(本质上是一回事)，但依然强烈推荐使用 import 关键字，由于一旦 JS 引擎可以解析 ES 6 的 import 关键字，整个实现方式就会和目前发生比较大的变化。若是目前就开始使用 import 关键字，未来代码的改动会很是小。

参考

以上内容大部分都不是个人思考结果，我只是对已有的文章作了一下实际操做和概括总结，感谢各位前辈的优秀文章: