在前端开发中，模块化是一种重要的代码组织方式，它有助于将复杂的代码拆分成可管理的小块，提高代码的可维护性和可重用性。CommonJS、AMD（异步模块定义）和CMD（通用模块定义）是三种不同的模块规范，它们在定义模块、加载模块以及依赖管理等方面存在差异，并适用于不同的场景。
CommonJS、AMD、CMD
一、CommonJS
1. 定义与特点
- CommonJS是服务器端JavaScript模块化的规范，Node.js是这种规范的实现。
- 一个单独的文件就是一个模块，模块通过
module.exports导出接口，通过require()导入其他模块。 - 加载模块是同步的，即只有加载完成才能执行后面的操作。
2. 适用场景
- 主要用于服务器端JavaScript的模块化开发，如Node.js环境。
- 适用于模块之间依赖关系明确，且对加载速度要求不高的场景。
//导出
//module.exports
// math.js
module.exports = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
}
};
//exports，不能直接给exports赋值一个新的对象
// math.js
exports.multiply = function(a, b) {
return a * b;
};
exports.divide = function(a, b) {
if (b === 0) {
throw new Error('Cannot divide by zero');
}
return a / b;
};
------------------------------------------------------
//引入
// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 输出: 5
console.log(math.multiply(4, 5)); // 输出: 20二、AMD
1. 定义与特点
- AMD是RequireJS在推广过程中对模块定义的规范化产出，主要用于浏览器端。
- 使用
define()函数定义模块，可以异步加载模块，不会阻塞后续代码的执行。 - 允许指定回调函数，当所有依赖的模块都加载完成后，会执行这个回调函数。
2. 适用场景
- 适用于浏览器端的大型Web应用，特别是那些需要按需加载模块以减少初始加载时间的场景。
- 当模块之间的依赖关系复杂，且需要优化加载性能时，AMD是一个不错的选择。
//引入
//data-main属性指定主模块文件的路径。告诉Require.js在加载完自身后，应该加载哪个模块作为入口点。
<!DOCTYPE html>
<html>
<head>
<title>Require.js Example</title>
<script data-main="js/main" src="path/to/require.js"></script>
</head>
<body>
<h1>Hello, Require.js!</h1>
</body>
</html>
//在main.js中配置require.js
require.config({
baseUrl: 'js', // 设置基础路径为'js'文件夹
paths: {
'jquery': 'https://code.jquery.com/jquery-3.6.0.min', // 设置jQuery的CDN路径
'app': 'app/main' // 将'app/main'映射为'app'
'cal':"module/cal.js"
}
});
//定义和加载模块
//module/cal.js
define([],function(){
var module={
add:function(a,b){
return a+b;
}
subtract:function(a,b){
return a-b;
}
}
return module;
})
//main.js
define(['cal'],function(cal){
console.log(cal.add(1,2))
})三、CMD
1. 定义与特点
- CMD是SeaJS在推广过程中对模块定义的规范化产出，也主要用于浏览器端。
- 与AMD类似，CMD也使用
define()函数定义模块，但CMD推崇依赖就近和延迟执行（懒加载）。 - 只有在真正需要某个模块时，才会去加载和执行它。
2. 适用场景
- 适用于对加载性能有较高要求的浏览器端应用。
- 当模块数量较多，且大多数模块只在特定条件下才会被使用时，CMD的懒加载特性可以显著减少不必要的加载时间。
//index.js
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
// 通过 require 引入依赖，获取模块 a 的接口
var a = require('./a');
// 调用模块 a 的方法
a.doSomething();
// 通过 exports 对外提供接口foo 属性
exports.foo = 'bar';
// 对外提供 doSomething 方法
exports.doSomething = function() {};
// 错误用法！！!
exports = {
foo: 'bar',
doSomething: function() {}
};
// 正确写法，通过module.exports提供整个接口
module.exports = {
foo: 'bar',
doSomething: function() {}
};
});
//使用
//直接使用 script 标签同步引入sea.js文件后，就可用seajs.use(id, callback?)在页面中加载模块了！
<script type="text/javascript" src="../gb/sea.js"></script>
<script>
seajs.use('./index.js');
</script>
| CommonJS | AMD | CMD | |
| 定义 | 服务器端JavaScript模块规范 | 浏览器端Javascript模块规范 | 浏览器端JavaScript模块规范 |
| 实现 | Node.js | RequireJS | SeaJS |
| 加载方式 | 同步加载 | 异步加载 | 延迟加载（懒加载） |
| 适用场景 | 服务端开发 | 浏览器端大型Web应用，需要优化加载性能 | 浏览器端应用，模块数量多且大多只在特定条件下使用 |
| 特点 | 模块定义简单直接 | 依赖前置，异步加载 | 依赖就近，延迟执行 |
综上所述，CommonJS、AMD和CMD各有其特点和适用场景。在选择模块规范时，需要根据项目的具体需求和目标来决定。例如，对于服务器端JavaScript开发，通常会选择CommonJS；而对于浏览器端的大型Web应用，则可能会考虑使用AMD或CMD来优化加载性能和减少初始加载时间。
ES6（ECMAScript 6）中的模块化语法主要通过import和export两个关键字来实现，这一机制极大地增强了JavaScript代码的组织性、可维护性和可重用性。以下是对ES6模块化语法的详细解析及其优势：
ES6模块化语法
export
export关键字用于规定模块的对外接口，即定义哪些变量、函数、类等可以被其他模块通过import语句导入。其基本用法包括：
直接导出：在模块文件内部，使用export关键字直接导出变量、函数、类等。例如：
export const PI = 3.14;
export function add(x, y) {
return x + y;
}统一导出：使用花括号{}将多个导出项组织在一起。例如：
const PI = 3.14;
function add(x, y) {
return x + y;
}
export { PI, add }; 默认导出：每个模块只能有一个默认导出，使用export default关键字。默认导出的内容在导入时可以使用任意名称。例如：
function createCircle(radius) {
// ...
}
export default createCircle;import
import关键字用于从其他模块导入功能，即获取其他模块通过export导出的变量、函数、类等。其基本用法包括：
命名导入：使用花括号{}明确指定要导入的导出项及其名称。例如
import { PI, add } from './math.js';默认导入：使用任意名称导入模块的默认导出项。例如：
import Circle from './circle.js'整体导入：使用* as语法导入模块的所有导出项，并为它们指定一个命名空间。例如：
import * as math from './math.js';
console.log(math.PI);
console.log(math.add(1, 2));ES6模块化的优势
-
显式依赖：ES6模块通过
import和export显式地声明了模块之间的依赖关系，这有助于工具进行静态分析，优化加载策略。 -
编译时加载：与CommonJS等运行时加载的模块系统不同，ES6模块支持编译时加载，这意味着在代码执行之前，模块之间的依赖关系已经确定，有助于提升代码的执行效率。
-
更好的封装：ES6模块将每个文件视为一个独立的模块，模块内部的所有变量和函数默认都是私有的，只有通过
export显式导出的内容才能被其他模块访问，这有助于实现更好的封装和代码隐藏。 -
更简洁的语法：
import和export的语法简洁明了，易于理解和使用，相比CommonJS的require和module.exports更加直观。 -
支持静态分析：由于ES6模块是静态的，工具可以在不执行代码的情况下分析模块的依赖关系，这有助于实现诸如代码分割、懒加载等优化策略。
-
支持Tree Shaking：在打包工具（如Webpack、Rollup等）的支持下，ES6模块可以实现Tree Shaking，即自动移除未被引用的代码，从而减小最终打包文件的大小。
综上所述，ES6模块化语法通过
import和export提供了强大的模块定义和导入功能，不仅提升了代码的组织性和可维护性，还带来了编译时加载、更好的封装、更简洁的语法以及支持静态分析和Tree Shaking等优势。
扫一扫
2472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
