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

本文主要是介绍web前端面试-- 模块化的几种规范CMD、COMMONJS、AMD、ESM以及UMD模块化解决方案,export *的写法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • CommonJS 模块规范 (跟CMD差不多)
  • AMD 模块规范
  • ESM 模块规范
    • 1. 默认操作
      • 1.1 默认导出(Default Export)
      • 1.2 默认导入(Default Import)
    • 2. 命名操作
      • 2.1 命名导出(Named Export)
      • 2.2 命名导入(Named Import)
      • 2.3 额外写法(export *)
  • UMD 模块方案
    • 1. 模块导出
    • 2. AMD环境导入
    • 3. COMMONJS环境导入
    • 4. 其他未知环境导入

前言

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

这篇关于web前端面试-- 模块化的几种规范CMD、COMMONJS、AMD、ESM以及UMD模块化解决方案,export *的写法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/504084

相关文章

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

在Golang中实现定时任务的几种高效方法

《在Golang中实现定时任务的几种高效方法》本文将详细介绍在Golang中实现定时任务的几种高效方法,包括time包中的Ticker和Timer、第三方库cron的使用,以及基于channel和go... 目录背景介绍目的和范围预期读者文档结构概述术语表核心概念与联系故事引入核心概念解释核心概念之间的关系

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.