JS 模块化的发展史（二）

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

模块化架构的开始

YUI3(模块加载器)

该框架曾经风靡一时，提供了模块的添加和使用两个 api，使模块的相互引用更为灵活，切引入方式也做了优化，可以不按照固定顺序引入脚本标签，加载和执行也是解耦的。

模块的添加与使用

// 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");
})

add 方法定义模块，use 方法引入模块，职责分离，条例清晰。

脚本标签的优化

//曾经的导入方式
script(src="/path/to/yui-min.js")       // YUI seed
script(src="/path/to/my/module1.js")    // add('module1')
script(src="/path/to/my/module2.js")    // add('module2')
script(src="/path/to/my/module3.js")    // add('module3')
//如今的导入方式
YUI().use('module1', 'module2', 'module3', function(Y) {
    // you can use all this module now
});

不需要固定顺序，加载和执行相分离。

HTTP 请求过多

当引入的文件过多时会出现这个问题，对于这个问题，当时的解决方案是采用服务器请求的方式，在单个请求中请求过个文件，示例如下

//普通过多的HTTP请求
script(src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js")
script(src="http://yui.yahooapis.com/3.0.0/build/dom/dom-min.js")

//合并过后的请求
script(src="http://yui.yahooapis.com/combo?
    3.0.0/build/yui/yui-min.js&
    3.0.0/build/dom/dom-min.js")

模块化的崛起

CommonJS

CommonJS 是一个模块规范，其目标是为 JavaScript 在 网页浏览器 之外创建 模块 约定(主要就是 node.js )。创建这个项目的主要原因是当时缺乏普遍可接受形式的JavaScript脚本模块单元，模块在与运行JavaScript脚本的常规网页浏览器所提供的不同的环境下可以重复使用。

在该项目的定义下：每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

模块的定义与引用

在 CommonJS 规范中 module.exports 方法用于导出模块，require 方法用于加载模块

// example.js
var x = 5;
var addX = function (value) {
  return value + x;
};

//require.js
var example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6

1. 加载某个模块，其实是加载该模块的module.exports属性。
2. 所有代码都运行在模块作用域，不会污染全局作用域。

3. 模块可以多次加载，但只会在第一次加载的时候运行一次，然后运行的结果就被缓存了，以后再加载，就会直接读取缓存的结果，要想要模块再次运行，要清除缓存。
4. 模块的加载顺序按照代码中的引入顺序。

扩展

更多的CommonJS相关的问题可以查看此篇文章《CommonJS是什么？》