web前端技术分享：详解模块化require 和 import的区别
在前端开发中，我们可以使用很多模块化的库来帮助我们更好的实现效果，有一些库的功能类似很多同学就不知道该如何选择，比如require和import，今天小千就给大家介绍一下两者的区别。
一、区别
1.require是commonjs的规范，在node中实现的api，import是es的语法，由编译器处理。所以import可以做模块依赖的静态分析，配合webpack、rollup等可以做treeshaking。
2.commonjs导出的值会复制一份，require引入的是复制之后的值（引用类型只复制引用），es module导出的值是同一份（不包括export default），不管是基础类型还是应用类型。
3.写法上有差别，import可以使用import * 引入全部的export，也可以使用import aaa, { bbb}的方式分别引入default和非default的export，相比require更灵活。
二、require和import会不会循环引用？
答案是不会，因为模块执行后会把导出的值缓存，下次再require或者import不会再次执行。这样也就不会循环引用了。比如a引入了b，b引入了a，如果a再次执行那么会再引入b，那就循环起来了，但实际上会做缓存，再次引入不会再执行。可以通过require.cache来查看缓存的模块，key为require.resolve(path)的结果。
三、模块中有定时器改变了导出的值，导出的值会不会变？
结果是import引入的值是2，而require引入的值一直是1，这也是require和imort很重要的一个区别，es module的export导出的值会静态的绑定，而commonjs exports导出的值是一个对象，会复制一份。这样也就出现了这样的现象。
四、总结
问 require和import的区别就是问commonjs和es module的区别，这两者一个是api的规范，一个是语言的语法，所以后者可以做静态分析，基于这个实现treeshaking，同时es module会静态的绑定导出的值，而commonjs会复制一份。但两者都会做缓存，所以不会有循环引用问题。
以上就是require和import的区别介绍了。最后欢迎对web前端感兴趣的小伙伴关注小千，后面会继续分享更多web前端知识。
本文来自千锋教育，转载请注明出处。
web前端技术分享：详解模块化require 和 import的区别相关推荐
- 好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
- window 程序报错 自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
- Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
- web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
- web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
- Web前端技术分享：img标签下方出现空隙的问题解决方案
很多初学小伙伴在写页面的时候碰到过一个问题,当我们用一个div直接包裹img,img的下方会出现3px间距,如图 代码如下: 为什么会出现这种情况呢? 因为img是一种类似text的标签元素,在结束的 ...
- Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...
- web前端技术分享：常用JavaScript框架有哪些？
常用JavaScript框架有哪些?对于前端开发工作者来说,JavaScript绝对是绕不开的一个点,可以所前端的大部分动态交互都是由JS完成,所以学好JavaScript基本上你就成功了一半.下面小 ...
- Web前端技术分享之前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来就给大 ...
最新文章
- 网传京东某程序员因压力太大，在商品页面置入骂人代码！京东辟谣：不关我们的事，外部商家干的！...
- c#中与vb中CType相同功能的函数(强类型转换)
- 架构师之路 — 数据库设计 — 关系型数据库应用程序设计
- 量子计算机怎么储存,单个比特可以存储更多的信息 量子计算机时代真的要来了？...
- python中文解释-python注释中文
- Skype for Business Server 2015-12-WAP-发布-2-邮件服务器
- spring7: di依赖注入--设值注入
- 不用回调方法捕获数据包
- 有头结点单链表的逆置
- java增删改查代码_低代码开发平台
- Python Imaging Library: ImageStat Module（图像统计模块）
- Java的强、软、弱、虚四种引用类型
- gridview的sort_C#教程之Gridview自动排序功能的实现
- Towards Fine-Grained Prosody Control for Voice Conversion 论文理解
- Excel怎么批量将各数据复制填充指定次数
- Codeforces Round #531 (Div. 3) F. Elongated Matrix（状压DP）
- vue3 + vite + ts 设置 @ 路径别名
- Windows游戏开发感想一个完整的Windows窗口程序
- VLC web插件 js接口
- 小学计算机会取消,教育部最新通知：取消学前班，小学新增书法和计算机两门课程...