一文带你搞懂JS中导入模块import和require的区别

JS中利用import引入模块与利用require引入模块的差异解析

在JavaScript生态里，模块代表一种可复用的代码片段，它将相关逻辑封装为独立单元，供其他代码引入调用。针对模块引入操作，JS提供了两种主流机制：借助import以及require。

import作为ES6规范定义的新特性，支持以声明式语法引入其他模块内的成员。require则是Node.js环境下的特有机制，通过调用特定函数来加载并引入外部模块。

以下是对两种模块引入机制进行的深度对比分析：

引入机制对比

采用import进行引入时，需使用关键字import配合大括号语法（针对命名导出场景），并指定模块标识符。具体示例如下：

import { func1, func2 } from './myModule';

采用require进行引入时，需调用require函数，并将目标模块的路径字符串作为参数传入。具体示例如下：

const myModule = require('./myModule');

支持的文件类型差异

import仅能用于引入ES6标准的模块，或者经过Babel等编译工具转换后的ES6格式代码。相比之下，require具备更强的兼容性，能够引入CommonJS、AMD、UMD等多种规范的模块，以及Node.js内置的核心模块。

变量提升行为差异

在ES6规范下，import语句属于静态执行范畴，它们在模块顶层被处理，并在模块内部构建出独立的作用域。这意味着引入的变量仅在当前模块内可见，不会污染外部作用域。因此，通过import引入的变量不会发生变量提升现象。

require函数属于动态执行范畴，它在代码运行阶段才执行，且不会在模块内部构建独立的作用域。因此，通过require引入的变量存在被提升的可能性。

补充说明：如何深入理解import语句的静态执行特性与require函数的动态执行特性？

要透彻理解import语句的静态执行机制以及require函数的动态执行机制，必须首先厘清这两个核心概念的定义。

静态执行指的是在代码编译阶段即可确定其执行结果的代码处理模式。在JavaScript引擎中，import语句属于静态执行代码，引擎会在编译阶段对import语句进行静态分析，解析出所依赖的模块，并在后续运行阶段加载这些模块。

动态执行指的是仅在代码运行阶段才能确定其执行结果的代码处理模式。在JavaScript引擎中，require函数属于动态执行代码，引擎会在运行阶段动态解析所需的模块路径，并加载对应的模块。

综上所述，可以得出以下结论：

• import语句属于静态执行，因为在编译阶段即可确定所引入的模块，从而在运行阶段实现快速加载。
• require函数属于动态执行，因为在运行阶段才能确定所需的模块，需要动态地进行加载操作。

需要特别注意的是，由于import语句是静态执行的，因此在代码中不允许使用变量或表达式作为模块路径，只能使用字符串字面量。而require函数则支持接受变量或表达式作为模块路径，从而动态地确定所需的模块。

导出机制差异

import与require在模块导出机制上也存在显著差异。import遵循ES6的导出规范，支持命名导出和默认导出两种模式。具体示例如下：

// 命名导出
export function func1() {}

// 默认导出
export default {}

而require遵循CommonJS的导出规范，仅支持默认导出模式。具体示例如下：

// 默认导出
module.exports = {};

require除了可以使用module.exports导出模块外，还可以利用exports对象。实际上，exports对象是module.exports的一个引用。当使用exports进行导出时，实际上是向module.exports对象添加属性和方法。

模块作用域差异

在JavaScript中，每个模块都拥有独立的作用域，模块间的变量相互隔离，互不干扰。这也是模块化编程的核心特征之一。

在使用import引入模块时，实际上是在当前模块内部创建了一个指向被引入模块的引用，而非直接复制模块内的变量。因此，当不同文件使用import引入同一模块时，它们实际上是共享了同一个模块实例，从而可以访问并修改该模块中的变量。

而在使用require引入模块时，实际上是将引入模块中的变量直接复制（可理解为浅拷贝）到当前模块的作用域中。因此，当不同文件使用require引入同一模块时，它们各自拥有独立的模块实例，彼此之间不会共享模块中的变量。

需要留意的是，如果使用require引入的模块中包含可变状态的对象，那么在不同文件中修改该对象的变量会相互影响。这也是require在某些场景下可能产生不可预测副作用的原因之一。而使用import引入模块，由于共享同一个模块实例，相对更易于管理和控制。

如果使用require引入的模块中包含可变状态的对象，例如对象的属性值可被修改，那么当在不同文件中修改该对象中的变量时，由于require会将引入模块中的变量直接复制到当前模块的作用域中（类似于浅拷贝，模块中的普通变量（如字符串、数字等）是非共享的，而对象的变量则是能被修改共用的），因此会导致该对象的变量在不同文件中的值相互影响。

举例说明，假设存在一个config.js模块，其中定义了一个可变对象config，并且在main.js和app.js两个文件中使用了require引入该模块：

config.js文件内容：

// config.js
let config = {
  env: 'dev',
  port: 3000
}

module.exports = config;

main.js文件内容：

// main.js
const config = require('./config.js');

// 修改config对象的属性值
config.port = 4000;

console.log(`config.port in main.js: ${config.port}`);

app.js文件内容：

// app.js
const config = require('./config.js');

console.log(`config.port in app.js: ${config.port}`);

当执行main.js和app.js时，它们都会通过require引入config.js模块，并且main.js中修改了config对象的port属性值。那么当app.js输出config.port时，它实际上输出的是被main.js修改后的port属性值，而不是config.js模块原本定义的值。这就是因为require引入的模块中含有可变状态的对象或变量，在不同文件中修改该对象或变量会相互影响的原因。

需要强调的是，这种影响是由于模块之间共享同一个对象的引用造成的，而非模块本身的设计问题。因此，在编写模块时，需要谨慎处理可变状态的对象，尽量避免在不同模块之间共享同一个对象的引用，以规避不可预测的副作用。

总结与建议

为避免使用require引入的模块中含有可变状态的对象或变量，在不同文件中修改该对象或变量会相互影响的副作用，可采取以下几种解决策略：

1.使用import替代require：使用import引入模块时，不同文件引入同一模块实际上是共享了同一个模块实例，因此可以避免使用require时出现的副作用。

2.使用纯函数：纯函数是指输入相同的参数，输出结果也相同，并且不会对外部环境产生任何副作用的函数。如果在模块中使用纯函数，那么即使该模块中的变量被修改了，但由于纯函数不会产生副作用，因此在不同文件中调用该函数时，输出结果也不会发生变化。

3.使用常量或不可变对象：常量或不可变对象指的是一旦定义后就无法再被修改的值。如果在模块中使用常量或不可变对象，那么即使该模块中的变量被修改了，但由于常量或不可变对象无法被修改，因此在不同文件中调用该变量时，其值也不会发生变化。

4.使用模块的副本：可以通过在模块导出时返回一个副本，而不是直接返回模块内部的对象或变量。这样在不同文件中使用require引入该模块时，它们会得到不同的副本，而不是共享同一个模块实例。具体示例如下：

// config.js
let config = {
  env: 'dev',
  port: 3000
}

module.exports = Object.assign({}, config);

在导出时使用Object.assign方法返回config对象的一个副本，从而避免了不同文件之间共享同一个模块实例的副作用。

需要指出的是，这些方法并非万能钥匙，而是需要根据具体情况选用合适的方法来避免副作用。在编写模块时，需要考虑模块中的变量是否需要共享，是否可以被修改，以及模块在不同文件中被调用时可能产生的副作用等因素，从而选择合适的方法来避免副作用。

以上就是一文带你搞懂JS中导入模块import和require的区别的详细内容，更多关于JS import require区别的资料请关注本站其它相关文章！