模块化笔记

最新推荐文章于 2025-12-22 14:05:40 发布

原创最新推荐文章于 2025-12-22 14:05:40 发布 · 279 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #javascript

1.什么是模块化?

解决一个复杂问题时,把系统划分为若干模块的过程,模块是可组合,分解和更换的单元;

遵守固定的规则,把一个大文件拆分成独立并且相互依赖的多个小模块;

2为什么要用模块化?

可以使代码低耦合,每个模块都是独立的,功能模块不互相影响,便于对其进行改进和维护;

避免了js文件放入html文件中会有变量污染

特点(好处):

①

提高了代码的复用性

②

提高了代码的可维护性

③

可以实现按需加载

为什要学习模块化？

模块化：一个js文件中可以引入另一个js文件的数据。

这个特点是很基础的要求，只要是编程语言都有。而2015年之前，js没有（痛点：多个js都放在一个html文件，而不能相互引用）！

2015年出了ES6，在语法层面就支持模块化，但是浏览器不支持，所以前面学习传统开发时，还是 多个js都放在一个html文件。

当浏览器不支持，可以：

先用开发工具（webpack）搭建一个支持模块化的环境
在这个环境中写模块化的代码
用工具打包代码，然后在浏览器中运行

模块化规范

对代码进行模块化的拆分与组合时,需要遵守的规则

使用什么样的语法格式来引用模块(导入)

在模块中使用什么样的语法格式向外暴露成员(导出)

好处:遵守同样的模块化规范写代码,降低了沟通的成本,方便了各个模块之间的相互调用;

node.js中的模块化

node.js中的模块分为3大类

1.内置模块(由node.js官方提供,例如:fs,path,http等)

2.自定义模块(用户自己创建的js文件)

3.第三方模块(由第三方开发出来的模块,使用前需要先下载)

加载模块

使用 require() 方法，可以加载需要的内置模块、用户自定义模块、第三方模块进行使用

// 1.加载内置的 fs 模块
const fs = require('fs');

// 2.加载用户的自定义模块
const custom = require('./custom.js');

// 3.加载第三方模块（需要下载~）
const moment = require('momoent');

注意：使用 require() 方法加载其它模块时，会执行被加载模块中的代码。

什么是模块作用域

和函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块级别的访问限制，叫做模块作用域;

好处:防止了全局变量污染的问题

导出：module.exports , exports

module 对象

每个 .js 自定义模块中都有一个 module 对象，它里面存储了和当前模块有关的信息

module.exports 对象

在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。

外界用 require() 方法导入自定义模块时，得到的就是 module.exports 所指向的对象。

注意:使用 require() 方法导入模块时，导入的结果，永远以 module.exports 指向的对象为准。

exports 对象

由于 module.exports 单词写起来比较复杂，为了简化向外共享成员的代码，Node 提供了 exports 对象。默认情况下，exports 和 module.exports 指向同一个对象。最终共享的结果，还是以 module.exports 指向的对象为准。

exports 和 module.exports 的使用误区

require() 模块时，得到的永远是 module.exports 指向的对象

注意：为了防止混乱，建议大家不要在同一个模块中同时使用 exports 和 module.exports

模块规范

CommonJS 规范：nodejs中遵守的就是commonjs规范。
ES6 模块化规范：（前后端通用的模块化规范；Node.js、Vue、React 中都能使用！）
CMD 和 AMD 模块化规范（较少使用）: CMD--sea.js, AMD-require.js
UMD 叫做通用模块定义规范（Universal Module Definition），它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身

CommonJS 模块化规范

CommonJS 规定：

①

每个模块内部，module 变量代表当前模块。

②

module 变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口。

③

加载某个模块，其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。

导入：