前端模块化开发

qian端小酱
140 阅读8分钟

1. 关于模块化、模块化开发

模块化开发最终的目的是将程序划分成一个个小的结构。这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构。上面所提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；

  • 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
  • 通过某种方式，导入另外结构中的变量、函数、对象等。

2. 模块化的历史

2.1 JavaScript代码趋于复杂

早期的JavaScript没有模块化，随着前端和JavaScript的快速发展，JavaScript代码变得越来越复杂了：

  • ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过JavaScript进行前端页面的渲染；
  • SPA的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现；
  • 包括Node的实现，JavaScript编写复杂的后端程序。

2.2 早期没有模块化带来了很多的问题：比如命名冲突的问题

解决该问题的办法之一：立即函数调用表达式（IIFE）。但会让代码看起来较为混乱，且编写者须记得每个模块返回对象的命名。因此迫切需要一个普适的规范。JavaScript本身，于ES6（2015）推出了自己的模块化方案ES Module。此前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范：AMD、CMD、CommonJS等。

3. 不同的模块化规范

3.1 CommonJS规范（CJS）

  • Browserify是CommonJS在浏览器中的一种实现；
  • webpack打包工具具备对CommonJS的支持和转换；
  • Node是CommonJS在服务器端一个具有代表性的实现。
  1. 在Node中每一个js文件都是一个单独的模块；
  2. 模块中包括CommonJS规范的核心变量：exports、module.exports、require，可使用这些变量来进行模块化开发。
核心变量作用
exports/module.exports对模块中的内容进行导出
require函数导入其他模块（自定义模块、系统模块、第三方库模块）中的内容

（1）exports导出

exports是一个对象，可在该对象中添加多个属性，添加的属性会导出。

exports.name = name;
exports.age = age;

从另外一个文件中可以导入。

const bar = require('./bar')

理解：require通过各种查找方式，最终找到了exports对象，并将该exports对象赋值给bar变量。

（2）module.exports导出

CommonJS中是没有module.exports的概念的，但是为了实现模块的导出，Node中使用的是Module类，每一个模块都是Module的一个实例，也就是module，因此module才是导出的真正实现者。但是，为什么exports也可以导出呢？因为module对象的exports属性是exports对象的一个引用；即module.exports = exports = bar；

（3）require细节

  • require函数帮助我们引入一个文件（模块）中导出的对象， 导入格式：require(X)。
  1. 情况一：X是一个Node核心模块，比如path、http，直接返回核心模块，且停止查找；
  2. 情况二：X以 ./ 或 ../ 或 /（根目录）开头；查找顺序参考（.js .json .node）；
  3. 情况三：直接是一个X（没有路径），并且X不是一个核心模块，文件夹依次查找node_modules。
  • 模块的加载过程：
  1. 结论一：模块在被第一次引入时，模块中的js代码会被运行一次；
  2. 结论二：模块被多次引入时，会缓存，最终只加载（运行）一次；每个模块对象module都有一个属性：loaded，为false表示还没有加载，为true表示已经加载；
  3. 结论三：如果有循环引入，那么加载顺序是什么？ Node采用的是深度优先算法。

（4）CommonJS规范缺点

  • CommonJS加载模块是同步的： 只有等到对应的模块加载完毕，当前模块中的内容才能被运行。对于服务器，因为服务器加载的js文件都是本地文件，加载速度非常快；而浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行，采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作。
  • 在早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD，但是目前一方面现代的浏览器已经支持ES Modules，另一方面借助于webpack等工具可以实现对CommonJS或者ES Module代码的转换，AMD和CMD已经使用非常少了。

3.2 AMD规范（Asynchronous Module Definition（异步模块定义）），异步加载模块

AMD是异步加载的，模块的加载不影响后面语句的运行。所有依赖这个模块的语句都定义在一个回调函数中，等加载完之后，这个回调才会运行。AMD 的模块引入由 define 方法来定义。 规范只是定义代码的应该如何去编写，只有有了具体的实现才能被应用。 AMD实现的比较常用的库是require.js和curl.js。

  • 第一步：下载require.js 下载地址：github.com/requirejs/r…
  • 第二步：定义HTML的script标签引入require.js和定义入口文件：
// data-main属性的作用是在加载完src的文件后会加载执行该文件
<script src="./lib/require.js" data-main="./index.js"></script>

3.3 CMD规范（Common Module Definition（通用模块定义）），异步加载模块

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。CMD 推崇依赖就近，AMD 推崇依赖前置。 CMD也有自己比较优秀的实现方案：SeaJS。

  • 第一步：下载SeaJS 下载地址：github.com/seajs/seajs
  • 第二步：引入sea.js和使用主入口文件：
  <script src="./lib/sea.js"></script>
  <script>
    seajs.use('./index.js')
  </script>

3.4 ES Module

（1）ES Module和CommonJS的模块化有一些不同之处：
  • 使用了import和export关键字（导入/导出）；
  • 它采用编译期的静态分析，并且也加入了动态引用的方式；
  • 采用ES Module将自动采用严格模式：use strict
（2）export关键字

将其他模块中内容全部导出，有如下的方式：

  • 方式一：在语句声明的前面直接加上export关键字；
export const name="xxx";
  • 方式二：将所有需要导出的标识符，放到export后面的 {}中；注意：这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的；
export { name, age };
  • 方式三：导出时给标识符起一个别名，通过as关键字起别名。
export { name as newName };
  • 默认导出（default export），方便和现有的CommonJS等规范相互操作。注意：在一个模块中，只能有一个默认导出（default export）。
  1. 默认导出export时可以不需要指定名字export default NavBar;
  2. 在导入时不需要使用 {}，import React, { PureComponent } from "react";。
（3）import关键字

import关键字负责从另外一个模块中导入内容。

  • 方式一：import {标识符列表} from '模块'，注意：这里的{}也不是一个对象，里面只是存放导入的标识符列表内容；
  • 方式二：导入时给标识符起别名，通过as关键字起别名；
  • 方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上。

【补充】：export和import可以结合使用。在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中。这样方便指定统一的接口规范，也方便阅读。

export { sum as barSum } from "./bar.js";
（4）import函数

通过import加载一个模块，不能放到逻辑代码中。因为ES Module在被JS引擎解析时，就必须知道它的依赖关系，由于这个时候js代码没有任何的运行，所以无法在进行类似于if判断中根据代码的执行情况；甚至拼接路径的写法也是错误的：因为必须到运行时能确定path的值。 某些情况下，需要根据不同的条件，动态来选择加载模块的路径，如何做到？使用 import() 函数来动态加载，import函数返回一个Promise，可以通过then获取结果。

if (flag) {
  import("./modules/aaa.js").then((aaa) => {
    aaa.aaa();
  });
}
（5）import meta

import.meta是一个给JavaScript模块暴露特定上下文的元数据属性对象。 它包含了这个模块的信息，比如这个模块的URL，在ES11（ES2020）中新增的特性。

（6）ES Module的解析流程

详见hacks.mozilla.org/2018/03/es-…

ES Module的解析过程可以划分为三个阶段：

  1. 阶段一：构建（Construction），根据地址查找js文件，并且下载，将其解析成模块记录（Module Record）；
  2. 阶段二：实例化（Instantiation），对模块记录进行实例化，并且分配内存空间，解析模块的导入和导出语句，把模块指向对应的内存地址；
  3. 阶段三：运行（Evaluation），运行代码，计算值，并且将值填充到内存地址中。
avatar
文章
阅读
粉丝