当前位置：首页 > news >正文

JavaScript模块化规范

news 来源：原创 2025/7/16 18:51:47

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

一、模块化概述

1、什么是模块化？

2、为什么需要模块化？

①全局（指window）污染（命名冲突）问题

举例：

②依赖混乱问题

举例：

③数据安全问题

二、有哪些模块化规范？

1、CommonJS（服务端应用广泛）

2、AMD（不常用）

3、CMD（不常用）

4、ES6模块化（浏览器端应用广泛）

三、导入、导出的概念

1、为什么需要导入和导出？

2、图示

3、举例：上图中，模块1导出（暴露）了数据1、数据2和方法2，那么此时就可以在模块2中导入（引入）这些数据和方法。而没有从模块1导出的，模块2是无法导入的。就好比你不愿意拿出你家的电饭锅，你邻居家是不能使用的。

四、CommonJS规范（民间的）

1、初步体验

2、导出数据的两种方式

①exports.属性名/方法名 = 属性名/方法名

②module.exports = { }

注意：在每个模块内部，this、exports、module.exports三者，都是指向要导出的那个空对象。我们不断往这个空对象中添加内容，然后导出即可。

面试题：下图中，导出的内容是什么？

3、导入数据的两种方式

①直接用对象接收

②将对象解构成一个个变量

4、扩展理解（面试）

5、在浏览器中，运行CommonJS

五、ES6模块化规范（官方的）

1、地位

2、初步体验

①编写JS模块（使用export关键字导出变量、方法）

②创建index.js文件，引入上面两个js模块

③在页面中，引入index.js来使用

④运行index.html页面，并查看控制台的输出

3、如何在node中，运行ES6模块（即：如何使用vscode直接运行遵循ES6模块化规范的js文件？）

①首先要安装node（版本为12及以上）

②新建package.json配置文件，并追加type：module属性。

③选中index.js文件，直接右键->Run Code

④查看控制台输出内容

4、三种导出模块的方式

①分别导出

②统一导出

③默认导出

特点：导出的模块的全部内容，都放在一个名叫default的对象中：

注意：这三种导出方式，可以同时混合使用。

5、几种导入模块的方式（要根据导出方式决定）。

①导入全部（适用于：三种导出方式）

举例：

②命名导入（适用于：分别导出、统一导出）

举例：

③默认导入（适用于：默认导出）

举例：

④命名导入、默认导入可以混合使用

举例：

⑤动态导入（适用于：三种导出方式）

举例：

⑥import可以不接收任何数据

举例：

6、JS代码进行模块化，解决了哪些问题

①全局污染问题

举例：

②依赖混乱问题

③数据安全问题

7、数据引用问题

结语

一、模块化概述

1、什么是模块化？

将程序文件依据一定规则拆分成多个文件，这就叫模块化。
拆分出来每个文件就是一个模块，模块中的数据都是私有的，模块之间互相隔离

举例：如下图，a.js和b.js这两个模块，同时被html引用，二者都有msg这个图片，但是不产生冲突，因为模块之间是相互隔离的。

同时也能通过一些手段，可以把模块内的指定数据“交出去”，供其他模块使用。

举例：当一个js文件特别庞大时，我们一般会将所有的JS代码，拆分成好几个小的js文件，每一个js文件就叫一个模块。最后，我们只需要定义一个汇总的js文件，常常叫“index.js”，在这个汇总文件中，引入所有的js模块即可。

2、为什么需要模块化？

随着项目的复杂度越来越高，代码量和文件数量都会急剧增加，会逐渐引发以下问题：

①全局（指window）污染（命名冲突）问题

举例：

此时在该html中，同时引入了两个js文件，但是这两个js文件中，都有一个名叫getTodayData( )的方法，此时就产生了命名冲突问题（污染问题）。

因为此时两个js文件，都将方法放到了window身上，就会产生命名冲突。

②依赖混乱问题

举例：

此时该html文件中，引入了一堆文件，且顺序不能变化。因为下面的js文件，可能会依赖上面的js文件。因此此时只能是按照这个顺序引入这些js文件。可见此时这个依赖的顺序不太好记，十分混乱。

③数据安全问题

二、有哪些模块化规范？

历史背景（了解即可）：2009年随着Node.js的出现，JavaScript在服务器端的应用逐渐增多，为了让Node.js的代码更好维护，就必须要制定一种Node.js环境下的模块化规范，来自Mozilla的工程师Kevin Dangoor提出了CommonJS规范（CommonJS初期的名字叫ServerJS），随后Node.js社区采纳了这一规范。

随着时间的推移，针对JavaScript的不同运行环境，相继出现了许多模块化规范，按时间排序，分别为：

1、CommonJS（服务端应用广泛）

2、AMD（不常用）

3、CMD（不常用）

4、ES6模块化（浏览器端应用广泛）

三、导入、导出的概念

1、为什么需要导入和导出？

因为不同的模块（js文件）之间是隔离的，通过导入和导出，进行模块间数据和功能的共享。

2、图示

导出（暴露）：模块公开其内部的一部分（如变量、函数等），使这些内容可以被其他模块使用。
导入（引入）：模块引入和使用其他模块导出的内容，以重用代码和功能。

3、举例：上图中，模块1导出（暴露）了数据1、数据2和方法2，那么此时就可以在模块2中导入（引入）这些数据和方法。而没有从模块1导出的，模块2是无法导入的。就好比你不愿意拿出你家的电饭锅，你邻居家是不能使用的。

四、CommonJS规范（民间的）

1、初步体验

2、导出数据的两种方式

①exports.属性名/方法名 = 属性名/方法名

②module.exports = { }

注意：在每个模块内部，this、exports、module.exports三者，都是指向要导出的那个空对象。我们不断往这个空对象中添加内容，然后导出即可。

面试题：下图中，导出的内容是什么？

答案：导出的结果是{d：4}

解读：一开始exports和module.exports都是指向导出的空对象的，但是代码会让二者不断指向另外一个对象，因此就割裂开了。但是最终是以module.exports所指向的对象为主。

即，结论是：最终会导出module.exports所指向的对象，即{d：4}。

3、导入数据的两种方式

①直接用对象接收

②将对象解构成一个个变量

4、扩展理解（面试）

5、在浏览器中，运行CommonJS

浏览器是不支持CommonJS规范的，因此需要先编译一下原来的js文件，然后会生成新的js文件，此时再使用即可。

五、ES6模块化规范（官方的）

1、地位

ES6模块化规范是一个官方标准的规范，它是在语言标准的层面上实现了模块化功能，是目前最流行的模块化规范，且浏览器与服务端均支持该规范。

说白了，刚才讲得CommonJS是民间的规范，而ES6规范是ECMA官方推出的，血统纯正。

2、初步体验

①编写JS模块（使用export关键字导出变量、方法）

②创建index.js文件，引入上面两个js模块

并在index.js文件中，输出两个js模块的内容。

③在页面中，引入index.js来使用

④运行index.html页面，并查看控制台的输出

3、如何在node中，运行ES6模块（即：如何使用vscode直接运行遵循ES6模块化规范的js文件？）

①首先要安装node（版本为12及以上）

②新建package.json配置文件，并追加type：module属性。

③选中index.js文件，直接右键->Run Code

④查看控制台输出内容

4、三种导出模块的方式

①分别导出

②统一导出

注意：export后面的{ }只是一个标记，可千万别理解为对象，纯属看着像对象，但不是。

③默认导出

特点：导出的模块的全部内容，都放在一个名叫default的对象中：

注意：这三种导出方式，可以同时混合使用。

5、几种导入模块的方式（要根据导出方式决定）。

对于ES6模块化来说，使用何种导入方式，

①导入全部（适用于：三种导出方式）

导入后，用*来接收模块中的所有数据，并且可以使用as重命名。

举例：

②命名导入（适用于：分别导出、统一导出）

将模块导出的变量、属性，导入一个js文件时，可以使用as进行重命名。

举例：

③默认导入（适用于：默认导出）

该导入方式，专门用来接收使用默认导出方式导出的数据。

举例：

④命名导入、默认导入可以混合使用

举例：

⑤动态导入（适用于：三种导出方式）

举例：

在页面中，引入该index.js文件，然后生成一个按钮：

在index.js文件中，先获取那个按钮，然后给那个按钮绑定一个点击事件；

运行效果：

⑥import可以不接收任何数据

举例：

6、JS代码进行模块化，解决了哪些问题

①全局污染问题

举例：

之前html中引入js文件时，是以普通类型引入的，存在全局污染问题。

运行结果：

但是我们学习了js模块化的知识后，就不是引入普通的js文件了，而是模块化以后的js文件（许多js模块，汇入一个大的js文件，常常命名为index.js），此时js中的变量名、方法名是不存在于全局的，因为模块之间是互相隔离的。

综上：之所以js模块化，能解决全局污染问题，是因为模块化后，js中的变量名根本不存放在全局中。

②依赖混乱问题

如下图，当我们在汇总JS文件（index.js）中，需要使用bootstrap.js模块时，直接引入即可，根本不需要考虑bootstrap.js模块需要什么依赖，因为写bootstrap.js模块的人已经都安排好了。体现了一种各司其职的思想，因此此时不会产生依赖混乱问题。其实就是maven中的依赖传递。

③数据安全问题

由于js模块化后，一个模块中，只有导出的数据，才能被另一个模块导入，因此此时就保证了数据的安全性。

7、数据引用问题

结语

以上就是JS中的模块化知识，主要讲了CommonJS模块化规范、ES6模块化规范，今后我们主要使用ES6模块化规范，来进行vue项目的开发。

想了解更多的前端开发知识，请关注本博主~~

一、模块化概述

1、什么是模块化？

举例：当一个js文件特别庞大时，我们一般会将所有的JS代码，拆分成好几个小的js文件，每一个js文件就叫一个模块。最后，我们只需要定义一个汇总的js文件，常常叫“index.js”，在这个汇总文件中，引入所有的js模块即可。

2、为什么需要模块化？

①全局（指window）污染（命名冲突）问题

举例：

②依赖混乱问题

举例：

③数据安全问题

二、有哪些模块化规范？

1、CommonJS（服务端应用广泛）

2、AMD（不常用）

3、CMD（不常用）

4、ES6模块化（浏览器端应用广泛）

三、导入、导出的概念

1、为什么需要导入和导出？

2、图示

3、举例：上图中，模块1导出（暴露）了数据1、数据2和方法2，那么此时就可以在模块2中导入（引入）这些数据和方法。而没有从模块1导出的，模块2是无法导入的。就好比你不愿意拿出你家的电饭锅，你邻居家是不能使用的。

四、CommonJS规范（民间的）

1、初步体验

2、导出数据的两种方式

①exports.属性名/方法名 = 属性名/方法名

②module.exports = { }

注意：在每个模块内部，this、exports、module.exports三者，都是指向要导出的那个空对象。我们不断往这个空对象中添加内容，然后导出即可。

面试题：下图中，导出的内容是什么？

3、导入数据的两种方式

①直接用对象接收

②将对象解构成一个个变量

4、扩展理解（面试）

5、在浏览器中，运行CommonJS

五、ES6模块化规范（官方的）

1、地位

2、初步体验

①编写JS模块（使用export关键字导出变量、方法）

②创建index.js文件，引入上面两个js模块

③在页面中，引入index.js来使用

④运行index.html页面，并查看控制台的输出

3、如何在node中，运行ES6模块（即：如何使用vscode直接运行遵循ES6模块化规范的js文件？）

①首先要安装node（版本为12及以上）

②新建package.json配置文件，并追加type：module属性。

③选中index.js文件，直接右键->Run Code

④查看控制台输出内容

4、三种导出模块的方式

①分别导出

②统一导出

③默认导出

特点：导出的模块的全部内容，都放在一个名叫default的对象中：

注意：这三种导出方式，可以同时混合使用。

5、几种导入模块的方式（要根据导出方式决定）。

①导入全部（适用于：三种导出方式）

举例：

②命名导入（适用于：分别导出、统一导出）

举例：

③默认导入（适用于：默认导出）

举例：

④命名导入、默认导入可以混合使用

举例：

⑤动态导入（适用于：三种导出方式）

举例：

⑥import可以不接收任何数据

举例：

6、JS代码进行模块化，解决了哪些问题

①全局污染问题

举例：

②依赖混乱问题

③数据安全问题

7、数据引用问题

结语

相关文章：