`require` 与 `import` 的区别剖析

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 一、引言
- [二、`require` 概述](#二、require 概述)
- - [2.1 概念与来源](#2.1 概念与来源)
  - [2.2 基本使用示例（CommonJS）](#2.2 基本使用示例（CommonJS）)
  - [2.3 特点](#2.3 特点)
- [三、`import` 概述](#三、import 概述)
- - [3.1 概念与来源](#3.1 概念与来源)
  - [3.2 基本使用示例](#3.2 基本使用示例)
  - [3.3 特点](#3.3 特点)
- [四、`require` 与 `import` 的区别对比](#四、require 与 import 的区别对比)
- - [4.1 语法差异](#4.1 语法差异)
  - [4.2 加载方式](#4.2 加载方式)
  - [4.3 模块导出方式](#4.3 模块导出方式)
  - [4.4 兼容性](#4.4 兼容性)
- 五、总结

一、引言

在 JavaScript 编程中，模块化是组织代码的重要方式，它有助于提高代码的可维护性、可复用性和可测试性。require 和 import 是实现模块化的两种常见方式，分别在不同的环境和规范中使用。理解它们之间的区别，对于开发者在合适的场景下选择合适的模块化方案至关重要。本文将深入探讨 require 和 import 的区别。

二、`require` 概述

2.1 概念与来源

require 是 CommonJS 规范和 AMD（Asynchronous Module Definition）规范中用于引入模块的函数。CommonJS 主要用于服务器端（如 Node.js 环境），而 AMD 则更多应用于浏览器环境。

2.2 基本使用示例（CommonJS）

在 Node.js 中，使用 require 引入模块非常简单。例如，有一个名为 math.js 的模块：

javascript 复制代码

// math.js
exports.add = function (a, b) {
    return a + b;
};

在另一个文件中引入并使用该模块：

javascript 复制代码

// main.js
const math = require('./math.js');
const result = math.add(2, 3);
console.log(result);

2.3 特点

同步加载 ：在 CommonJS 中，require 是同步加载模块的。这意味着在执行 require 语句时，程序会暂停，直到模块加载完成并返回。这在服务器端环境中通常不是问题，因为服务器端文件系统的 I/O 速度相对较快。但在浏览器环境中，同步加载可能会导致页面卡顿。
动态加载 ：require 可以根据条件动态地加载模块。例如：

javascript 复制代码

if (condition) {
    const module = require('./conditionalModule.js');
}

三、`import` 概述

3.1 概念与来源

import 是 ES6（ES2015）引入的模块化语法，是 JavaScript 官方标准的模块导入方式。它为 JavaScript 带来了静态模块结构，使得代码在编译时就能确定模块之间的依赖关系。

3.2 基本使用示例

javascript 复制代码

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
const result = add(2, 3);
console.log(result);

3.3 特点

静态加载 ：import 是静态导入，模块的依赖关系在编译时就确定了。这使得 JavaScript 引擎可以在编译阶段进行优化，例如进行 Tree - Shaking（移除未使用的代码）。
语法灵活 ：import 提供了多种导入方式，如默认导入、命名导入、通配符导入等。

javascript 复制代码

// 默认导入
import myModule from './myModule.js';
// 命名导入
import { func1, func2 } from './myModule.js';
// 通配符导入
import * as myModule from './myModule.js';

四、`require` 与 `import` 的区别对比

4.1 语法差异

require：是一个函数调用，使用相对简单直接，只需要传入模块的路径作为参数。
import：是关键字，语法更加多样化，需要指定导入的模块成员或使用特定的导入方式。

4.2 加载方式

require：在 CommonJS 中是同步加载，在 AMD 中可以实现异步加载。同步加载可能会阻塞代码执行，而异步加载需要额外的配置和处理。
import ：静态加载，模块的依赖关系在编译时确定。不过，ES6 也提供了动态导入的语法 import()，可以实现异步加载模块。

javascript 复制代码

// 动态导入
import('./myModule.js')
   .then(module => {
        // 使用模块
    })
   .catch(error => {
        console.error('模块加载失败:', error);
    });

4.3 模块导出方式

require ：在 CommonJS 中，使用 exports 或 module.exports 导出模块成员。

javascript 复制代码

// 导出单个成员
exports.add = function (a, b) {
    return a + b;
};
// 导出多个成员
module.exports = {
    add: function (a, b) {
        return a + b;
    },
    subtract: function (a, b) {
        return a - b;
    }
};

import ：使用 export 关键字导出模块成员，有默认导出和命名导出两种方式。

javascript 复制代码

// 命名导出
export const add = (a, b) => a + b;
// 默认导出
export default function () {
    // 函数逻辑
};

4.4 兼容性

require：在 Node.js 环境中得到广泛支持，在旧版本的浏览器中需要借助工具（如 Browserify）才能使用。
import：是 ES6 标准语法，在现代浏览器和 Node.js（需要开启相应的支持）中得到支持，但在旧版本浏览器中需要使用 Babel 等工具进行转译。

五、总结

require 和 import 各有其特点和适用场景。require 在服务器端（如 Node.js）和旧有的模块化方案中应用广泛，具有动态加载和简单易用的优点；而 import 作为 ES6 标准的模块化语法，具有静态加载、语法灵活和便于优化等优势，是未来 JavaScript 模块化的发展方向。在实际开发中，开发者应根据项目的具体需求、运行环境和兼容性要求，合理选择使用 require 或 import，或者结合使用两者来实现最佳的模块化效果。

`require` 与 `import` 的区别剖析

文章目录

一、引言

二、require 概述

2.1 概念与来源

2.2 基本使用示例（CommonJS）

2.3 特点

三、import 概述

3.1 概念与来源

3.2 基本使用示例

3.3 特点

四、require 与 import 的区别对比

4.1 语法差异

4.2 加载方式

4.3 模块导出方式

4.4 兼容性

五、总结

二、`require` 概述

三、`import` 概述

四、`require` 与 `import` 的区别对比