前端模块化知识梳理

来源 | https://www.fly63.com/
一、背景

作为前端开发，模块化我们已经耳熟能详，我们平时接触到的 ES6 的 import，nodejs中的require他们有啥区别？
我们也听过CommonJS、CMD、AMD、ES6模块系统，这些都有什么联系呢？
本文将对这些问题进行归纳总结，可以对模块化有个清晰的认识。
二、为何需要模块化？

1. 起源

最开始 js 是没有模块化的概念的，就是普通的脚本语言放到 script 标签里，做些简单的校验，代码量比较少。
随着ajax的出现，前端可以请求数据了，做的事情更多了，逻辑越来越复杂，就会出现很多问题。
1.1 全局变量冲突

因为大家的代码都在一个作用域，不同人定义的变量名可能重复，导致覆盖。

var num = 1; // 一个人声明了...var num = 2; // 其他人又声明了

1.2 依赖关系管理麻烦
比如我们引入了3个js文件，他们直接相互依赖，我们需要按照依赖关系从上到下排序。
<script src='./one.js'></script><script src='./two.js'></script><script src='./three.js'></script>

如果文件有十多个，我们需要理清楚依赖关系再手动按顺序引入，会导致后续代码更加难以维护。
2. 早期解决方案
针对前面说的问题，其实也有一些响应的解决方案。
2.1 命名空间
命名空间是将一组实体、变量、函数、对象封装在一个空间的行为。这里展现了模块化思想雏形，通过简单的命名空间进行「块儿」的切分，体现了分离和内聚的思想。著名案例 「YUI2」。
// 示例：const car = {  name: '小汽车',  start: () => {    console.log('start')  },  stop: () => {    console.log('stop')  }}

上面示例可以发现可能存在问题，比如我们修改了car的name，会导致原有的name被更改
car.name = '测试'console.log(car) // {name: '111', start: ƒ, stop: ƒ}

2.2 闭包
再次提升模块化的解决方案，利用闭包使污染的问题得到解决，更加纯粹的内聚
moduleA = function（） {   var name = '小汽车';   return {      start: function (c){         return name + '启动';      };   }}()

上面示例中function内部的变量就对全局隐藏了，达到了封装的目的。但是模块名称暴露在全局，还是存在命名冲突的问题。
下面这个基于 IIFE 和闭包实现的效果：
// moduleA.js(function(global) {  var name = '小汽车';  function start() {};  global.moduleA = { name, start };})(window)

上面表达式中的变量 name 不能直接从外部访问。
综上，所以模块化解决的问题有哪些：


解决命名污染，全局污染，变量冲突等问题


内聚私有，变量不能被外面访问到


怎么引入其它模块，怎样暴露出接口给其它模块


引入其他模块可能存在循环引用的问题


三、主流模块化解决方案
1. CommonJS
可以点击 CommonJS规范查看相关介绍。
1）每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
2）CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
3）require方法用于加载模块。
1.1 加载模块
var example = require('./example.js');var config = require('config.js');var http = require('http');

1.2 对外暴露模块
module.exports.example = function () {  ...}module.exports = function(x){      console.log(x)}

1.3 Node.js的模块化
说到CommonJS 我们要提一下 Node.js，Node.js的出现让我们可以用JavaScript来写服务端代码，而 Node 应用由模块组成，采用的是 CommonJS 模块规范，当然并非完全按照CommonJS来，它进行了取舍，增加了一些自身的特性。
1）Node内部提供一个Module构建函数。所有模块都是Module的实例，每个模块内部，都有一个module对象，代表当前模块。包含以下属性：


module.id 模块的识别符，通常是带有绝对路径的模块文件名。


module.filename 模块的文件名，带有绝对路径。


module.loaded 返回一个布尔值，表示模块是否已经完成加载。


module.parent 返回一个对象，表示调用该模块的模块。


module.children 返回一个数组，表示该模块要用到的其他模块。


module.exports 表示模块对外输出的值。


2）Node使用CommonJS模块规范，内置的require命令用于加载模块文件。
3）第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。所有缓存的模块保存在require.cache之中。
// a.jsvar name = 'Lucy'exports.name = name// b.jsvar a = require('a.js')console.log(a.name) // "Lucy"a.name = "hello";var b = require('./a.js')console.log(b.name) // "hello"

上面第一次加载以后修改了name值，第二次加载的时候打印的name是上次修改的，证明是从缓存中读取的。
想删除模块的缓存可以这样：
delete require.cache[moduleName];

4）CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。请看下面这个例子。
// a.jsvar counter = 3exports.counter = counterexports.addCounter = function(a){    counter++}// b.jsvar a = require('a.js')console.log(a.counter) // 3a.addCounter()console.log(a.age) // 3

这个例子说明a.js模块加载以后，模块内部的变化就影响不到a.counter了。这是因为a.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。
2.前端模块化
前面所说的CommonJS规范，都是基于node来说的，所以CommonJS都是针对服务端的实现。为什么呢？
因为CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。
如果是浏览器环境，要从服务器端加载模块，用CommonJS需要等模块下载完并运行后才能使用，将阻塞后面代码的执行，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范，解决异步加载的问题。
2.1 AMD（Asynchronous Module Definition）和 RequireJS
AMD是异步加载模块规范。
RequireJS是一个工具库。主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。
2.1.1 模块定义
1）独立模块（不需要依赖任何其他模块）
//独立模块定义define({  method1: function() {}  method2: function() {}});  //或者define(function(){  return {    method1: function() {},    method2: function() {},  }});

2）非独立模块（需要依赖其他模块）
define(['module1', 'module2'], function(m1, m2){    return {        method: function() {            m1.methodA();            m2.methodB();        }    };});

define方法：


第一个参数是一个数组，它的成员是当前模块所依赖的模块


第二个参数是一个函数，当前面数组的所有成员加载成功后，它将被调用。它的参数与数组的成员一一对应，这个函数必须返回一个对象，供其他模块调用


2.1.2 模块调用
require方法用于调用模块。它的参数与define方法类似。
require(['a', 'b'], function ( a, b ) {    a.doSomething();});

define和require这两个定义模块、调用模块的方法，合称为AMD模式。它的模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。
2.1.3 require.js的config方法
require方法本身也是一个对象，它带有一个config方法，用来配置require.js运行参数。
require.config({    paths: {        jquery: [            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',            'lib/jquery'        ]    }});

参数对象包含：


paths 指定各个模块的位置


baseUrl 指定本地模块位置的基准目


shim 用来帮助require.js加载非AMD规范的库。


2.1.3 CommonJS 和AMD的对比


CommonJS一般用于服务端比如node，AMD一般用于浏览器环境，并且允许非同步加载模块，可以根据需要动态加载模块


CommonJS和AMD都是运行时加载


2.1.4 运行时加载
简单来讲，就是CommonJS和AMD都只能在运行时才能确定一些东西，所以是运行时加载。比如下面的例子：
// CommonJS模块let { stat, exists, readFile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;

上面代码其实是整体加载了fs模块，生成了一个_fs 的对象,然后从这个对象上读取三个方法。因为只有运行时才能得到这个对象，所以成为运行时加载。
下面是AMD的例子：
// AMDdefine('a', function () {  console.log('a 加载')  return {    run: function () { console.log('a 执行') }  }})define('b', function () {  console.log('b 加载')  return {    run: function () { console.log('b 执行') }  }})//运行require(['a', 'b'], function (a, b) {  console.log('main 执行')    a.run()  b.run()})// 运行结果：// a 加载// b 加载// main 执行// a 执行// b 执行

我们可以看到执行的时候，a和b先加载，后面才从main开始执行。所以require一个模块的时候，模块会先被加载，并返回一个对象，并且这个对象是整体加载的，也就是常说的 依赖前置。
2.2 CMD(Common Module Definition) 和 SeaJS
在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition） 模块定义规范。
Sea.js和 RequireJS 区别在哪里呢？这里有个官方给出的区别。
RequireJS 遵循 AMD（异步模块定义）规范，Sea.js 遵循 CMD （通用模块定义）规范。规范的不同，导致了两者 api 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
这里对AMD和CMD做个简单对比：


AMD 定义模块时，指定所有的依赖，依赖模块加载后会执行回调并通过参数传到这回调方法中：


define(['module1', 'module2'], function(m1, m2) {       ...    });



CMD规范中一个模块就是一个文件，模块更接近于Node对CommonJS规范的定义：


define(factory); // factory 可以是一个函数，也可以是一个对象或字符串。
factory 为函数时，表示是模块的构造方法。执行该构造方法，可以得到模块向外     提供的接口。factory 方法在执行时，默认会传入三个参数：require、exports 和     module：
define(function(require, exports, module) {  // 模块代码});

其中，require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口。需要依赖模块时，随时调用require( )引入即可。
define(function(require, exports) {      // 获取模块 a 的接口      var a = require('./a');      // 调用模块 a 的方法      a.doSomething();    });

下面演示一下CMD的执行
define('a', function (require, exports, module) {  console.log('a 加载')  exports.run = function () { console.log('a 执行') }})define('b', function (require, exports, module) {  console.log('b 加载')  exports.run = function () { console.log('b 执行') }})define('main', function (require, exports, module) {  console.log('main 执行')  var a = require('a')  a.run()  var b = require('b')  b.run()})// main 执行// a 加载// a 执行// b 加载// b 执行

看到执行结果，会在真正需要使用(依赖)模块时才执行该模块，感觉这好像和我们认知的一样，毕竟我也是这么想的执行顺序，但是看前面AMD的执行结果，是先把a和b都加载以后，才开始执行main的。
所以相较于AMD的依赖前置、提前执行，CMD则推崇依赖就近、延迟执行。
2.3 UMD(Universal Module Definition) 通用模块规范
可以看到其实兼容模式是将几种常见模块定义方式都做了兼容处理。
(function (global, factory) {  typeof exports === 'object' && typeof module !== 'undefined'    ? factory(require('lodash'))  // node, commonJS  : typeof define === 'function' && define.amd        ? define(['lodash'], factory) // amd cmd      : (          global = typeof globalThis !== 'undefined'                ? globalThis                : global || self, factory(global.lodash)          );}(this, (function (lodash) { 'use strict';    ...})));

2.4 ES6 模块
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
2.4.1 模块导出
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量（函数或类），就必须使用export关键字输出该变量（函数或类）。
1） 导出变量 和 函数
// a.js// 导出变量export var name = 'Michael';export var year = 2010;// 或者  // 也可以这样导出var name = 'Michael';export { name, year };复制代码// 导出函数export function multiply(x, y) {  return x * y;};

2） as的使用
通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
function v1() { ... }function v2() { ... }export {  v1 as streamV1,  v2 as streamV2,  v2 as streamLatestVersion};

2.4.2 模块引入
1） 使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
// 一般用法import { name, year} from './a.js';// as 用法import { name as userName } from './a.js';

注意：
import命令具有提升效果，会提升到整个模块的头部，首先执行。
下面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的（后面对比CommonJs时会讲到），在代码运行之前。
foo();import { foo } from 'my_module';

2）整体模块加载
//user.jsexport name = 'lili';export age = 18;//逐一加载import { age, name } from './user.js';//整体加载import * as user from './user.js';console.log(user.name);console.log(user.age);

3）export default 命令
export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。
export default function foo() { // 输出  // ...}import foo from 'foo'; // 输入

注意：正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
// 正确var a = 1;export default a;// 错误// `export default a`的含义是将变量`a`的值赋给变量`default`。// 所以，这种写法会报错。export default var a = 1;

2.4.3 ES6模块、CommonJS和AMD模块区别
1） 编译时加载 和 运行时加载
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。所以ES6是编译时加载。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
比如，CommonJS 模块就是对象，输入时必须查找对象属性。
// CommonJS模块  let { stat, exists, readFile } = require('fs');  // 等同于  let _fs = require('fs');  let stat = _fs.stat;  let exists = _fs.exists;  let readfile = _fs.readfile;// -----------------// ES6模块import { stat, exists, readFile } from 'fs';

CommonJS和ES6模块加载区别：


CommonJS 实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。


ES6模块 实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载 ”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。


2） 值拷贝 和 引用拷贝


前面 1.3 Node.js模块化提到了 CommonJS是值拷贝，模块加载完并输出一个值，模块内部的变化就影响不到这个值。因为这个值是一个原始类型的值，会被缓存。


ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。


// a.jsexport let counter = 3;export function addCounter() {  counter++;}// b.jsimport { counter, addCounter } from './a';console.log(counter); // 3addCounter();console.log(counter); // 4

ES6 模块输入的变量counter是活的，完全反应其所在模块a.js内部的变化。
感谢你的阅读，祝编程愉快！


学习更多技能

请点击下方公众号





                                  

                                           web前端开发                                     
一个专业而懂你的前端开发技术研究学习平台，每天与你分享【web前端开发】相关的技术文章与案例，互联网资讯，编程图书与课程，前端开发工具等学习资源，坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
             122篇原创内容                        

                


公众号