JavaScript 模块化基础指引

最新推荐文章于 2025-05-07 16:29:26 发布

遇见~未来

最新推荐文章于 2025-05-07 16:29:26 发布

阅读量779

点赞数 28

分类专栏： es6~es14 文章标签： javascript 开发语言 ecmascript 前端 es6

本文链接：https://blog.csdn.net/2301_76428778/article/details/145822123

版权

es6~es14 专栏收录该内容

34 篇文章

订阅专栏

3.2 export 和 export default 的区别

一、模块化概念

模块化是一种将大型程序文件分解为多个小文件，再将这些小文件组合起来的编程理念。通过把复杂的程序逻辑拆分成一个个功能相对独立的模块，使得代码结构更清晰，便于管理和维护。在 JavaScript 中，每个模块就是一个独立的文件，包含了实现特定功能的代码，这些模块之间通过导入（import）和导出（export）机制进行交互。

二、模块化优势

2.1 防止命名冲突

在大型项目中，不同功能模块可能会使用相同名称的变量、函数等标识符。模块化使得每个模块都有自己独立的作用域，避免了这些命名冲突的发生，保证了代码的稳定性和可靠性。例如，在一个电商项目中，用户模块和订单模块都可能需要使用id来标识数据，但由于模块化，它们的id变量不会相互干扰。

2.2 代码复用

模块化允许开发者将常用的功能代码封装在模块中，其他模块可以方便地引用和复用这些代码，减少了重复编写相同代码的工作量，提高了开发效率。比如，在多个项目中都需要进行日期格式化的功能，就可以将日期格式化的代码封装成一个模块，在不同项目中直接引用。

2.3 高维护性

当项目需要对某个功能进行升级或修改时，由于模块化的特性，可以直接针对相应的模块进行操作，而不会对其他模块产生不必要的影响，降低了维护成本，提高了项目的可维护性。例如，当需要修改用户登录模块的验证逻辑时，只需要在用户登录模块中进行修改，而不会影响到其他模块的正常运行。

三、ES6 模块化语法

3.1 暴露语法汇总

3.1.1 分别暴露

在模块文件中，通过export关键字直接声明需要暴露的变量、函数等。以m1.js为例：

export let school = 'bdqn';

export function teach() {

    console.log("我们可以教给你开发技能");

}

这种方式适用于需要单独暴露多个成员的场景，使用起来直观明了。

3.1.2 统一暴露

先在模块内部定义好变量、函数等，然后使用export将需要暴露的内容用花括号包裹起来统一导出。比如在m2.js中：

let school = 'bdqn';

function findJob() {

    console.log("我们可以帮助你找工作!!");

}

export {school, findJob};

这种方式适合在模块内部先完成所有定义，最后统一管理暴露内容的情况。

3.1.3 默认暴露

使用export default暴露一个对象、函数等。在m3.js中：

export default {

    school: 'bdqn',

    change: function() {

        console.log("我们可以改变你!!");

    }

}

一个模块只能有一个默认暴露，它适用于模块主要提供单一功能或核心功能的场景。

3.2 export 和 export default 的区别

3.2.1 导出对象类型

二者均可用于导出常量、函数、文件、模块等。例如：

// export导出常量

export const num = 10;

// export default导出函数

export default function () {

    console.log('默认导出的函数');

}

3.2.2 使用次数限制

在一个文件中，export可以多次使用，用于分别暴露多个成员；而export default只能使用一次，因为一个模块只能有一个默认导出。

3.2.3 导入语法差异

通过export输出的内容，在import导入时需要使用花括号将导入的成员括起来，如：

import { school, teach } from "./js/m1.js";

而export default导出的内容，在导入时不需要花括号，如：

import m3 from "./js/m3.js";

这种差异使得导入代码更加简洁直观。

3.2.4 使用限制

export与export default不可同时使用在同一个导出操作中，否则会导致语法错误。

3.3 引入暴露文件语法

3.3.1 通用方式

采用import * as 别名 from '模块路径'的形式，将模块所有内容导入并通过别名访问。例如：

import * as m1 from './js/m1.js'

可以通过m1.school、m1.teach()等方式访问m1.js模块中暴露的成员。这种方式适用于需要访问模块中多个成员，但又不想逐个导入的情况。

3.3.2 解构赋值

使用import { 变量名, 函数名 } from '模块路径'直接获取模块中指定内容，如：

import { school, teach } from "./js/m1.js";

还可以使用别名进行导入，如：

import {school as yyzx, findJob} from "./js/m2.js"

将m2.js中的school以别名yyzx导入。对于默认暴露，采用import {default as 别名} from '模块路径'，如：

import {default as m3} from "./js/m3.js";

这种方式灵活性高，能精准获取所需模块成员。

3.3.3 简易形式

针对默认暴露，可使用import 别名 from '模块路径'，如：

import m3 from "./js/m3.js"

这种方式最为简洁，适用于明确知道模块是默认暴露且只需要使用默认导出内容的场景。

3.4 建立入口文件形式

在开发中，常创建一个入口文件（如app.js）来统一管理模块引入。在app.js中使用import语句引入多个模块，如：

import * as m1 from "./m1.js";

import * as m2 from "./m2.js";

import * as m3 from "./m3.js";

然后在 HTML 文件（如index.html）中通过<script src="./js/app.js" type="module"></script>引入入口文件，从而实现整个模块化程序的运行。这种方式使得项目的模块结构更加清晰，便于管理和维护。