JavaScript模块化开发的演进历程

时间  2019-11-07
标签 javascript 模块化 开发 演进 历程 栏目 JavaScript 繁體版
原文   原文链接

Brendan Eich用了10天就创造了JavaScript，由于当时的需求定位，致使了在设计之初，在语言层就不包含不少高级语言的特性，其中就包括模块这个特性，可是通过了这么多年的发展，现在对JavaScript的需求已经远远超出了Brendan Eich的预期，其中模块化开发更是其中最大的需求之一。javascript

尤为是2009年Node.js出现之后，CommonJS规范的落地极大的推进了整个社区的模块化开发氛围，而且随之出现了AMD、CMD、UMD等等一系列能够在浏览器等终端实现的异步加载的模块化方案。html

此前，虽然本身也一直在推动模块化开发，可是没有深刻了解过模块化演进的历史，直到最近看到了一篇文章《精读JS模块化发展》，文章总结了History of JavaScript这个开源项目中关于JavaScript模块化演进的部分，细读几回以后，对于一些之前模棱两可的东西，顿时清晰了很多，下面就以时间线总结一下本身的理解：前端

在1999年的时候，绝大部分工程师作JS开发的时候就直接将变量定义在全局，作的好一些的或许会作一些文件目录规划，将资源归类整理，这种方式被称为直接定义依赖，举个例子：java

// greeting.js
var helloInLang = {
  en: 'Hello world!',
  es: '¡Hola mundo!',
  ru: 'Привет мир!'
};
function writeHello(lang) {
  document.write(helloInLang[lang]);
}

// third_party_script.js
function writeHello() {
  document.write('The script is broken');
}

// index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Basic example</title>
  <script src="./greeting.js"></script>
  <script src="./third_party_script.js"></script>
</head>
<body onLoad="writeHello('ru')">
</body>
</html>

可是，即便有规范的目录结构，也不能避免由此而产生的大量全局变量，这就致使了一不当心就会有变量冲突的问题，就比如上面这个例子中的writeHello。node

因而在2002年左右，有人提出了命名空间模式的思路，用于解决遍地的全局变量，将须要定义的部分归属到一个对象的属性上，简单修改上面的例子，就能实现这种模式：git

// greeting.js
var app = {};
app.helloInLang = {
  en: 'Hello world!',
  es: '¡Hola mundo!',
  ru: 'Привет мир!'
};
app.writeHello = function (lang) {
  document.write(helloInLang[lang]);
}

// third_party_script.js
function writeHello() {
  document.write('The script is broken');
}

不过这种方式，毫无隐私可言，本质上就是全局对象，谁均可以来访问而且操做，一点都不安全。es6

因此在2003年左右就有人提出利用IIFE结合Closures特性，以此解决私有变量的问题，这种模式被称为闭包模块化模式：github

// greeting.js
var greeting = (function() {
  var module = {};
  var helloInLang = {
    en: 'Hello world!',
    es: '¡Hola mundo!',
    ru: 'Привет мир!',
  };

  module.getHello = function(lang) {
    return helloInLang[lang];
  };

  module.writeHello = function(lang) {
    document.write(module.getHello(lang));
  };

  return module;
})();

IIFE能够造成一个独立的做用域，其中声明的变量，仅在该做用域下，从而达到实现私有变量的目的，就如上面例子中的helloInLang，在该IIFE外是不能直接访问和操做的，能够经过暴露一些方法来访问和操做，好比说上面例子里面的getHello和writeHello2个方法，这就是所谓的Closures。浏览器

同时，不一样模块之间的引用也能够经过参数的形式来传递：安全

// x.js
// @require greeting.js
var x = (function(greeting) {
  var module = {};

  module.writeHello = function(lang) {
    document.write(greeting.getHello(lang));
  };

  return module;
})(greeting);

此外使用IIFE，还有2个好处：

  1. 提升性能：经过IIFE的参数传递经常使用全局对象window、document，在做用域内引用这些全局对象。JavaScript解释器首先在做用域内查找属性，而后一直沿着链向上查找，直到全局范围，所以将全局对象放在IIFE做用域内能够提高js解释器的查找速度和性能；
  2. 压缩空间：经过参数传递全局对象，压缩时能够将这些全局对象匿名为一个更加精简的变量名；

在那个年代，除了这种解决思路之外，还有经过其它语言的协助来完成模块化的解决思路，好比说模版依赖定义、注释依赖定义、外部依赖定义等等，不过不常见，因此就不细说了，究其本源，它们想最终实现的方式都差很少。

不过，这些方案，虽然解决了依赖关系的问题，可是没有解决如何管理这些模块，或者说在使用时清晰描述出依赖关系，这点仍是没有被解决，能够说是少了一个管理者。

没有管理者的时候，在实际项目中，得手动管理第三方的库和项目封装的模块，就像下面这样把全部须要的JS文件一个个按照依赖的顺序加载进来：

<script src="zepto.js"></script>
<script src="jhash.js"></script>
<script src="fastClick.js"></script>
<script src="iScroll.js"></script>
<script src="underscore.js"></script>
<script src="handlebar.js"></script>
<script src="datacenter.js"></script>
<script src="deferred.js"></script>
<script src="util/wxbridge.js"></script>
<script src="util/login.js"></script>
<script src="util/base.js"></script>
<script src="util/city.js"></script>

若是页面中使用的模块数量愈来愈多，恐怕再有经验的工程师也很难维护好它们之间的依赖关系了。

因而如LABjs之类的加载工具就横空出世了，经过使用它的API，动态建立<script>，从而达到控制JS文件加载以及执行顺序的目的，在必定的程度上解决了依赖关系，例如：

$LAB.script("greeting.js").wait()
    .script("x.js")
    .script("y.js").wait()
    .script("run.js");

不过LABjs之类的加载工具是创建在以文件为单位的基础之上的，可是JS中的模块又不必定必须是文件，同一个文件中能够声明多个模块，YUI做为昔日前端领域的佼佼者，很好的糅合了命名空间模式及沙箱模式，下面来一睹它的风采：

// YUI - 编写模块
YUI.add('dom', function(Y) {
  Y.DOM = { ... }
})

// YUI - 使用模块
YUI().use('dom', function(Y) {
  Y.DOM.doSomeThing();
  // use some methods DOM attach to Y
})

// hello.js
YUI.add('hello', function(Y){
    Y.sayHello = function(msg){
        Y.DOM.set(el, 'innerHTML', 'Hello!');
    }
},'3.0.0',{
    requires:['dom']
})

// main.js
YUI().use('hello', function(Y){
    Y.sayHello("hey yui loader");
})

此外，YUI团队还提供的一系列用于JS压缩、混淆、请求合并（合并资源须要server端配合）等性能优化的工具，说其是现有JS模块化的鼻祖一点都不过度。

不过，随着Node.js的到来，CommonJS规范的落地以及各类前端工具、解决方案的出现，很快，YUI3就被湮没在了历史的长流里面，这样成为了JS模块化开发的一个分水岭，引用一段描述：

从 1999 年开始，模块化探索都是基于语言层面的优化，真正的革命从 2009 年 CommonJS 的引入开始，前端开始大量使用预编译。

CommonJS是一套同步的方案，它考虑的是在服务端运行的Node.js，主要是经过require来加载依赖项，经过exports或者module.exports来暴露接口或者数据的方式，想了解更多，能够看一下《CommonJS规范》，下面举个简单的例子：

var math = require('math');
esports.result = math.add(2,3); // 5

因为服务器上经过require加载资源是直接读取文件的，所以中间所需的时间能够忽略不计，可是在浏览器这种须要依赖HTTP获取资源的就不行了，资源的获取所需的时间不肯定，这就致使必须使用异步机制，表明主要有2个：

  • 基于 AMD 的RequireJS
  • 基于 CMD 的SeaJS

它们分别在浏览器实现了define、require及module的核心功能，虽然二者的目标是一致的，可是实现的方式或者说是思路，仍是有些区别的，AMD偏向于依赖前置，CMD偏向于用到时才运行的思路，从而致使了依赖项的加载和运行时间点会不一样，关于这2者的比较，网上有不少了，这里推荐几篇仅供参考：

本人就先接触了SeaJS后转到RequireJS，虽然感受AMD的模式写确实没有CMD这么符合一惯的语义逻辑，可是写了几个模块之后就习惯了，并且社区资源比较丰富的AMD阵营更加符合当时的项目需求（扯多了），下面分别写个例子作下直观的对比：

// CMD
define(function (require) {
    var a = require('./a'); // <- 运行到此处才开始加载并运行模块a
    var b = require('./b'); // <- 运行到此处才开始加载并运行模块b
    // more code ..
})
// AMD
define(
    ['./a', './b'], // <- 前置声明，也就是在主体运行前就已经加载并运行了模块a和模块b
    function (a, b) {
        // more code ..
    }
)

经过例子，你能够看到除了语法上面的区别，这2者主要的差别仍是在于：

什么时候加载和运行依赖项？

这也是CommonJS社区中质疑AMD最主要缘由之一，很多人认为它破坏了规范，反观CMD模式，简单的去除define的外包装，这就是标准的CommonJS实现，因此说CMD是最贴近CommonJS的异步模块化方案，不过孰优孰劣，这里就不扯了，需求决定一切。

此外同一时期还出现了一个UMD的方案，其实它就是AMD与CommonJS的集合体，经过IIFE的前置条件判断，使一个模块既能够在浏览器运行，也能够在Node.JS中运行，举个例子：

// UMD
(function(define) {
    define(function () {
        var helloInLang = {
            en: 'Hello world!',
            es: '¡Hola mundo!',
            ru: 'Привет мир!'
        };

        return {
            sayHello: function (lang) {
                return helloInLang[lang];
            }
        };
    });
}(
    typeof module === 'object' && module.exports && typeof define !== 'function' ?
    function (factory) { module.exports = factory(); } :
    define
));

我的以为最少用到的就是这个UMD模式了。

2015年6月，ECMAScript2015也就是ES6发布了，JavaScript终于在语言标准的层面上，实现了模块功能，使得在编译时就能肯定模块的依赖关系，以及其输入和输出的变量，不像 CommonJS、AMD之类的须要在运行时才能肯定（例如FIS这样的工具只能预处理依赖关系，本质上仍是运行时解析），成为浏览器和服务器通用的模块解决方案。

// lib/greeting.js
const helloInLang = {
    en: 'Hello world!',
    es: '¡Hola mundo!',
    ru: 'Привет мир!'
};

export const getHello = (lang) => (
    helloInLang[lang];
);

export const sayHello = (lang) => {
    console.log(getHello(lang));
};

// hello.js
import { sayHello } from './lib/greeting';

sayHello('ru');

与CommonJS用require()方法加载模块不一样，在ES6中，import命令能够具体指定加载模块中用export命令暴露的接口（不指定具体的接口，默认加载export default），没有指定的是不会加载的，所以会在编译时就完成模块的加载，这种加载方式称为编译时加载或者静态加载。

而CommonJS的require()方法是在运行时才加载的：

// lib/greeting.js
const helloInLang = {
    en: 'Hello world!',
    es: '¡Hola mundo!',
    ru: 'Привет мир!'
};
const getHello = function (lang) {
    return helloInLang[lang];
};

exports.getHello = getHello;
exports.sayHello = function (lang) {
    console.log(getHello(lang))
};

// hello.js
const sayHello = require('./lib/greeting').sayHello;

sayHello('ru');

能够看出，CommonJS中是将整个模块做为一个对象引入，而后再获取这个对象上的某个属性。

所以ES6的编译时加载，在效率上面会提升很多，此外，还会带来一些其它的好处，好比引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

惋惜的是，目前浏览器和Node.js的支持程度都并不理想，截止发稿，也就只有 Chrome61+ 与 Safari10.1+ 才作到了部分支持。

不过能够经过Babel这类工具配合相关的plugin（能够参考《Babel笔记》），转换为ES5的语法，这样就能够在Node.js运行起来了，若是想在浏览器上运行，能够添加Babel配置，为模块文件添上AMD的define函数做为外层，再并配合RequireJS之类的加载器便可。

更多关于ES6 Modules的资料，能够看一下《ECMAScript 6 入门 - Module 的语法》。

参考

本文先发布于个人我的博客《 JavaScript模块化开发的演进历程》，后续若有更新，能够查看原文。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程