当前位置：首页 > 全部内容 > JavaScript 模块化详解：从 CommonJS 到 ES6

JavaScript 模块化详解：从 CommonJS 到 ES6

作者：青柠时间：2026-10-24 21:20:29浏览：386

本文详细解析 JavaScript 模块化的发展历程与核心机制。从早期多 script 标签的痛点出发，深入讲解 CommonJS 服务器端规范、AMD 异步模块定义、CMD 通用模块定义以及 ES6 静态模块化方案。通过对比各规范的语法特性、加载方式及适用场景，帮助开发者理解模块依赖管理与代码组织策略。

前言：

1.概念

  • 模块化是将复杂程序依据特定规范封装为若干文件块，并将这些块组合在一起的过程；
  • 模块内部的数据与实现保持私有，仅向外部暴露特定的接口（方法）以与其他模块进行通信。

2.模块化的好处

  • 避免命名冲突，减少全局命名空间的污染；
  • 实现更好的代码分离，支持按需加载；
  • 提高代码的复用性；
  • 提升代码的可维护性。

3.引入多个script标签后出现的问题

  • 请求过多：当依赖的模块数量较多时，会导致网络请求次数显著增加；
  • 依赖关系模糊：由于无法明确模块间的具体依赖关系，容易引发加载顺序错误；
  • 维护困难：上述两个问题共同导致代码难以维护。

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jQuery.js"></script>
  <script src="module.js"></script>
</head>
<body>
  <div>123</div>
</body>
<script>
  myModule.foo();
  myModule.bar();
  console.log(myModule.data) ;
  myModule.data = 'xxxx';
  myModule.foo();
</script>
</html>




//module.js IIFE（匿名函数自调用）
;(function(window,$){
  let data = "www.baidu.com";
  function foo() {
    console.log(`foo() ${data}`);
    //这里需要使用jQuery库
    $('body').css('background', 'red')
  }
  function bar() {
    console.log(`bar() ${data}`);
    otherFun();
  }
  function otherFun() {
    console.log(`otherFun()`);
  }
  window.myModule = { foo, bar };
})(window, jQuery)

一、CommonJS

  • Node.js 基于commonJS模块规范，每个文件被视为一个独立模块，拥有独立的作用域；在服务器端，模块加载是同步进行的；而在浏览器端，模块需经过预先编译和打包处理才能使用。

特点：

  • 所有代码均在模块作用域内运行，不会污染全局作用域；
  • 模块可多次加载，但仅在首次加载时执行一次，其运行结果会被缓存；后续加载直接读取缓存结果。若需重新运行模块，必须手动清除缓存。
  • 模块加载顺序严格遵循代码中出现的先后顺序。

语法：

  • 暴露模块：使用js module.exports = value 或者 js exports.xxx = value
  • 引入模块：使用js require('xxx')，其中 xxx 若为第三方模块则代表模块名；若为自定义模块则代表文件路径。

CommonJS规范规定，每个模块内部存在一个 module 变量，代表当前模块。该变量是一个对象，其 exports 属性（即 module.exports）构成了对外接口。加载某个模块，实质上是加载该模块的 module.exports 属性。

require命令用于加载模块文件。require 命令的基本功能是读取并执行指定的 JavaScript 文件，随后返回该模块的 exports 对象。若未找到指定模块，则会抛出错误。

CommonJS模块的加载机制是输入被输出的值的拷贝。这意味着，一旦输出某个值，模块内部对该值的变化将不再影响已获取的拷贝。

二、AMD

  • 相较于 CommonJS 的同步加载，AMD（Asynchronous Module Definition）更适合浏览器端的非同步模块加载，因为 AMD 允许指定回调函数。
  • 目录结构

前言：

使用 require.js


<!-- index.html -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>




//定义一个没有依赖的module1模块
define('module1', () => {
  let count = 0;
  const add = () => ++ count;
  const reset = () => count = 0;
  const upperCase = string => string.toUpperCase()

  return {
    add,
    reset,
    upperCase
  }
})




//定义一个有依赖的module2模块，依赖module1
define('module2',['module1'], (module1) => {
  const showMsg = () => module1.upperCase('hello-amd');

  return {
    showMsg
  }
})




<!-- 在html文件中使用模块 -->
<body>

<script>
  require.config({
    paths: {
      module1: './modules/module1',
      module2: './modules/module2'
    }
  })
  require(['module1', 'module2'], (module1, module2) => {
    console.log(module1.add()) // 1
    console.log(module1.reset()) //0
    console.log(module2.showMsg()) //HELLO-AMD
  })
</script>
</body>

三、CMD

  • CMD 规范集 CommonJS 与 AMD 的优点于一身，专为浏览器端设计。其模块加载是异步的，且模块在使用时才会加载执行（实现了按需加载，而 AMD 不支持按需加载）。
  • 目录结构

前言：

使用 sea.js


<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>




//定义模块module1
define((require, exports, module) => {

  let string = 'I am a string';
  const readString = () => 'module1 show() ' + string;

  //向外暴露
  exports.readString = readString;
})




//定义模块module2
define((require, exports, module) => {
  exports.msg = "正是在下啊"
})




//定义模块module
define((require, exports, module) => {
  //引入依赖模块（同步）
  var module1 = require('./module1');
  console.log(module1.readString()) // module1 show() I am a string

  //引入依赖模块（异步）
  require.async('./module2', md2 => {
    console.log(`这是异步引入的:${md2.msg}`) //这是异步引入的:正是在下啊
  })
})




<!-- html文件使用module -->
<body>
<script>
  seajs.use('./modules/module')
</script>

四、ES6模块化

ES6 模块的设计思想倾向于静态化，使得在编译时即可确定模块的依赖关系以及输入输出的变量。相比之下，CommonJS 和 AMD 模块均需在运行时确定这些信息。 两个关键字 import和export

  • import 用于导入模块
  • export 用于导出模块

//mian.js
export default {
  showMsg() {
    console.log('hahahahahah')
  }
}
export const msg = "正是花好月圆时！"

//index.js
import module1 from "./module1"; //对应export default
module1.showMsg()
import { msg } from './module1'; //对应export
console.log(msg)

/*tips: 不要在html里使用<script type="module">
import ....., 有跨域问题，可以在vscode里下载一个插件，或者本地起服务都可以解决，就不赘述了。
</script>*/

到此这篇关于JavaScript 模块化详解的文章就介绍到这了,更多相关JavaScript 模块化内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

JavaScript新手常犯的编码错误与最佳实践指南

2026-11-04 22:12:38