JS模块化:CommonJS, AMD, CMD, ES6 Module详解_javascript模块化

Commonjs、AMD、CMD 和 es6 Module 是 javaScript 四大模块化规范。CommonJS 用于服务端,同步加载,通过 require 和 module.exports 实现;AMD 面向浏览器,异步加载,依赖前置,使用 define 定义模块;CMD 提倡就近依赖与延迟执行,由 SeaJS 推广;ES6 Module 是官方标准,支持静态分析与 tree-shaking,使用 import 和 export,已成为现代开发首选。当前推荐新项目采用 ES6 Module,而理解其他规范有助于维护旧代码和构建工具配置。

JS模块化:CommonJS, AMD, CMD, ES6 Module详解_javascript模块化

javascript 模块化是现代前端开发的基础。随着项目规模扩大,代码组织变得尤为重要,模块化帮助开发者将功能拆分、解耦、复用。下面详细介绍四种主流的 JS 模块化规范:CommonJS、AMD、CMD 和 ES6 Module,讲清它们的设计理念、使用方式和适用场景。

CommonJS:服务端模块化的代表

CommonJS 是早期为了解决服务端 JavaScript(如 Node.js)模块化问题而提出的规范。它采用同步加载模块的方式,适合服务器环境,因为文件都存在本地磁盘上,读取速度快。

核心特点:

  • require 引入模块
  • module.exportsexports 导出内容
  • 模块是运行时加载,同步执行

示例:

// math.js function add(a, b) {   return a + b; } module.exports = { add }; <p>// app.js const { add } = require('./math'); console.log(add(2, 3)); // 5 

CommonJS 的缺点是不适用于浏览器环境,因为同步加载会阻塞页面渲染。

立即学习Java免费学习笔记(深入)”;

AMD:异步加载,面向浏览器

AMD(Asynchronous Module Definition)由 RequireJS 推广,专为浏览器设计,支持异步加载模块,避免阻塞页面。

核心特点:

  • 使用 define 定义模块
  • 依赖前置,提前声明所有依赖
  • 异步加载,适合网络环境

示例:

// math.js define([], function() {   function multiply(a, b) {     return a * b;   }   return { multiply }; }); <p>// main.js define(['./math'], function(math) { console.log(math.multiply(3, 4)); // 12 }); 

AMD 虽解决了浏览器异步加载问题,但写法相对复杂,依赖前置有时不够灵活。

JS模块化:CommonJS, AMD, CMD, ES6 Module详解_javascript模块化

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

JS模块化:CommonJS, AMD, CMD, ES6 Module详解_javascript模块化 56

查看详情 JS模块化:CommonJS, AMD, CMD, ES6 Module详解_javascript模块化

CMD:按需加载,推崇懒执行

CMD(Common Module Definition)由 SeaJS 提出,融合了 CommonJS 和 AMD 的优点,强调“就近依赖”和“延迟执行”。

核心特点:

  • 使用 define 定义模块
  • 依赖在需要时才加载,更贴近 CommonJS 风格
  • 模块在调用时才执行,非定义时

示例:

define(function(require, exports, module) {   // 只在需要时引入   const $ = require('jquery');   $('#app').html('CMD works!'); }); 

CMD 更符合直觉,但因 SeaJS 社区影响力下降,现已较少使用。

ES6 Module:官方标准,现代开发首选

ES6 Module 是 ecmascript 2015 正式引入的模块系统,已成为现代 JavaScript 的标准。它支持静态分析、tree-shaking,并被浏览器和构建工具广泛支持。

核心特点:

  • 使用 importexport 语法
  • 静态编译,支持编译时优化
  • 异步加载(浏览器中),也可配合打包工具使用

示例:

// math.js export const add = (a, b) => a + b; export const PI = 3.14; <p>// 或默认导出 // export default function() { ... }</p><p>// app.js import { add, PI } from './math.js'; console.log(add(2, 3), PI); // 5 3.14 

ES6 Module 支持动态导入 import() 实现按需加载,兼顾性能与灵活性。

基本上就这些。CommonJS 仍在 node.js 中广泛使用;AMD/CMD 属于历史过渡方案;ES6 Module 是当前和未来的标准,推荐新项目统一采用。理解这些模块化方案,有助于阅读旧代码、配置构建工具,以及深入掌握 JavaScript 生态。

以上就是JS模块化:CommonJS, AMD, CMD, ES6 Module详解_

上一篇
下一篇
text=ZqhQzanResources