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

发布时间:2023年12月17日

前言

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 模块的对比表:

模块规范导入函数导入顺序依赖关系管理缓存
ESMimport可控制可管理可缓存
CMDrequire不可控制不可管理不可缓存
COMMONJSrequire可控制可管理不可缓存
AMDrequirejs可控制可管理可缓存

除了上述提到的四种模块规范(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';

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

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 = {  
    // 模块内容  
};
文章来源:https://blog.csdn.net/cs492934056/article/details/134976265
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。