前端模块化CommonJS、AMD、CMD、ES6

在前端开发中,模块化是一种重要的代码组织方式,它有助于将复杂的代码拆分成可管理的小块,提高代码的可维护性和可重用性。CommonJS、AMD(异步模块定义)和CMD(通用模块定义)是三种不同的模块规范,它们在定义模块、加载模块以及依赖管理等方面存在差异,并适用于不同的场景。

CommonJS、AMD、CMD 

一、CommonJS

1. 定义与特点

  • CommonJS是服务器端JavaScript模块化的规范,Node.js是这种规范的实现
  • 一个单独的文件就是一个模块,模块通过module.exports导出接口,通过require()导入其他模块。
  • 加载模块是同步的,即只有加载完成才能执行后面的操作

2. 适用场景

  • 主要用于服务器端JavaScript的模块化开发,如Node.js环境。
  • 适用于模块之间依赖关系明确,且对加载速度要求不高的场景。

二、AMD

1. 定义与特点

  • AMD是RequireJS在推广过程中对模块定义的规范化产出,主要用于浏览器端
  • 使用define()函数定义模块,可以异步加载模块,不会阻塞后续代码的执行。
  • 允许指定回调函数,当所有依赖的模块都加载完成后,会执行这个回调函数

2. 适用场景

  • 适用于浏览器端的大型Web应用,特别是那些需要按需加载模块以减少初始加载时间的场景。
  • 当模块之间的依赖关系复杂,且需要优化加载性能时,AMD是一个不错的选择。

三、CMD

1. 定义与特点

  • CMD是SeaJS在推广过程中对模块定义的规范化产出,也主要用于浏览器端。
  • 与AMD类似,CMD也使用define()函数定义模块,但CMD推崇依赖就近和延迟执行(懒加载)。
  • 只有在真正需要某个模块时,才会去加载和执行它

2. 适用场景

  • 适用于对加载性能有较高要求的浏览器端应用。
  • 当模块数量较多,且大多数模块只在特定条件下才会被使用时,CMD的懒加载特性可以显著减少不必要的加载时间。
CommonJSAMDCMD
定义服务器端JavaScript模块规范浏览器端Javascript模块规范浏览器端JavaScript模块规范
实现Node.jsRequireJSSeaJS
加载方式同步加载异步加载延迟加载(懒加载)
适用场景服务端开发浏览器端大型Web应用,需要优化加载性能浏览器端应用,模块数量多且大多只在特定条件下使用
特点模块定义简单直接依赖前置,异步加载依赖就近,延迟执行

综上所述,CommonJS、AMD和CMD各有其特点和适用场景。在选择模块规范时,需要根据项目的具体需求和目标来决定。例如,对于服务器端JavaScript开发,通常会选择CommonJS;而对于浏览器端的大型Web应用,则可能会考虑使用AMD或CMD来优化加载性能和减少初始加载时间。

ES6(ECMAScript 6)中的模块化语法主要通过importexport两个关键字来实现,这一机制极大地增强了JavaScript代码的组织性、可维护性和可重用性。以下是对ES6模块化语法的详细解析及其优势:

ES6模块化语法

export

export关键字用于规定模块的对外接口,即定义哪些变量、函数、类等可以被其他模块通过import语句导入。其基本用法包括:

直接导出:在模块文件内部,使用export关键字直接导出变量、函数、类等。例如:

export const PI = 3.14;  
export function add(x, y) {  return x + y;  
}

统一导出:使用花括号{}将多个导出项组织在一起。例如: 

const PI = 3.14;  
function add(x, y) {  return x + y;  
}  
export { PI, add };

 默认导出:每个模块只能有一个默认导出,使用export default关键字。默认导出的内容在导入时可以使用任意名称。例如:

function createCircle(radius) {  // ...  
}  
export default createCircle;
import

import关键字用于从其他模块导入功能,即获取其他模块通过export导出的变量、函数、类等。其基本用法包括:

命名导入使用花括号{}明确指定要导入的导出项及其名称。例如

import { PI, add } from './math.js';

 默认导入:使用任意名称导入模块的默认导出项。例如:

import Circle from './circle.js'

整体导入:使用* as语法导入模块的所有导出项,并为它们指定一个命名空间。例如:

import * as math from './math.js';  
console.log(math.PI);  
console.log(math.add(1, 2));

ES6模块化的优势

  1. 显式依赖:ES6模块通过importexport显式地声明了模块之间的依赖关系,这有助于工具进行静态分析,优化加载策略。

  2. 编译时加载:与CommonJS等运行时加载的模块系统不同,ES6模块支持编译时加载这意味着在代码执行之前,模块之间的依赖关系已经确定,有助于提升代码的执行效率

  3. 更好的封装:ES6模块将每个文件视为一个独立的模块,模块内部的所有变量和函数默认都是私有的,只有通过export显式导出的内容才能被其他模块访问,这有助于实现更好的封装和代码隐藏。

  4. 更简洁的语法importexport的语法简洁明了,易于理解和使用,相比CommonJS的requiremodule.exports更加直观。

  5. 支持静态分析:由于ES6模块是静态的,工具可以在不执行代码的情况下分析模块的依赖关系,这有助于实现诸如代码分割、懒加载等优化策略

  6. 支持Tree Shaking:在打包工具(如Webpack、Rollup等)的支持下,ES6模块可以实现Tree Shaking,即自动移除未被引用的代码,从而减小最终打包文件的大小

综上所述,ES6模块化语法通过importexport提供了强大的模块定义和导入功能,不仅提升了代码的组织性和可维护性,还带来了编译时加载、更好的封装、更简洁的语法以及支持静态分析和Tree Shaking等优势。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/874786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《昇思 25 天学习打卡营第 19 天 | 生成式对抗网络(GAN)实践指南 》

《昇思 25 天学习打卡营第 19 天 | 生成式对抗网络(GAN)实践指南 》 活动地址:https://xihe.mindspore.cn/events/mindspore-training-camp 签名:Sam9029 GAN 模型概述 生成式对抗网络(GAN)是一种前沿的无…

leetcode-101. 对称二叉树

题目描述 给你一个二叉树的根节点 root , 检查它是否轴对称。 示例 1: 输入:root [1,2,2,3,4,4,3] 输出:true示例 2: 输入:root [1,2,2,null,3,null,3] 输出:false 思路 1) 如果同时root1…

【c++刷题笔记-单调栈】day48: 739. 每日温度 、496.下一个更大元素 I 、503.下一个更大元素II

739. 每日温度 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;使用单调栈遍历&#xff0c;循环找栈中比栈顶数小的就出栈&#xff0c;并且记录值。比栈顶数大的就入栈&#xff0c;形成单调递增的栈 class Solution { public:vector<int> dailyTemperatures(…

ES6-11(第一部分)

ES6-11&#xff08;第一部分&#xff09; ECMA ECMA是一个组织ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言Ecma国际指定了很多标准&#xff0c;ECMA-262只是其中之一TC39定期开会维护ECMA-262 ES6 let: let 是 ES6 中引入的一种新的变量声明方式&#xff0…

【调试笔记-20240723-Linux-gitee 仓库同步 github 仓库,并保持所有访问链接调整为指向 gitee 仓库的 URL】

调试笔记-系列文章目录 调试笔记-20240723-Linux-gitee 仓库同步 github 仓库&#xff0c;并保持所有访问链接调整为指向 gitee 仓库的 URL 文章目录 调试笔记-系列文章目录调试笔记-20240723-Linux-gitee 仓库同步 github 仓库&#xff0c;并保持所有访问链接调整为指向 gite…

Langchain: 语言学习的新篇章

在当今全球化的世界中&#xff0c;语言学习已成为许多人追求的目标。Langchain是一种新兴的语言学习平台&#xff0c;它利用最新的技术&#xff0c;为用户提供了一个全新的语言学习体验。本文将介绍Langchain的基本概念、核心特性、学习方法以及如何通过Langchain提高语言学习效…

Ubuntu20.04版本升级openssh9.8p1方法

一、问题描述&#xff1a; 8.5p1 和 9.7p1 之间的openssh版本漏洞可能会导致linux系统以root身份进行RCE&#xff0c;所以需安装最新版本 二、解决方法&#xff1a; 将当前openssh版本升级到最新的版本即openssh-9.8p1版本&#xff0c;OpenSSL大版本升级且OpenSSH有新稳定版本…

微调大型语言模型 (LLM) 和 RAG 的区别、优势和劣势

本篇文章有ChatGPT生成&#xff0c;觉得说的有理&#xff0c;给予刊登。 微调大型语言模型 描述&#xff1a; 微调是指在一个预训练的语言模型基础上&#xff0c;使用特定任务或领域的特定数据集进行进一步训练。这一过程会更新模型的权重&#xff0c;以提高其在新数据集上…

Unity Shader入门精要——笔记

第1篇 基础篇 第2章&#xff1a;渲染流水线 GPU流水线 顶点数据–> 几何阶段&#xff1a;&#xff08;顶点着色器–> 曲面细分着色器–>几何着色器–>裁剪–>屏幕映射&#xff09;–>光栅化阶段&#xff08;三角形设置–>三角形遍历–>片元着色器–…

Zabbix监控应用

一.监控tomcat 1.在tomcat服务器上安装zabbix-agent服务 [rootnode2 etc]#vim zabbix_agentd.conf 94 Server192.168.240.13 #指向当前zabbix server ##### Passive checks related #被动检查相关配置### Option: ListenPort ListenPort10050 #监听端口 默认的无需修改11…

SPF配置教程:如何安全构建邮件发送策略?

SPF配置教程的步骤详解&#xff01;SPF记录配置方法策略有哪些&#xff1f; SPF通过允许域名所有者指定哪些主机可以代表该域发送邮件&#xff0c;从而减少电子邮件欺诈和垃圾邮件的风险。AokSend将详细介绍SPF配置教程&#xff0c;并指导您如何安全地构建邮件发送策略。 SPF…

《白话机器学习的数学》第4章——评估

4.1模型评估 1.由于像多重回归这样的问题会导致无法在图上展示&#xff0c;所以需要能够够定量地表示机器学习模型的精度。 4.2交叉验证 4.2.1回归问题的验证 1.把获取的全部训练数据分成两份&#xff1a;一份用于测试&#xff0c;一份用于训练。然后用前者来评估模型。 一般…

C# 数组常用遍历方式

// 假设数组Point[] points new Point[2];// 第一种遍历 forfor (int i 0; i < points.Length; i){Point p points[i];Console.WriteLine($"X{p.X},y{p.Y}");}// 第二种遍历 foreachforeach (Point p in points){Console.WriteLine($"X{p.X},y{p.Y}"…

TCP三次握手和四次挥手的理解

三次握手 第一次握手&#xff1a; 客户端发出 请求报文其中SYN应1&#xff0c;选择一个序列号x 第二次握手&#xff1a; 服务端接收到之后回复 确认报文&#xff0c;其中SYN应1&#xff0c;ACK1&#xff0c;确认号是x1&#xff0c;同时为自己初始化序列号y 第三次握手&…

spring —— AOP(前置通知)

一、pom 中需要增加的依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-aop</artifactId><version>6.0.2</version> </dependency> <dependency><groupId>org.springframework</g…

Hadoop架构

一、案列分析 1.1案例概述 现在已经进入了大数据(Big Data)时代&#xff0c;数以万计用户的互联网服务时时刻刻都在产生大量的交互&#xff0c;要处理的数据量实在是太大了&#xff0c;以传统的数据库技术等其他手段根本无法应对数据处理的实时性、有效性的需求。HDFS顺应时代…

ubuntu22.04,AX101网卡,打不开蓝牙

安装完ubuntu 22.04后&#xff0c;发现蓝牙可以识别&#xff0c;但是打不开。查看/var/log/dmesg日志&#xff1a; [ 2.587972] kernel: Bluetooth: hci0: Failed to load Intel firmware file intel/ibt-1040-1050.sfi (-2) [ 2.589252] kernel: Bluetooth: hci0: Fail…

Linux(CentOS)的“应用商城” —— yum

Linux&#xff08;CentOS&#xff09;的“应用商城” —— yum 关于 yum 和软件包Linux 系统&#xff08;CentOS&#xff09;的生态yum 相关操作yum 本地配置yum 安装 lrzsz.x86_64 关于 yum 和软件包 首先 yum 是软件下载安装管理的客户端&#xff0c;类似各种手机里的“应用…

WEB前端10- Fetch API(同步/异步/跨域处理)

Fetch API Fetch API 可以用来获取远程数据&#xff0c;用于在 Web 应用程序中发起和处理 HTTP 请求。它基于 Promise&#xff0c;提供了一种简单而强大的方式来处理网络通信&#xff0c;替代了传统的 XMLHttpRequest。 Promise对象 Promise 对象是 JavaScript 中处理异步操…

阿里云OSS对象存储的项目实战操作

目录 一.什么是阿里云OSS&#xff1f; 二.阿里云OSS的使用&#xff1a; 1.导入依赖到 pom.xml 配置文件&#xff1a; 2.在application.yml配置文件中配置OSS的相关信息&#xff1a; 3.在properties包下创建OSS的配置属性类来封装配置文件的配置项&#xff1a; 4.在utils包…