小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
前言
require
和 import
在日常的开发过程中是经常使用的已经模块引入的方式,通常在一个项目中,我们基本上不用去关系这些,直接去使用,但是这两种方式的区别是什么呢? 今天就通过一段代码来看一下吧...
require/exports
// module.js
let counts = 1;
function sayHello() {
alert(`"hello , ${counts}`)
}
setTimeout(() => {
counts += 2
}, 3000);
module.exports = {counts, sayHello};
index.js
const { counts, sayHello } = require('./module.js');
// 注意此处的代码结果
const click = () => {
console.log('counts: ', counts) // 每次点击事件,打印的 counts 始终为 1
sayHello(); // 1 ==》 3秒钟后 =>> 3
}
...
<!-- 此处counts始终是 1 -->
<p>import {counts}</p>
<Button type="primary" onClick={click}>require </Button>
结果分析:
在源文件中更改变量的值,通过 require
引入 counts
的变量,拿到的值始终是初始化的值
import/export
// module.js
let counts = 1;
function sayHello() {
alert(`"hello , ${counts}`)
}
setTimeout(() => {
counts += 2
}, 3000);
export { counts, sayHello };
// index.js
import { counts, sayHello } from './module.js';
// 注意此处的代码结果
const click = () => {
console.log('counts: ', counts) // 初始为 1, ==》 3秒钟后 =>> 3
sayHello(); // 初始为 1, ==》 3秒钟后 =>> 3
}
...
<!-- 此counts处始终是 1 -->
<p>import {counts}</p>
<Button type="primary" onClick={click}>require </Button>
结果分析:通过 import
引入 counts
的变量,在源文件中修改变量的值后,引入拿到的变量值也会改变。
require和import的区别
- 导入
require
导出exports/module.exports
是CommonJS
的标准,通常适用范围如Node.js
import/export
是ES6
的标准,通常适用范围如React
require
是赋值过程并且是运行时才执行,也就是同步加载require
可以理解为一个全局方法,因为它是一个方法所以意味着可以在任何地方执行。import
是解构过程并且是编译时执行,理解为异步加载import
会提升到整个模块的头部,具有置顶性,但是建议写在文件的顶部。
commonjs
输出的,是一个值的拷贝,而es6
输出的是值的引用;
commonjs
是运行时加载,es6
是编译时输出接口;
require和import的性能
require
的性能相对于 import
稍低。
因为 require
是在运行时才引入模块并且还赋值给某个变量,而 import
只需要依据 import
中的接口在编译时引入指定模块所以性能稍高
结语
如果这篇文章帮到了你,欢迎点赞👍和关注⭐️。
文章如有错误之处,希望在评论区指正🙏🙏。