跳至主要內容

JS模块化编程

atodo2025/10/10大约 10 分钟前端前端JS

一、JS模块化编程背景

计算机语言编程中，模块化编程对架构设计、代码复用起到至关重要的作用，工程中引入他人写好的库和模块能大大缩减开发周期。C/C++中，可以用include关键字，Java中可以用import关键字。

模块化编程是一种软件设计技术，强调将程序的功能分为独立的、可互换的模块，以使每个模块都包含执行所需功能的一个方面所必需的一切。模块接口表示该模块需要的元素和提供的元素。模块化程序设计与结构化程序设计、面向对象程序设计密切相关，目标都是通过分解成较小的部分来促进大型软件程序和系统的构建。

<script>标签引入JS的方式

  • 通过<script>标签引入JS在加载和执行的时候 , 会阻塞dom的渲染进程。多个<script>标签引入JS的加载是并行的，执行顺序按照<script>标签的书写顺序。(现代浏览器中多个<script>加载是并行的, 某个<script>标签的加载并不会阻止其他<script>标签的加载, 在chrome中, 默认支持6个资源(http1.x)并行加载 )。把<script> 标签放在<head>中, 当JS文件很大或者网络差时, 会导致页面长时间空白。

  • 通过在<script> 标签加上defer，即<script defer> ，加载的过程不会阻塞dom渲染，但脚本会在dom渲染完后执行，且会按照<script>标签的书写顺序执行。

  • 通过在<script> 标签加上async，即<script async>，加载的过程不会阻塞dom渲染，但脚本会在加载完后立刻执行，所以存在多个<script async>时, 无法保证执行顺序, 加载较快的脚本会先执行。

  • defer, async主要作用于加载阶段不会阻塞dom渲染， 执行阶段仍然会阻塞dom渲染。

image-script标签方式加载和执行JS的过程
image-script标签方式加载和执行JS的过程

<script>标签引入JS方式存在的问题

  • JS是解释型语言，后面脚本运行所依赖的脚本必须在之前已经加载完，因此需要调整script标签书写的顺序来保障脚本之间的依赖。
  • JS很多很多很大时，JS的加载和执行会阻塞dom渲染，会阻塞浏览器，浏览器会卡住，用户体验会很差。
  • JS不加规范的编写和引入会导致诸如逻辑混乱、页面复杂、可维护性差、全局变量暴露等问题。

JS模块化编程规范的优势

  • 无需关注依赖文件的引用顺序。
  • 在需要的时候再加载，避免加载阻塞。
  • 解决项目中的全局变量污染的问题。
  • 模块化降低耦合，依赖清晰。
  • 职责单一，方便代码复用和维护 。
  • 开发效率高，有利于多人协同开发。

二、JS模块化编程的规范

JS模块化编程经历了从 控制script标签顺序 ⇒ CommonJS ⇒ AMD ⇒ CMD ⇒ ESM（ES6模块） 的过程。

  • CommonJS 是 BravoJS 在推广过程中对模块定义的规范化产出。
  • AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
  • CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
  • ESM 是 ``ES6 在语言标准的层面上，实现了模块功能，旨在成为浏览器和服务器通用的模块解决方案。

CommonJS规范

CommonJS规范采用同步方式加载模块。主要实践者是NodeJS，在服务端，模块文件都存放在本地磁盘，读取非常快，所以这样做不会有问题，但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。

CommonJS规范有4个重要的环境变量为模块化的实现提供支持：module、exports、require、global。使用时，用**module.exports定义当前模块对外输出的接口**（不推荐直接用exports），用**require加载模块**。

/* 定义模块 math.js */
//变量
var basicNum = 0;
//函数
function add(a, b) {
  return a + b;
}
//向外暴露的函数、变量
module.exports = {
  add: add,
  basicNum: basicNum
}
/* 引用模块 math.js */
// 引用自定义的模块时，参数包含路径，可省略.js
// 必须加./路径，不加的话只会去node_modules文件找
var math = require('./math');
math.add(2, 5);

/* 引用核心模块 */
// 引用核心模块时，不需要带路径
var http = require('http');
http.createService(...).listen(3000);

exports和module.export区别

exports：exports是一个变量（对象），它不是module的引用，它是{}的引用，它指向module.exports的{}模块。只能使用**.语法** 向外暴露变量。（因为对象只能用点）

module.exports：module是一个变量，指向一块内存，exports是module中的一个属性，存储在内存中，然后exports属性指向{}模块。既可以使用**.语法**，也可以使用**=直接赋值**。（因为变量可以赋值）

AMD规范

AMD（Asynchronous Module Definition）规范采用异步方式加载模块**，**模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD规范的模块化使用require.js实现：用require.config()指定引用路径等，用define()定义模块，用require()加载模块。

首先需要引入require.js文件和入口文件main.js。main.js中配置require.config()。

/** 引入require.js及main.js **/
<script src="js/require.js" data-main="js/main"></script>
/** main.js 入口文件/主模块 **/
// 首先用config()指定各模块路径和引用名
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js
    "underscore": "underscore.min",
  }
});

引用模块的时，将模块名放在[]中作为reqiure()的第一参数；如果我们定义的模块本身也依赖其他模块，那就需要将它们放在[]中作为define()的第一参数。

/* 定义math.js模块 */
define(function () {
    var basicNum = 0;
    var add = function (x, y) {
        return x + y;
    };
    return {
        add: add,
        basicNum :basicNum
    };
});
 
// 定义一个依赖underscore.js的模块
define(['underscore'],function(_){
  var classify = function(list){
    _.countBy(list,function(num){
      return num > 30 ? 'old' : 'young';
    })
  };
  return {
    classify :classify
  };
});
/* 引用模块，将模块放在[]内 */
require(['jquery', 'math'],function($, math){
  var sum = math.add(10,20);
  $("#sum").html(sum);
});

AMD规范的实现者require.js在申明依赖的模块时，会在第一时间加载并执行模块内的代码 。

define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
    // 等于在最前面声明并初始化了要用到的所有模块
    if (false) {
      // 即便没用到某个模块 b，但 b 还是提前执行了。**这就CMD要优化的地方**
      b.foo()
    } 
});

CMD规范

CMD（Common Module Definition）采用异步方式加载模块**，与AMD规范很类似，不同点在于：AMD推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行**。此规范其实是在sea.js推广过程中产生的。

/** AMD写法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等于在最前面声明并初始化了要用到的所有模块
    a.doSomething();
    if (false) {
        // 即便没用到某个模块 b，但 b 还是提前执行了
        b.doSomething()
    } 
});
/** CMD写法 **/
define(function(require, exports, module) {
    var a = require('./a'); //在需要时申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});
/* 定义math.js模块 */
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
 /* 引用math.js模块 */
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

ESM规范

ESM（ES6 Module）规范是ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。

ESM规范模块化功能实现主要命令：import、export、export default。

  • import命令用于输入其他模块提供的功能。
  • export命令用于规定模块的对外接口，
  • export default命令为模块指定默认输出，对应的import语句不需要使用大括号。
/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}
/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export default { basicNum, add };
 
/** 引用模块 **/
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

ES6的模块不是对象，import命令会被 JavaScript 引擎静态分析，在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。

ESM规范的特征：

  • 严格模式：ES6 的模块自动采用严格模式。
  • import的 read-only特性： import的属性是只读的，不能赋值，类似于const的特性。
  • export/import提升： import/export必须位于模块顶级，不能位于作用域内；其次对于模块内的import/export会提升到模块顶部，这是在编译阶段完成的。

三、JS模块化编程的规范对比

AMD和CMD的差异

  1. 对依赖模块的执行时机处理不同，注意不是加载的时机，依赖模块同样都是预先加载的。

  2. 两者加载模块都是异步的，加载时机都是预先加载的，添加依赖的位置和执行顺序不同。

    • AMD依赖前置，可以方便知道依赖了哪些模块，然后马上加载 , 在加载完成后, 就会执行该模块。

    • CMD就近依赖，把模块变为字符串解析一遍, 找到依赖了哪些模块, 在加载模块完成后, 不立刻执行, 而是等到require后再执行。

ESM和CommonJS的差异

  1. CommonJS 模块输出的是值的拷贝，ESM模块输出的是值的引用。

    • CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

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

  2. CommonJS 模块是运行时加载，ESM模块是编译时输出接口。

    • 运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。

    • 编译时加载: ESM模块不是对象，而是通过 export 命令显式指定输出的代码，import时采用静态命令的形式。即在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。模块内部引用的变化，会反应在外部。

  3. CommonJS 加载的是一个对象，ESM模块对外接口是一种静态定义。

    • CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。

    • ESM模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

// a.js
let a = 1;
let b = { num: 1 }
setTimeout(() => {
    a = 2;
    b = { num: 2 };
}, 200);
module.exports = {
    a,
    b,
};
/** CommonJS **/
// main.js
// node main.js
let {a, b} = require('./a');
console.log(a);  // 1
console.log(b);  // { num: 1 }
setTimeout(() => {
    console.log(a);  // 1
    console.log(b);  // { num: 1 }
}, 500);
/** ESM **/
// main.mjs
// node --experimental-modules main.mjs
import {a, b} from './a';
console.log(a);  // 1
console.log(b);  // { num: 1 }
setTimeout(() => {
    console.log(a);  // 2
    console.log(b);  // { num: 2 }
}, 500);

参考资料

致谢

最近更新
贡献者: atodo