还分不清import和require?进来看看吧🧐

2,695 阅读3分钟

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

基本介绍

(如果对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

  1. 通过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
  1. 通过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中的值都发生了变化,说明是浅拷贝
  1. 当使用require命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。
  2. 出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出
  3. CommonJS模块默认export的是一个对象,即使导出的是基础数据类型,也必须在对象内

希望我的总结可以给大家带来一些帮助,往期内容可以去我的主页查看🥳