web前端面试-- 模块化的几种规范CMD、COMMONJS、AMD、ESM以及UMD模块化解决方案

前言

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 社区中的使用较少或者不被广泛认可。

一些其他的模块化方案包括：

1. SystemJS：SystemJS 是一个通用的模块加载器，它可以在浏览器中加载不同模块规范的模块，包括 AMD、COMMONJS、ESM 等。

2. UMD：UMD（Universal Module Definition）是一种兼容多种模块规范的通用模块化方案，它可以在不同的环境中运行，包括浏览器和 Node.js。 判断浏览器环境用AMD模块规范，是nodejs环境用COMMONJS规范。

3. 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';

以上是一些常见的导出和引入写法，你可以根据需要选择适合的方式。

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 = {  
    // 模块内容  
};