文章目录
前言
JavaScript 目前有四种模块规范:CMD、COMMONJS、AMD 和 ESM。
CMD 是 JavaScript 最早的模块规范,它使用 require 函数来导入模块。CMD 模块是 JavaScript 最早的模块规范,但它存在一些缺陷,比如模块的导入顺序不受控制,模块的依赖关系无法被管理,等等。
COMMONJS 是 JavaScript 模块的另一种,它使用 require 函数来导入模块。COMMONJS 模块在解决
CMD
模块的缺陷方面做了很多工作,比如它提供了模块的导入顺序控制、模块的依赖关系管理等功能。不适合浏览器环境,读取模块是同步操作,适合nodejs环境。
AMD 是 JavaScript 模块的另一种,它使用 requirejs 库来导入模块。AMD 模块在解决 CMD 模块和 COMMONJS 模块的缺陷方面做了很多工作,比如它提供了模块的导入顺序控制、模块的依赖关系管理、模块的缓存等功能。
可以异步导入模块,适合浏览器环境。
目前,ESM 是 JavaScript 模块的最新规范,它在解决 CMD 模块、COMMONJS 模块和 AMD 模块的缺陷方面做了很多工作,比如它提供了模块的导入顺序控制、模块的依赖关系管理、模块的缓存等功能。
以下是 ESM、CMD、COMMONJS 和 AMD 模块的对比表:
模块规范 | 导入函数 | 导入顺序 | 依赖关系管理 | 缓存 |
---|---|---|---|---|
ESM | import | 可控制 | 可管理 | 可缓存 |
CMD | require | 不可控制 | 不可管理 | 不可缓存 |
COMMONJS | require | 可控制 | 可管理 | 不可缓存 |
AMD | requirejs | 可控制 | 可管理 | 可缓存 |
除了上述提到的四种模块规范
(CMD、COMMONJS、AMD 和 ESM),还有一些其他的模块化方案,尽管它们在 JavaScript 社区中的使用较少或者不被广泛认可。
一些其他的模块化方案
包括:
-
SystemJS:SystemJS 是一个通用的模块加载器,它可以在浏览器中加载不同模块规范的模块,包括 AMD、COMMONJS、ESM 等。
-
UMD:UMD(Universal Module Definition)是一种兼容多种模块规范的通用模块化方案,它可以在不同的环境中运行,包括浏览器和 Node.js。
判断浏览器环境用AMD模块规范,是nodejs环境用COMMONJS规范。
-
IIFE:IIFE(Immediately Invoked Function Expression)是一种将模块封装在立即执行的函数表达式中的模式,通过这种方式,模块的作用域可以被限制在函数内部,避免了全局命名冲突。
需要注意的是,尽管有多种模块化方案可供选择,但在实际开发中,ESM(ES6 模块)已成为 JavaScript 模块化的主流标准,得到了广泛的支持和推广。
CommonJS 模块规范 (跟CMD差不多)
CommonJS 模块是 JavaScript 最早的模块规范,它使用 require 函数来导入模块。CommonJS 模块的导入和导出方式如下:
主要是用于后端nodejs开发,前端类似的vue项目也可以引入本地文件...
// 导入模块
const module = require('./module');
// 导出模块方式1
module.exports = {
value: 123,
fn:()=>{console.log('fn...');}
};
// 导出模块方式2
exports.value = 123;
exports.fn = function(){console.log('fn...');}
总结:exports是一个对象处理了。
AMD 模块规范
AMD 模块是 AMD 规范定义的模块,它使用 requirejs 库来导入模块。AMD 模块的导入和导出方式如下:
// 导入模块
requirejs(['./module'], function(module) {
console.log(module.value);
});
// 导出模块
define(['./module'], function(module) {
return {
value: 123
};
});
ESM 模块规范
在 ECMAScript 模块中,有多种导出和引入的写法,下面是一些常见的写法:
1. 默认操作
1.1 默认导出(Default Export)
- 导出单个默认值:
export default value;
- 导出多个默认值(使用对象字面量):
export default {
key1: value1,
key2: value2
};
1.2 默认导入(Default Import)
- 导入默认导出的模块:
import moduleName from './module';
2. 命名操作
2.1 命名导出(Named Export)
- 导出单个变量、函数或常量:
export const variableName = value;
export function functionName() { ... }
export class ClassName { ... }
- 导出多个变量、函数或常量(使用对象字面量):
export {
variable1,
variable2,
functionName,
ClassName
};
2.2 命名导入(Named Import)
- 导入指定的变量、函数或常量:
import { variableName, functionName, ClassName } from './module';
- 导入所有命名导出的模块(使用对象字面量):
import * as module from './module';
以上是一些常见的导出和引入写法,你可以根据需要选择适合的方式。
2.3 额外写法(export *)
一般模块的引用都是如上,不是导出自身模块
的变量、函数或常量,就是引入别的模块
的变量、函数或常量。
但是也有特殊的,比如导出别的模块
。
下方给出了vue源码中util 导出的写法。
// node_modules\vue\src\core\util\index.ts
export * from 'shared/util'
export * from './lang'
export * from './env'
export * from './options'
export * from './debug'
export * from './props'
export * from './error'
export * from './next-tick'
export { defineReactive } from '../observer/index'
UMD 模块方案
并不是模块规范,而是一个解决方案~
1. 模块导出
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['dependency'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory(require('dependency'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.dependency);
}
}(this, function (dependency) {
// The actual module
function MyModule() {
//...
}
return MyModule;
}));
2. AMD环境导入
require(['myModule'], function(myModule) {
// 使用myModule
});
3. COMMONJS环境导入
var myModule = require('myModule');
4. 其他未知环境导入
放在全局上,比如浏览器window对象上
window.myModule = {
// 模块内容
};