常用的前端模块化标准总结

1、模块化标准出现以前使用的模块化方案:

1)文件划分: 将不同的模块定义在不同的文件中,然后使用时通过script标签引入这些文件

缺点:
  • 模块变量相当于是定义在全局的,容易造成变量名冲突(即不同模块存在相同名称的变量);
  • 模块之间的依赖关系和加载顺序不好管理;如果模块之间存在依赖关系,则在引入文件时需要手动调整,否则会出现运行错误
  • 如果引入了多个模块,则无法清楚知道某个变量来自哪个模块,需要逐个模块进行排查;

2)命名空间:

// module.a.js文件
window.moduleA = {data: 'A',...
}
// module.b.js文件
window.moduleB = {data: 'B',...
}
// html中访问模块变量
...
console.log(moduleA.data)
console.log(moduleB.data)
优点:
  • 解决了文件划分造成的全局变量命名冲突的问题;
  • 使用时能清楚知道某个变量来自哪个模块,方便开发调试

3)IIFE-立即执行函数,使变量私有化,只对外界暴露变量的访问入口

// module.a.js文件
(function () {// 模块A的私有成员,只能在当前模块内部访问,其他模块无法访问const data = 'moduleA'function method () {console.log(data + ' execute');}window.moduleA = {method}}
)()// module.b.js文件
(function () {const data = 'moduleB'function method () {console.log(data + ' execute');}window.moduleB = {method}}
)()// index.html文件
...
<body><script src="./js/module.a.js"></script><script src="./js/module.b.js"></script><script>// moduleA的私有成员,外界无法访问console.log(moduleA.data);  // undefinedmoduleB.method()  // moduleB execute</script>
</body>
优点:
  • 解决了全局变量命名冲突的问题
  • 能清楚知道使用的变量来自哪个模块,(即变量作用域清晰了)

总结:命令空间和IIFE均没有解决模块存在依赖关系时,模块加载顺序的问题、

2、主流的前端模块规范

1)CommonJs规范:

  • 使用module.exports导出模块;require()导入模块;
// module.a.js文件
const data = 'hello CommonJs'
function getData () {return data
}
// 导出模块
module.exports = {getData
}// main.js文件
const { getData } = require('./module.a')
console.log(getData())

在这里插入图片描述

特点
  • 同步加载模块;即模块加载是阻塞式的,需等待模块加载完才能执行后续操作;
  • 适用于服务器端;因为模块是在服务器本地无需进行网络IO,另外在服务启动时才会进行模块加载,而通常服务启动后就会一直运行,所以同步加载对服务的性能影响不大;但是在浏览器环境中,同步模块加载会造成浏览器JS解析过程的阻塞,导致页面加载速度缓慢;
  • 模块缓存,避免重复加载和执行

2)AMD模块规范(Asynchronous Module Definition)

// js/main.js文件// 使用define()加载依赖模块print.js,并定义一个新模块;也可使用require()加载依赖模块
define(['./js/print.js'], function (module) {// module:依赖项的导出内容module.print('AMD')  // print AMD
})// js/print.js文件
// 定义一个模块并导出
// define(array, callback): array-依赖项数组;callback-回调函数,接收依赖项的导出内容
define([], function () {return {print: function (msg) {console.log('print ' + msg);}}
})// index.html文件
...
<body><!-- 由于AMD没有得到浏览器的原生支持,所以使用AMD规范时,需要引入第三方库,requireJS --><!-- data-main="./js/main":指定主模块路径,标识main.js文件位于js目录下 --><script src="./lib/require.js" data-main="./js/main"></script>...
</body>

在这里插入图片描述

特点:

  • 异步加载模块,即模块加载时不会阻塞页面渲染
  • 未得到浏览器的原生支持,需要借助第三方库requireJS来实现
  • 代码书写和阅读稍显复杂,增加了开发人员的心智负担

同期出现的其他规范: CMD,UMD

  • CMD: 由淘宝出品的SeaJs实现,解决的问题与AMD类似;延迟执行和按需加载,即模块是在代码需要使用时才会加载执行,不会预先加载;
  • UMD:通用模块定义,兼容AMD和CommonJs的模块化方案,可以同时运行在浏览器和Node.js环境

3)ES模块(ES Module)

  • 由ECMAScript官方提出的模块化规范,已经得到现代浏览器的内置支持
  • 如果在html的script标签中加上type="module"属性,那么浏览器将按照ES的模块化规范加载和解析该脚本
  • 能够同时运行在浏览器端和Node.js环境中,拥有天然的跨平台能力
  • 使用 export 导出模块;import导入模块;
// ES模块在浏览器环境中运行
// module.a.js文件
// 使用export导出模块
const method = () => {console.log('Hello ES Module')
}
export {method
}// module.b.js文件
// 使用export default导出模块
const method = () => {console.log('Hello ES Module')
}
export default {method
}// main.js文件,引用模块
// 1、export语法导出时引入方式,可通过 as xx 给导入的方法起别名
import { method as methodA } from './module.a.js'
methodA()// 2、export default语法导出时引入方式
import B from './module.b.js'
B.method()// index.html文件
...
<body><!-- type="module" 在html中标识这个脚本文件是一个ES模块; --><script type="module" src="./js/main.js"></script>
</body>

在这里插入图片描述

// ES模块在Node.js环境中运行// package.json文件,添加type: "module"属性,使Node.js以ES规范解析模块
{"type": "module"...
}

在这里插入图片描述

优点:
  • 导入,导出语法简洁明了,代码可读性强
  • 静态分析和优化;模块的依赖关系在编译时就可以确定,这使得编译器可以进行更好的静态分析,并进行代码优化,打包和压缩等操作;
  • 模块的按需加载;
  • 可以同时运行在浏览器和Node.js环境
参考文章:
  • 《深入浅出 Vite》

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

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

相关文章

flink反压及解决思路和实操

1. 反压原因 反压其实就是 task 处理不过来&#xff0c;算子的 sub-task 需要处理的数据量 > 能够处理的数据量&#xff0c;比如&#xff1a; 当前某个 sub-task 只能处理 1w qps 的数据&#xff0c;但实际上到来 2w qps 的数据&#xff0c;但是实际只能处理 1w 条&#…

Qt信号和槽机制(什么是信号和槽,connect函数的形式,按钮的常用信号,QWidget的常用槽,自定义槽函数案例 点击按钮,输出文本)

一.什么是信号和槽 信号槽式Qt中的一个很重要的机制。信号槽实际上是观察者模式,当发生了感兴趣的事件&#xff0c;某一个操作就会被自动触发。当某个事件发生之后&#xff0c;比如按钮检测到自己被点击了一下&#xff0c;它就会发出一个信号。这种发出类似广播。如果有对象对…

ArcGIS学习(五)坐标系-2

3.不同基准面坐标系之间的转换 在上一关中,我们学习了ArcGIS中的投影(投影栅格)工具,并以"WGS1984地理坐标系与WGS1984的UTM投影坐标系的转换”为例进行讲解。 "WGS1984地理坐标系与WGS1984的UTM投影坐标系的转换”代表的是同一个基准面下的两个坐标的转换。 …

人工智能 | 深度学习的进展

深度学习的进展 深度学习是人工智能领域的一个重要分支&#xff0c;它利用神经网络模拟人类大脑的学习过程&#xff0c;通过大量数据训练模型&#xff0c;使其能够自动提取特征、识别模式、进行分类和预测等任务。近年来&#xff0c;深度学习在多个领域取得了显著的进展&#…

cesium mapboxgl+threebox glb 朝向问题

一、3Dbuilder打开glb 二、cesium在pitch和heading都为0的情况下&#xff0c;不设置模型的朝向 三、mapboxglthreebox在pitch和bearing都为0的情况下&#xff0c;不设置模型的朝向 四、对于地图默认视角&#xff0c;cesium设置pitch-90、heading0的时候和mapboxglthreebox设置p…

光学PCIe 6.0技术引领AI时代超大规模集群

随着云计算、大数据和人工智能技术的快速发展&#xff0c;超大规模数据中心正经历一场前所未有的变革。传统的集中式架构逐渐转变为解聚式&#xff08;disaggregated&#xff09;架构&#xff0c;这种架构将计算、存储和网络资源从单一的物理服务器中分离出来&#xff0c;形成独…

前端vite+vue3——自动化配置路由布局

文章目录 ⭐前言&#x1f496;vue3系列文章 ⭐ 自动化配置路由&#x1f496;引入vite版本自定义目录映射&#x1f496;自动化读取文件下的路由&#x1f496;main入口加载路由&#x1f496;入口app.vue配置&#x1f496;layout基础布局配置&#x1f496;效果 ⭐总结⭐结束 ⭐前言…

Linux系统安装apache服务器并发布网站,以及配置

这个如果单纯是发布一个静态页面的话&#xff0c;真的好方便 第一步&#xff0c;安装httpd—apache服务器yum install -y httpd 第二步&#xff0c;启动服务 systemctl start httpd 这里其实服务器已经搭建好了。 设置服务系统启动时自动启动 systemctl enable httpd 查看apac…

算法专题:滑动窗口

参考练习习题总集 文章目录 3. 无重复字符的最长子串30. 串联所有单词的子串76. 最小覆盖子串187. 重复的DNA序列219. 存在重复元素 II220. 存在重复元素 III396. 旋转函数424. 替换后的最长重复字符438. 找到字符串中所有字母异位词 滑动窗口太简单了&#xff0c;没啥说的自己…

信号的处理机制

信号的处理机制 信号的来源信号的处理方式注册信号处理函数信号的未决和阻塞实时信号实时信号的特性使用实时信号注意事项 为什么需要可重入的信号处理函数可重入函数的特性例子在信号处理中保持可重入性 Unix/Linux系统中的信号处理机制提供了一种方式&#xff0c;允许操作系统…

ip、子网掩码和A、B、C段

文章目录 概要ip和子网掩码的关系如何进一步理解两者之间关系示例问题根据IP地址和子网掩码求网络号、主机号A段、B段、C段 概要 ip、子网掩码、C段相关知识 ip和子网掩码的关系 IP地址和子网掩码在网络中密切关联&#xff0c;共同用于确定一个设备属于哪个网络以及如何划分网…

text-generation-webui搭建大模型运行环境与踩坑记录

text-generation-webui搭建大模型运行环境 text-generation-webui环境初始化准备模型启动项目Bug说明降低版本启动项目 text-generation-webui text-generation-webui是一个基于Gradio的LLM Web UI开源项目&#xff0c;可以利用其快速搭建部署各种大模型环境。 环境初始化 下载…

python数据容器之列表相关的操作

列表是Python中最常用的数据容器之一&#xff0c;它可以存储多个元素&#xff0c;并且可以进行增加、删除、修改、查找等操作。下面是一些常见的列表操作&#xff1a; 创建列表&#xff1a;使用方括号 [] 或者 list() 函数来创建一个列表。例如&#xff1a; fruits [apple, …

【漏洞复现】EPON上行A8-C政企网关未授权下载漏洞

Nx01 产品简介 EPON上行A8-C政企网关是一款终端产品&#xff0c;提供企业网络解决方案。 Nx02 漏洞描述 EPON上行A8-C政企网关配置文件未授权下载漏洞&#xff0c;攻击者在未授权状态下下载配置文件&#xff0c;获取配置文件内敏感信息。 Nx03 产品主页 fofa-query: "Z…

Retinexformer论文精读笔记

Retinexformer论文精读笔记 论文为2023年ICCV的Retinexformer: One-stage Retinex-based Transformer for Low-light Image Enhancement。论文链接&#xff1a;browse.arxiv.org/pdf/2303.06705.pdf&#xff0c;代码链接&#xff1a;caiyuanhao1998/Retinexformer: “Retinexfo…

Mac 下载安装Java、maven并配置环境变量

下载Java8 下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/ 根据操作系统选择版本 没有oracle账号需要注册、激活登录 mac直接选择.dmg文件进行下载&#xff0c;下载后安装。 默认安装路径&#xff1a;/Library/Java/JavaVirtualMachines/jdk-1…

【C#】.net core 6.0 创建默认Web应用,以及默认结构讲解,适合初学者

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…

Redis面试题44

人工智能是否有可能取代人类工作岗位&#xff1f; 答&#xff1a;人工智能在某些领域可能会取代一些人类工作岗位&#xff0c;但同时也会创造新的工作岗位。以下是一些关于人工智能是否取代人类工作岗位的观点&#xff1a; 替代观点&#xff1a;人工智能的发展和应用可能导致一…

标注工具体积3D数据集

史上最全 | 计算机视觉2D/3D标注工具汇总&#xff01; 3D点云标注有哪些好用的开源工具 https://www.appen.com.cn/blog/3d-annotation-tool/ 3D LABELING TOOLBOX 超全的3D视觉数据集汇总 常用的图像标注工具汇总 OpenCV探索之路&#xff08;二十五&#xff09;&#xf…

SpringCloud-创建多模块项目

在微服务架构中&#xff0c;项目的组织结构对于代码的维护和团队的协作至关重要。Spring Cloud作为一个强大的微服务框架&#xff0c;提供了丰富的功能和组件&#xff0c;同时也支持多模块项目的创建&#xff0c;使得代码结构更加清晰、易于管理。本文将介绍如何使用 Spring Cl…