CommonJS
通过 require 来引入模块,通过 module.exports 定义模块的输出接口。是服务器端(Node.js)的解决方案,它是以同步的方式来引入模块的,因为在服务端文件都存储在本地磁盘,所以读取非常快,所以以同步的方式加载没有问题。但如果是在浏览器端,由于模块的加载是使用网络请求,因此使用异步加载的方式更加合适。
AMD
通过定义模块和依赖关系来实现模块的异步加载和执行。它采用了回调函数的方式来处理模块加载完成后的逻辑 。是浏览器端的解决方案。
- 使用 define()来定义模块。define 函数接受三个参数:模块的名称、依赖数组和工厂函数。
- 使用 require()来加载并使用模块。require 函数接受两个参数:依赖数组和回调函数
define('math', ['jquery'], function($) {
// 在模块内部可以使用传入的依赖模块
return {
add: function(a, b) {
return a + b;
},
multiply: function(a, b) {
return a * b;
}
};
});
require(['math'], function(math) {
console.log(math.add(2, 3)); // 输出:5
});
CMD
CMD 方案的核心思想是延迟执行,CMD 方案在模块定义时不会立即执行模块的代码,而是等到模块被调用时再执行。是浏览器端的解决方案。
- 使用define() 来定义模块
- 使用require() 来加载模块
define(function(require, exports, module) {
var $ = require('jquery'); // 加载依赖模块
// 在模块内部可以使用传入的依赖模块
exports.add = function(a, b) {
return a + b;
};
exports.multiply = function(a, b) {
return a * b;
};
});
define(function(require) {
var math = require('math'); // 加载模块
console.log(math.add(2, 3)); // 输出:5
});
ES6模块
ES6导入和导出都是静态的,意味着它们在代码解析阶段就确定了,这也意味着 ES6 模块的加载是同步的,而不是异步的。可以用于在浏览器端和服务器端(Node.js) 进行模块化开发。
- import 和 export 关键字用于定义模块的导入和导出。
- 导入和导出的都是模块中具体的变量、函数或类,而不是整个模块。
- 模块中的变量具有封闭性,不会随意污染全局变量。
- 所有导入的模块都会被编译成一个静态结构,便于分析和优化。
// 导出 add 方法
export function add(a, b) {
return a + b;
}
// 导入并使用 "math" 模块
import { add } from './math.js';
console.log(add(2, 3)); // 输出:5
注意:在服务器端CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用