探索JavaScript模块化之旅：一篇文章带你入门JavaScript模块化

xump
263 阅读5分钟

模块化概述与实现方式

模块化是现代编程语言中的重要概念，它帮助开发者组织代码、提高可维护性和重用性。在Node.js环境中，模块化主要通过CommonJS和ES模块化两种标准来实现。

CommonJS模块化

  • 默认情况下，nodejs会将以下内容视为CommonJS模块：

    1. 使用.cjs为扩展名的文件
    2. 当前的package.json的type属性为commonjs时，扩展名为.js的文件
    3. 当前的package.json不包含type属性时，扩展名为.js的文件
    4. 文件的扩展名是mjs、cjs、json、node、js以外的值时（type不是module）

  • require()时同步加载模块的方法

  • 当以文件作为模块时

    1. 当我们加载一个自定义模块时，模块的路径必须以/、./或../开头。如果不以这些开头，node会认为你要加载的是核心模块或node_modules中的模块
    2. 当我们要加载的模块是一个文件模块时，CommonJS规范会先去寻找该文件，比如：require("./m1")时，会首先寻找名为m1的文件。如果这个文件没有找到，它会自动为文件添加扩展名然后再查询。扩展名的顺序为：js、json和node。

  • 当以文件夹作文模块时

    1. 文件夹中必须有一个模块的主文件。如果文件夹中含有package.json文件且文件中设置main属性，则main属性指定的文件会成为主文件，导入模块时就是导入该文件。如果没有package.json文件，则node会按照index.js、index.node的顺序寻找主文件

  • 每一个CommonJS模块在执行时，外层都会被套上一个函数：

    (function(exports, require, module, __filename, __dirname) {
// 模块代码会被放到这里
});
    1. exports 用来设置模块向外部暴露的内容
    2. require 用来引入模块
    3. __filename 模块的路径
    4. __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

  1. process

    • 表示当前node的进程
    • 通过该对象可以获取进程的信息，或者队进程做各种操作
    • 如何使用
      1. process是一个全局变量，可以直接使用
      2. 有哪些属性和方法：
        • process.exit()
          • 结束当前进程
        • process.nextTick(callback)
          • 将函数插入tick队列
          • tick队列中的代码会在下一次事件循环之前执行，在微任务和宏任务之前
      3. 代码执行顺序
        • 调用栈
        • tick队列
        • 微任务队列
        • 宏任务队列

  2. path

    • path模块可以帮助我们获取文件（夹）路径。
      • path.resolve([…paths])从当前工作目录开始，将路径或路径片段解析为绝对路径。
      • path.join([…paths])将一个或多个路径片段连接成一个路径字符串，处理路径分隔符，并规范化结果路径。
      • path.basename(path[, ext])从路径中获取文件名部分，可选地去除指定的扩展名。
      • path.dirname(path)从路径中提取目录部分

  3. 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)：同步重命名或移动文件/目录。

ES模块在浏览器中的运作机制

  1. 解析阶段：浏览器首先解析HTML，遇到<script type="module">标签时，开始预解析模块代码，识别顶级的静态导入语句并预先处理它们。
  2. 模块执行：模块代码按顺序执行，但动态导入(import()表达式)会在当前执行栈完成后异步执行，属于微任务的一种形式。
  3. 执行上下文与事件循环：模块代码在自己的执行上下文中运行，与主线程的事件循环机制（调用栈、微任务队列、宏任务队列）协同工作，确保模块间的依赖正确加载与执行。

通过这些机制，无论是Node.js环境还是浏览器环境，模块化都极大地提升了JavaScript代码的组织结构和可管理性。

avatar
文章
阅读
粉丝