模块化概述与实现方式
模块化是现代编程语言中的重要概念,它帮助开发者组织代码、提高可维护性和重用性。在Node.js环境中,模块化主要通过CommonJS和ES模块化两种标准来实现。
CommonJS模块化
-
默认情况下,nodejs会将以下内容视为CommonJS模块:
- 使用
.cjs
为扩展名的文件 - 当前的
package.json
的type
属性为commonjs
时,扩展名为.js
的文件 - 当前的
package.json
不包含type
属性时,扩展名为.js
的文件 - 文件的扩展名是
mjs
、cjs
、json
、node
、js
以外的值时(type
不是module
)
- 使用
-
require()
时同步加载模块的方法 -
当以文件作为模块时
- 当我们加载一个自定义模块时,模块的路径必须以
/
、./
或../
开头。如果不以这些开头,node会认为你要加载的是核心模块或node_modules
中的模块 - 当我们要加载的模块是一个文件模块时,CommonJS规范会先去寻找该文件,比如:
require("./m1")
时,会首先寻找名为m1
的文件。如果这个文件没有找到,它会自动为文件添加扩展名然后再查询。扩展名的顺序为:js
、json
和node
。
- 当我们加载一个自定义模块时,模块的路径必须以
-
当以文件夹作文模块时
- 文件夹中必须有一个模块的主文件。如果文件夹中含有
package.json
文件且文件中设置main
属性,则main属性指定的文件会成为主文件,导入模块时就是导入该文件。如果没有package.json
文件,则node
会按照index.js
、index.node
的顺序寻找主文件
- 文件夹中必须有一个模块的主文件。如果文件夹中含有
-
每一个CommonJS模块在执行时,外层都会被套上一个函数:
(function(exports, require, module, __filename, __dirname) {
// 模块代码会被放到这里
});
exports
用来设置模块向外部暴露的内容require
用来引入模块__filename
模块的路径__dirname
模块所在目录的路径
ES模块化
启用方式
- 通过文件扩展名
.mjs
直接指定。 - 在项目的
package.json
中设置"type": "module"
,使所有.js
文件遵循ES模块化规范。
导入导出语法
- 导出:
// 导出多个变量 export const name = 'Module'; export function add(x, y) { return x + y; } // 默认导出 export default function multiply(x, y) { return x * y; }
- 导入
// 分别导入
import { name, add } from './module.js';
// 导入默认成员及具名成员
import multiply, { name } from './module.js';
// 导入所有成员为一个对象
import * as module from './module.js';
特点
- 静态导入:ES模块的导入声明必须位于模块顶层,且在运行时静态解析。
- 严格模式:ES模块自动采用严格模式。
- 不能省略扩展名:与Node.js的CommonJS不同,ES模块要求明确指定文件扩展名。
核心模块
- 核心模块,node中的自带模块,可以在node中直接使用
- window是浏览器的宿主对象,在node中是没有的
- global 是node中的全局对象,作用类似于window
- ES标准中,全局对象的标准名应该是:globalThis
-
process
- 表示当前node的进程
- 通过该对象可以获取进程的信息,或者队进程做各种操作
- 如何使用
- process是一个全局变量,可以直接使用
- 有哪些属性和方法:
process.exit()
- 结束当前进程
process.nextTick(callback)
- 将函数插入tick队列
- tick队列中的代码会在下一次事件循环之前执行,在微任务和宏任务之前
- 代码执行顺序
- 调用栈
- tick队列
- 微任务队列
- 宏任务队列
-
path
- path模块可以帮助我们获取文件(夹)路径。
path.resolve([…paths])
从当前工作目录开始,将路径或路径片段解析为绝对路径。path.join([…paths])
将一个或多个路径片段连接成一个路径字符串,处理路径分隔符,并规范化结果路径。path.basename(path[, ext])
从路径中获取文件名部分,可选地去除指定的扩展名。path.dirname(path)
从路径中提取目录部分
- path模块可以帮助我们获取文件(夹)路径。
-
fs
- fs模块可以帮助我们读取本地磁盘中的文件。
-
fs.readdir(path[, options], callback)
:异步读取目录的内容。 -
fs.readdirSync(path[, options])
:同步读取目录的内容。 -
fs.writeFile(file, data[, options], callback)
:异步写入数据到文件,如果文件存在则覆盖。 -
fs.writeFileSync(file, data[, options])
:同步写入数据到文件。 -
fs.appendFile()
创建新文件,或将数据添加到已有文件中 -
fs.mkdir()
创建目录 -
fs.rmdir(path[, options], callback)
:异步删除空目录。 -
fs.rename(oldPath, newPath, callback)
:异步重命名或移动文件/目录。 -
fs.renameSync(oldPath, newPath)
:同步重命名或移动文件/目录。
-
- fs模块可以帮助我们读取本地磁盘中的文件。
ES模块在浏览器中的运作机制
- 解析阶段:浏览器首先解析HTML,遇到
<script type="module">
标签时,开始预解析模块代码,识别顶级的静态导入语句并预先处理它们。 - 模块执行:模块代码按顺序执行,但动态导入(
import()
表达式)会在当前执行栈完成后异步执行,属于微任务的一种形式。 - 执行上下文与事件循环:模块代码在自己的执行上下文中运行,与主线程的事件循环机制(调用栈、微任务队列、宏任务队列)协同工作,确保模块间的依赖正确加载与执行。
通过这些机制,无论是Node.js环境还是浏览器环境,模块化都极大地提升了JavaScript代码的组织结构和可管理性。
文章转自:https://juejin.cn/post/7371066996178763817