search

CUGGZ / FECharge

前端进阶必备，HTML、CSS、JavaScript、TypeScript、Vue、React、Webpack等学习教程
MIT License
35 stars 2 forks source link

前端模块化的前世今生 #15

Open CUGGZ opened 2 years ago

CUGGZ commented 2 years ago

随着前端项目越来越大，代码复杂性不断增加，对于模块化的需求越来越大。模块化是工程化基础，只有将代码模块化，拆分为合理单元，才具备调度整合的能力。下面就来看看模块化的概念，以及不同模块化方案的使用方式和优缺点。

1. 模块概述

（1）概念

由于代码之间会发生大量交互，如果结构不合理，这些代码就会变得难以维护、难以测试、难以调试。而使用模块化就解决了这些问题，模块化的特点如下：

模块化是一种将系统分离成独立功能部分的方法，可以将系统分割成独立的功能部分，严格定义模块接口，模块间具有透明性。通过将代码进行模块化分隔，每个文件彼此独立，开发者更容易开发和维护代码，模块之间又能够互相调用和通信，这就是现代化开发的基本模式。

（2）模式

JavaScript 模块包含三个部分：

本文将介绍其中的六个：

比如，对于以下代码：

var name = 'JavaScript';
var age = 20;

当上面的代码运行时，name 和 age 变量会被添加到全局对象中。因此，应用中的所有 JavaScript 脚本都可以访问全局变量 name 和 age，这就很容易导致代码错误，因为在其他不相关的单元中也可以访问和修改这些全局变量。除此之外，向全局对象添加变量会使全局命名空间变得混乱并增加了命名冲突的机会。

所以，我们就需要一种封装变量和函数的方法，并且只对外公开定义的接口。因此，为了实现模块化并避免使用全局变量，可以使用如下方式来创建模块：

(function () {
    // 声明私有变量和函数

    return {
        // 声明公共变量和函数
    }
})();

上面的代码就是一个返回对象的闭包，这就是我们常说的IIFE（Immediately Invoked Function Expression），即立即调用函数表达式。在该函数中，就创建了一个局部范围。这样就避免了使用全局变量（IIFE 是匿名函数），并且代码单元被封装和隔离。

可以这样来使用 IIFE 作为一个模块：

var module = (function(){
  var age = 20;
  var name = 'JavaScript'

  var fn1 = function(){
    console.log(name, age)
  };

  var fn2 = function(a, b){
    console.log(a + b)
  };

  return {
    age,
    fn1,
    fn2,
  };
})();

module.age;           // 20
module.fn1();         // JavaScript 20
module.fn2(128, 64);  // 192

在这段代码中，module 就是我们定义的一个模块，它里面定义了两个私有变量 age 和 name，同时定义了两个方法 fn1 和 fn2，其中 fn1 中使用 module 中定义的私有变量，fn2 接收外部传入参数。最后，module 向外部暴露了age、fn1、fn2。这样就形成了一个模块。

当试图在 module 外部直接调用fn1时，就会报错：

fn1(); // Uncaught ReferenceError: fn1 is not defined

当试图在 module 外部打印其内部的私有变量name时，得到的结果是 undefined：

module.name; // undefined

上面的 IIFE 的例子是遵循模块模式的，具备其中的三部分，其中 age、name、fn1、fn2 就是模块内部的代码实现，返回的 age、fn1、fn2 就是导出的内容，即接口。调用 module 方法和变量就是导入使用。

3. CommonJS

（1）概念

① 定义

CommonJS 是社区提出的一种 JavaScript 模块化规范，它是为浏览器之外的 JavaScript 运行环境提供的模块规范，Node.js 就采用了这个规范。

注意：

  • 浏览器不支持使用 CommonJS 规范；
  • Node.js 不仅支持使用 CommonJS 来实现模块，还支持最新的 ES 模块。

CommonJS 规范加载模块是同步的，只有加载完成才能继续执行后面的操作。不过由于 Node.js 主要运行在服务端，而所需加载的模块文件一般保存在本地硬盘，所以加载比较快，而无需考虑使用异步的方式。

② 语法

CommonJS 规范规定每个文件就是一个模块，有独立的作用域，对于其他模块不可见，这样就不会污染全局作用域。在 CommonJS 中，可以分别使用 export 和 require 来导出和导入模块。在每个模块内部，都有一个 module 对象，表示当前模块。通过它来导出 API，它有以下属性：

CommonJS 的缺点

exports.TestModule = function() { console.log('exports'); }

则合两种方式的导出结果是一样的，`module.exports`和`exports`的区别可以理解为：`exports`是`module.exports`的引用，如果在`exports`调用之前调用了`exports=...`，那么就无法再通过`exports`来导出模块内容，除非通过`exports=module.exports`重新设置`exports`的引用指向。

当然，可以先定义函数，再导出：
```javascript
function testModule() {
    console.log('exports');
}

module.exports = testModule;

这是仅导出一个函数的情况，使用时就是这样的：

testModule = require('./MyModule');

testModule();

如果是导出多个函数，就可以这样：

function testModule1() {
    console.log('exports1');
}

function testModule2() {
    console.log('exports2');
}

导入多个函数并使用：

({testModule1, testModule2} = require('./MyModule'));

testModule1();
testModule2();

② 模块导入

可以通过以下方式来导入模块：

const module = require('./MyModule');

注意，如果 require 的路径没有后缀，会自动按照.js、.json和.node的顺序进行补齐查找。

③ 加载过程

在 CommonJS 中，require 的加载过程如下：

  1. 优先从缓存中加载；
  2. 如果缓存中没有，检查是否是核心模块，如果是直接加载；
  3. 如果不是核心模块，检查是否是文件模块，解析路径，根据解析出的路径定位文件，然后执行并加载；
  4. 如果以上都不是，沿当前路径向上逐级递归，直到根目录的node_modules目录。

    （3）示例

    下面来看一个购物车的例子，主要功能是将商品添加到购物车，并计算购物车商品总价格：

    
// cart.js

var items = [];

function addItem (name, price) item.push({ name: name, price: price }); }

exports.total = function () { return items.reduce(function (a, b) { return a + b.price; }, 0); };

exports.addItem = addItem;

这里通过两种方式在 exports 对象上定义了两个方法：addItem 和 total，分别用来添加购物车和计算总价。

下面在控制台测试一下上面定义的模块：
```javascript
let cart = require('./cart');

这里使用相对路径来导入 cart 模块，打印 cart 模块，结果如下：

cart // { total: [Function], addItem: [Function: addItem] }

向购物车添加一些商品，并计算当前购物车商品的总价格：

cart.addItem('book', 60);
cart.total()  // 60

cart.addItem('pen', 6);
cart.total()  // 66

这就是创建模块的基本方法，我们可以创建一些方法，并且只公开希望其他文件使用的部分代码。该部分成为 API，即应用程序接口。

这里有一个问题，只有一个购物车，即只有一个模块实例。下面来在控制台执行以下代码：

second_cart = require('./cart');

那这时会创建一个新的购物车吗？事实并非如此，打印当前购物车的商品总金额，它仍然是66：

second_cart.total();  // 66

当我们㤇创建多个实例时，就需要再模块内创建一个构造函数，下面来重写 cart.js 文件：

// cart.js

function Cart () {
    this.items = [];
}

Cart.prototype.addItem = function (name, price) {
    this.items.push({
        name: name,
        price: price
    });
}

Cart.prototype.total = function () {
    return this.items.reduce(function(a, b) {
        return a + b.price;
    }, 0);
};

module.export = Cart;

现在，当需要使用此模块时，返回的是 Cart 构造函数，而不是具有 cart 函数作为一个属性的对象。下面来导入这个模块，并创建两个购物车实例：

Cart = require('./second_cart');

cart1 = new Cart();
cart2 = new Cart();

cart1.addItem('book', 50);
cart1.total();   // 50
cart2.total();   // 50

4. AMD

（1）概念

CommonJS 的缺点之一是它是同步的，AMD 旨在通过规范中定义的 API 异步加载模块及其依赖项来解决这个问题。AMD 全称为 Asynchronous Module Definition，即异步模块加载机制。它规定了如何定义模块，如何对外输出，如何引入依赖。

AMD规范重要特性就是异步加载。所谓异步加载，就是指同时并发加载所依赖的模块，当所有依赖模块都加载完成之后，再执行当前模块的回调函数。这种加载方式和浏览器环境的性能需求刚好吻合。

① 语法

AMD 规范定义了一个全局函数 define，通过它就可以定义和引用模块，它有 3 个参数：

define(id?, dependencies?, factory);

其包含三个参数：

除此之外，要想使用此模块，就需要使用规范中定义的 require 函数：

require(dependencies?, callback);

其包含两个参数：

有关 AMD API 的更详细说明，可以查看 GitHub 上的 AMD API 规范：https://github.com/amdjs/amdjs-api/blob/master/AMD.md。

② 兼容性

该规范的浏览器兼容性如下：

③ 优缺点

AMD 的优点：

AMD 的缺点：

在 script 标签下添加以下代码来初始化 RequireJS：

<script>
    require(['config'], function() {
        //...
    })
</script>

当页面加载完配置文件之后， require() 中的代码就会运行。这个 script 标签是一个异步调用，这意味着当 RequireJS 通过 src="js/require.js 加载时，它将异步加载 data-main 属性中指定的配置文件。因此，该标签下的任何 JavaScript 代码都可以在 RequireJS 获取时执行配置文件。

那 AMD 中的 require() 和 CommonJS 中的 require() 有什么区别呢？

下面来定义一个名为addition.js的文件，其包含一个执行加法操作的函数，但是没有依赖项：

// addition.js
define(function() {
    return function(a, b) {
        alert(a + b);
    }
});

再来定义一个名为 calculator.js 的文件：

define(['addition'], function(addition) {
    addition(7, 9);
});

当 RequireJS 看到上面的代码块时，它会去寻找依赖项，并通过将它们作为参数传递给函数来自动将其注入到模块中。

RequireJS 会自动为 addition.js 和 calculator.js 文件创建一个 <script> 标签，并将其放在HTML <head> 元素中，等待它们加载，然后运行函数，这类似于 require() 的行为。

下面来更新一下 index.html 文件：

// index.html
require(['config'], function() {
    require(['calculator']);
});

当浏览器加载 index.html 文件时，RequireJS 会尝试查找 calculator.js 模块，但是没有找到，所以浏览器也不会有任何反应。那该如何解决这个问题呢？我们必须提供配置文件来告诉 RequireJS 在哪里可以找到 calculator.js（和其他模块），因为它是引用的入口。

下面是配置文件的基本结构：

requirejs.config({
    baseURL: "string",
    paths: {},
    shim: {},
});

这里有三个属性值：

我们的配置文件如下：

requirejs.config({
    baseURL: "js",
    paths: {
        // 这种情况下，模块位于 customScripts 文件中
        addition: "customScripts/addition",
        calculator: "customScripts/calculator",
    },
});

配置完成之后，重新加载浏览器，就会收到浏览器的弹窗：

这就是在 AMD 中使用 RequireJS 定义模块的方法之一。我们还可以通过指定其路径名来定义模块，该路径名是模块文件在项目目录中的位置。 下面给出一个例子：

define("path/to/module", function() {
    // 模块内容
})

当然，RequireJS 并不鼓励这种方法，因为当我们将模块移动到项目中的另一个位置时，就需要手动更改模块中的路径名。

在使用 AMD 定义模块时需要注意：

CMD 定义模块也是通过一个全局函数 define 来实现的，但只有一个参数，该参数既可以是函数也可以是对象：

define(factory);

如果这个参数是对象，那么模块导出的就是对象；如果这个参数为函数，那么这个函数会被传入 3 个参数：

define(function(require, exports, module) {
  //...
});

这三个参数分别如下： （1）require：一个函数，通过调用它可以引用其他模块，也可以调用 require.async 函数来异步调用模块； （2）exports：一个对象，当定义模块的时候，需要通过向参数 exports 添加属性来导出模块 API； （3）module 是一个对象，它包含 3 个属性：

下面来看一个例子，定义一个 increment 模块，引用 math 模块的 add 函数，经过封装后导出成 increment 函数：

define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
  module.id = "increment";
});

CMD 最大的特点就是懒加载，不需要在定义模块的时候声明依赖，可以在模块执行时动态加载依赖。除此之外，CMD 同时支持同步加载模块和异步加载模块。

AMD 和 CMD 的两个主要区别如下：

UMD 是一组同时支持 AMD 和 CommonJS 的模式，它旨在使代码无论执行代码的环境如何都能正常工作，通过 UMD 可以在合适的环境选择对应的模块规范。比如在 Node.js 环境中采用 CommonJS 模块管理，在浏览器环境且支持 AMD 的情况下采用 AMD 模块，否则导出为全局函数。

一个UMD模块由两部分组成：

UMD 的代码实现如下：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof exports === 'object') {
    module.exports,
    module.exports = factory();
  } else {
    root.returnExports = factory();
  }
}(this, function () {
  // 模块内容定义
  return {};
}));

它的执行过程如下：

  1. 先判断是否支持 Node.js 模块格式（exports 是否存在），存在则使用 Node.js 模块格式；
  2. 再判断是否支持 AMD（define 是否存在），存在则使用 AMD 方式加载模块；
  3. 若两个都不存在，则将模块公开到全局（Window 或 Global）。

UMD的特点如下： ① UMD 的优点：

② UMD 的缺点：

模块和经典 JavaScript 脚本略有不同：


- 模块中的 this 并不引用全局 this，而是 undefined。 （如果需要访问全局 this，可以使用 globalThis）；
```javascript
<script>
  alert(this); {/* 全局对象 */}
</script>

<script type="module">
  alert(this); {/* undefined */}
</script>

CommonJS 和 AMD 都是在运行时确定依赖关系，即运行时加载，CommonJS 加载的是拷贝。而 ES 模块是在编译时就确定依赖关系，所有加载的其实都是引用，这样做的好处是可以执行静态分析和类型检查。

（2）语法

① 导出

当导出模块代码时，需要在其前面添加 export 关键词。导出内容可以是变量、函数或类。任何未导出的代码都是模块私有的，无法在该模块之被外访问。ES 模块支持两种类型的导出：

export default func;

当然，也可以直接默认导出：
```javascript
export default function func() {
    return true;
}

默认导出可以省略变量/函数/类名，在导入时可以为其指定任意名称：

// 导出
export default function () {
  console.log('foo');
}
// 导入
import customName from './module';

注意： 导入默认模块时不需要大括号，导出默认的变量或方法可以有名字，但是对外是无效的。export default 在一个模块文件中只能使用一次。

可以使用 as 关键字来重命名需要暴露出的变量或方法，经过重命名后同一变量可以多次暴露出去：

const first = 'test';
export {first as second};

② 导入

使用命名导出的模块，可以通过以下方式来导入：

import {first, second, func} from './module';

使用默认导出的模块，可以通过以下方式来引入，导入名称可以自定义，无论导出的名称是什么：

import customName from './module.js';

导入模块位置可以是相对路径也可以是绝对路径，.js扩展名是可以省略的，如果不带路径而只是模块名，则需要通过配置文件告诉引擎查找的位置：

import {firstName, lastName} from './module';

可以使用 as 关键字来将导入的变量/函数重命名：

import { fn as fn1 } from './profile';

在 ES 模块中，默认导入和命名导入是可以同时使用的，比如在 React 组件中：

import React, {usestate, useEffect} from 'react';

const Comp = () => {
    return <React.Fragment>...</React.Fragment> 
}

export default Comp;

可以使用 as 关键字来加载整个模块，用于从另一个模块中导入所有命名导出，会忽略默认导出：

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

③ 动态导入

上面我们介绍的都是静态导入，使用静态 import 时，整个模块需要先下载并执行，然后主代码才能执行。有时我们不想预先加载模块，而是按需加载，仅在需要时才加载。这可以提高初始加载时的性能，动态 import 使这成为可能：

<script type="module">
  (async () => {
    const moduleSpecifier = './lib.mjs';
    const {repeat, shout} = await import(moduleSpecifier);
    repeat('hello');
    // → 'hello hello'
    shout('Dynamic import in action');
    // → 'DYNAMIC IMPORT IN ACTION!'
  })();
</script>

与静态导入不同，动态导入可以在常规脚本中使用。

④ 其他用法

可以使用以下方式来先导入后导出模块内容：

export { foo, bar } from './module';

上面的代码就等同于：

import { foo, bar } from './module';
export { foo, boo};

另一个与模块相关的新功能是import.meta，它是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。

默认情况下，图像是相对于 HTML 文档中的当前 URL 加载的。import.meta.url可以改为加载相对于当前模块的图像：

function loadThumbnail(relativePath) {
  const url = new URL(relativePath, import.meta.url);
  const image = new Image();
  image.src = url;
  return image;
}

const thumbnail = loadThumbnail('../img/thumbnail.png');
container.append(thumbnail);

（3）在浏览器使用

目前主流浏览器都支持 ES 模块：

如果想在浏览器中使用原生 ES 模块方案，只需要在 script 标签上添加 type="module" 属性。通过该属性，浏览器知道这个文件是以模块化的方式运行的。而对于不支持的浏览器，需要通过 nomodule 属性来指定某脚本为 fallback 方案：

<script type="module">
  import module1 from './module1'
</script>
<script nomodule src="fallback.js"></script>

支持 type="module" 的浏览器会忽略带有 nomodule 属性的脚本。使用 type="module" 的另一个作用就是进行 ES Next 兼容性的嗅探。因为支持 ES 模块化的浏览器，都支持 ES Promise 等特性。

由于默认情况下模块是延迟的，因此可能还希望以延迟方式加载 nomodule 脚本：

<script nomodule defer src="fallback.js"></script>

（4）在 Node.js 使用

上面提到，Node.js 使用的是 CommonJS 模块规范，它也是支持 ES 模块的。在 Node.js 13 之前，ES 模块是一项实验性技术，因此，可以通过使用 .mjs 扩展名保存模块并通过标志访问它来使用模块。

从 Node.js 13 开始，可以通过以下两种方式使用模块:

那如何在小于等于 12 版本的 Node.js 中使用 ES 模块呢？可以在执行脚本启动时加上 --experimental-modules，不过这一用法要求相应的文件后缀名必须为 .mjs：

node --experimental-modules module1.mjs
import module1 from './module1.mjs'
module1