小小千想和您聊一聊

当前位置: 首页> 技术分享> web前端教程之模块化的require和import

web前端教程之模块化的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)的结果。

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

// 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会复制一份。但两者都会做缓存,所以不会有循环引用问题。

上一篇:web前端教程之CSS特征层叠性

下一篇:移动端软件测试教程之Appium组件

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码