里面怎么使用import引用_谈谈模块化的 require 和 import

一、区别

require是commonjs的规范，在node中实现的api，import是es的语法，由编译器处理。所以import可以做模块依赖的静态分析，配合webpack、rollup等可以做treeshaking。
commonjs导出的值会复制一份，require引入的是复制之后的值（引用类型只复制引用），es module导出的值是同一份（不包括export default），不管是基础类型还是应用类型。
写法上有差别，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)的结果。

三、模块中有定时器改变了导出的值，导出的值会不会变？

// a.js
let a = 1
setTimeout(() => {a = 2
}, 1000)
module.exports = a// test.js
const a = require('./a')
setTimeout(() => {console.log(a)
}, 2000)// a2.js
let a = 1
setTimeout(() => {a = 2
}, 1000)
export {a
}// test2.js
import { a } from './a2'setTimeout(() => {console.log(a)
}, 2000)

结果是import引入的值是2，而require引入的值一直是1，这也是require和imort很重要的一个区别，es module的export导出的值会静态的绑定，而commonjs exports导出的值是一个对象，会复制一份。这样也就出现了这样的现象。

四、总结

问 require和import的区别就是问commonjs和es module的区别，这两者一个是api的规范，一个是语言的语法，所以后者可以做静态分析，基于这个实现treeshaking，同时es module会静态的绑定导出的值，而commonjs会复制一份。但两者都会做缓存，所以不会有循环引用问题。

里面怎么使用import引用_谈谈模块化的 require 和 import相关推荐

js模块化：require、import和export
前言编写js模块必须要搞懂import和export的关系 Google Chrome 84.0.4147.135 (正式版本) (64 位) (cohort: Stable Installs On ...
web前端技术分享：详解模块化require 和 import的区别
在前端开发中,我们可以使用很多模块化的库来帮助我们更好的实现效果,有一些库的功能类似很多同学就不知道该如何选择,比如require和import,今天小千就给大家介绍一下两者的区别. 一.区别 1.r ...
require和import的区别
require和import的区别 require和import的区别 - wenxuehai - 博客园目录 1.require 和 import 的区别 2.require() | exp ...
python自己创建模块引用失败_详解Python import方法引入模块的实例 Python怎么import自己写的模块...
python中 import导入模块失败的问题? python中的import引用不了模块我傻,为你傻;我痛,为你痛;深夜里,你是我一种惯性的回忆. 为什么我用from lianxi import*就 ...
关于python字符编码以下选项中描述错误的是_关于import引用,以下选项中描述错误的是...
[单选题]11.自动化分析仪中采用同步分析原理的是:() [单选题]以下选项中,不是Python语言合法命名的是 [单选题]下列选项中可以获取Python整数类型帮助的是 [单选题]下面代码的输出结果 ...
前端模块化require和import
模块化就是将代码分割成不同的模块,便于复用和管理.按需加载像内置fs模块,.moment 模块, 这些模块不是我们写的, 都是直接拿过来使用, 那么我们能不能自己写一个模块?答案当然是可以的! 一. ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
UI设计师必知：link和@import引用css文件方法的区别
<link>元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法: 1 使用<link>元素链接到 ...
python import如何使用_python之import引用
关于python的import引用的最大关键是init.py文件的作用,这个文件对于import的方法使用至关重要. 这个是我在搭建自动化框架过程中用到的import的方法使用. 比如说,我现在log ...

里面怎么使用import引用_谈谈模块化的 require 和 import

里面怎么使用import引用_谈谈模块化的 require 和 import相关推荐

最新文章

热门文章