本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。
基本介绍
(如果对import和require都有一定了解,可以直接跳到用法区别部分)
在平时进行开发的时候,我们经常可以看到import和require两种导入模块的方法。他们之间有什么区别和联系吗,我们该什么时候使用它们呢?
首先说明一下,由于require是属于CommonJS规范的,所以天生被node支持(因为CommonJS就是为了node的模块化才被打造出来的)。而import则属于ES Module,是ES6之后出现的模块功能规范,属于“正统”的模块解决方案。它可以在浏览器上通用,而node也在13.2版本后支持了ES Module的模块规范,让其使用更加广泛。
关于CommonJS和ES Module的更多区别,大家可以自行百度一下。这里仅简要说明一下,如何使用import和require。
node中使用 import
在node中使用ES Module,需要将 package.json
添加字段"type": "module"
。之后就可以在js文件中使用import啦。
(有些文章说还需要将文件改成.mjs,但是我平时使用中不改也没关系,不知道其作用在哪。如果有同学知道,可以在评论区指正一下,感谢😆)
script中使用 import
在script标签中,我们需要加入type="module"
字段来使用import
//a.js
import call from './b.js'
call()
//b.js
export default function call() {
console.log('hello')
}
<body>
<!--方法 1 : 引入b.js,然后在script标签里面调用-->
<script type="module">
import call from './b.js'
call()
</script>
<!--方法 2 : 直接引入a.js-->
<script type="module" src="./a.js"></script>
</body>
import和require用法区别
导入方法不同
import只能用于静态导入,也就是说只能写在代码的最外层。你可以在代码开头直接引用它,但是不能写在函数体或者if等结构体里,不然会报错。而require由于是实现动态加载,它可以写在任何地方。
例如:
import a from './a.js' //可以
data() {
return {
//imgSrc:import('assets/computer/办公本.jpg')//不行
}
}
const a = require('./a.js') //可以
data() {
return {
imgSrc:require('assets/computer/办公本.jpg')//可以
}
}
引用的效果不同
ES Module
ComminJS
- 通过require引入基础数据类型时,属于复制该变量。
// a.js
let count = 1
let setCount = () => {
count = 2
}
setTimeout(() => {
console.log('a',count)
}, 1000)
module.exports = {
count,
setCount
}
// b.js
const obj = require('./a.js')
obj.setCount()
console.log('b',obj.count)
//node b.js
// b 1
// a 2
//count在b.js中复制了一份,setCount只改变了a.js中的count
- 通过require引入复杂数据类型时,数据浅拷贝该对象。
// a.js
let count = {
num:1
}
let setCount = () => {
count.num = 2
}
setTimeout(() => {
console.log('a',count.num)
}, 1000)
module.exports = {
count,
setCount
}
// b.js
const obj = require('./a.js')
obj.setCount()
console.log('b',obj.count.num)
//node b.js
// b 2
// a 2
//a.js和b.js中的值都发生了变化,说明是浅拷贝
- 当使用require命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。
- 出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出
- CommonJS模块默认export的是一个对象,即使导出的是基础数据类型,也必须在对象内
希望我的总结可以给大家带来一些帮助,往期内容可以去我的主页查看🥳