补充知识点:
模块规范
(及格式)
当下主流模块规范:CommonJS
、AMD
、UMD
、CMD
、ESM
模块规范
1. CommonJS
维度 | 内容 |
---|---|
特点 | 采用同步加载模块,适合在服务器端 使用(如Node.js )。使用 require 导入模块,使用module.exports 导出模块。 |
场景 | 主要用于Node.js 环境,适合后端开发。 |
优点 | 简单易懂,适合服务器端的模块化。 |
缺点 | 不支持异步加载,不适合浏览器环境。 |
- 示例:
// module.js - 定义模块
const hello = () => 'Hello, world!';
module.exports = hello;// main.js - 加载模块
const hello = require('./module');
console.log(hello()); // 输出: Hello, world!
2. AMD
全称:Asynchronous Module Definition -> 异步模块定义
维度 | 内容 |
---|---|
特点 | 异步加载 模块,适合浏览器环境 。使用 define 定义模块,使用require 加载模块。 |
场景 | 适用于需要异步加载 的浏览器项目 。 |
优点 | 支持异步加载,提高性能。 |
缺点 | 语法较复杂,配置较多。 |
- 示例:
// module.js - 定义模块
define([], function() {return function() {console.log('Hello from AMD!');};
});// main.js - 加载模块
require(['module'], function(myModule) {myModule();
});
3. UMD
全称:Universal Module Definition -> 通用模块定义
维度 | 内容 |
---|---|
特点 | 结合了CommonJS 和AMD ,支持多种环境(浏览器 、Node.js )。使用 (function (root, factory) {...})(this, factory) 模式。 |
场景 | 用于库 和框架 ,可以在多种环境中使用。 |
优点 | 灵活,兼容性强。 |
缺点 | 代码较冗长,增加了复杂性。 |
- 示例:
// myLibrary.js
(function (root, factory) {if (typeof define === 'function' && define.amd) {define([], factory);} else if (typeof exports === 'object') {module.exports = factory();} else {root.myLibrary = factory();}
}(this, function () {return function() {console.log('Hello from UMD!');};
}));// 使用
const myLibrary = require('./myLibrary');
myLibrary();
4. CMD
全称:Common Module Definition -> 公共模块定义
维度 | 内容 |
---|---|
特点 | 异步加载,灵感来自AMD ,但更注重依赖的执行顺序。使用 define 定义模块,采用惰性加载 。 |
场景 | 主要用于Sea.js 框架的项目。 |
优点 | 支持惰性加载,依赖处理更灵活。 |
缺点 | 生态相对较小,社区支持有限。 |
- 示例:
// module.js
define(function(require, exports, module) {module.exports = function() {console.log('Hello from CMD!');};
});// main.js
define(function(require) {var myModule = require('./module');myModule();
});
5. ESM (ES Modules)
ES6 module
和ES Modules
实际上是指同一种模块化机制
ES6 Module
: 是对ECMAScript 2015
(也称为ES6
)中引入的模块系统的简称
。它包含了import
和export
语法,用于实现模块化。ES Modules
: 是对ES6 Module
的正式称呼
,通常用于指代现代JavaScript
中的模块系统。它代表的是一组与模块相关的规范和功能。
维度 | 内容 |
---|---|
特点 | 原生支持模块化,使用import 和export 语法。支持 异步加载 ,浏览器原生支持 。 |
场景 | 现代JavaScript 项目,浏览器 和Node.js 都支持。 |
优点 | 语法简洁,支持静态分析,性能优越。 |
缺点 | 需要较新版本的浏览器 或Node.js ,旧环境不支持 。 |
- 示例:
// module.js
export function greet() {console.log('Hello from ES Modules!');
}// main.js
import { greet } from './module.js';
greet();