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

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.hqwc.cn/news/463361.html

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

相关文章

分享76个表单按钮JS特效，总有一款适合您

分享76个表单按钮JS特效，总有一款适合您

分享76个表单按钮JS特效&#xff0c;总有一款适合您 76个表单按钮JS特效下载链接&#xff1a;https://pan.baidu.com/s/1CW9aoh23UIwj9zdJGNVb5w?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集…
阅读更多...
[office] excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 #笔记#学习方法

[office] excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 #笔记#学习方法

excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 在日常工作中经常会到用excel&#xff0c;有时需要计算毛重和皮重的时间间隔&#xff0c;具体的计算方式是什么&#xff0c;一起来了解一下吧 在日常工作中经常会到用excel&#xff0c;在整理编辑过磅数据…
阅读更多...
树莓派的pip安装时候添加清华源

树莓派的pip安装时候添加清华源

每次都要去找镜像网址&#xff0c;太麻烦了&#xff0c;通过改配置可以一次性解决。 首先创建一个.pip 目录 mkdir ~/.pip意味着在当前目录下创建.pip文件&#xff0c;不过这个是隐藏文件&#xff0c;一般情况下是关闭隐藏文件的可视的&#xff0c;于是我绕了点弯弯。 编辑…
阅读更多...
office 2021安装教程（官方自动批量激活，无付费）

office 2021安装教程（官方自动批量激活，无付费）

全程不需要第三方软件&#xff0c;所有用到的工具都是微软官方的&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 基于KMS的 GVLK&#xff1a;https://learn.microsoft.com/zh-cn/deployoffice/vlactivation/gvlks 首先我们需要去下载 office 软件部署工具&a…
阅读更多...
Compose之Slider全面解析

Compose之Slider全面解析

JetPack Compose系列&#xff08;14&#xff09;—Slider Slider&#xff0c;即拖动条&#xff0c;默认包含了一个滑块和一个滑动轨道。允许用户在一个数值范围内进行选择。 按照惯例&#xff0c;先观察其构造函数&#xff1a; Composable fun Slider(value: Float,onValueCh…
阅读更多...
ctfshow-命令执行(web73-web77)

ctfshow-命令执行(web73-web77)

web73 用不了上一题的通用poc了 因为禁用了strlen 但是可以改一个函数自定义一个函数只要是能实现strlen效果即可 cvar_export(scandir(/));exit(0); 根目录下有一个flagc.txt文件 cinclude(/flagc.txt);exit(0); web74 禁用了scandir函数 那就使用web72的glob协议 查看目录下…
阅读更多...
「daily updating」k3s + openfaas serverless bench 踩坑指南持续更新中

「daily updating」k3s + openfaas serverless bench 踩坑指南持续更新中

OpenFaas从入门到实战 – 踩坑指南 &#xff5c; k3dOpenFaas | deploy your first python function https://blog.alexellis.io/first-faas-python-function/ https://docs.openfaas.com/deployment/kubernetes/ 搭建环境&#xff1a;第一种方法失败&#xff0c;第二种方法…
阅读更多...
基于微信小程序的校园失物招领小程序

基于微信小程序的校园失物招领小程序

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
WWW 万维网

WWW 万维网

万维网概述 万维网 WWW (World Wide Web) 并非某种特殊的计算机网络。 万维网是一个大规模的、联机式的信息储藏所。 万维网用链接的方法能非常方便地从互联网上的一个站点访问另一个站点&#xff0c;从而主动地按需获取丰富的信息。 这种访问方式称为“链接”。 万维网是分…
阅读更多...
惊艳！2.77亿参数锻造出Agent+GPT-4V模型组合，AI领航机器人、游戏、医疗革新，通用智能时代你准备好了吗？

惊艳！2.77亿参数锻造出Agent+GPT-4V模型组合，AI领航机器人、游戏、医疗革新，通用智能时代你准备好了吗？

更多内容迁移知乎账号&#xff0c;欢迎关注&#xff1a;https://www.zhihu.com/people/dlimeng 斯坦福、微软、UCLA的顶尖学者联手&#xff0c;推出了一个全新交互式基础代理模型&#xff01; 这个模型能处理文本、图像、动作输入&#xff0c;轻松应对多任务挑战&#xff0c;…
阅读更多...
MySQL ——group by子句使用with rollup

MySQL ——group by子句使用with rollup

group by 子句使用with rollup关键字之后&#xff0c;具有分组加和的功能。即&#xff1a;在所有的分组记录之后&#xff0c;自动新增一条记录&#xff0c;从全局计算所有记录的数据。 0 问题描述 求出每年的学生平均成绩&#xff0c;及历史至今的平均成绩&#xff0c;结果保留…
阅读更多...
NLP_引入注意力机制

NLP_引入注意力机制

文章目录 点积注意力创建两个张量x1和x2计算张量点积&#xff0c; 得到原始权重对原始权重进行归一化求出注意力分布的加权和 缩放点积注意力编码器-解码器注意力定义Attention类重构Decoder类重构Seq2Seq类可视化注意力权重 注意力机制中的 Q、K、V自注意力多头自注意力注意力…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023