Javascript模块化与Async语法糖

1.CommonJS模块化---Node.js的模块系统

核心思想:模块就是文件,使用函数作用域包裹起来。

我们在nodejs中写的每一个模块文件,其实都自动包裹在这样一个类似的函数中。

javascript 复制代码
(function(exports, require, module, __dirname, __filename) {
  // 模块代码
})();

也就是说,每个模块都有自己的 作用域 (不会污染全局) ,而且 Node 会自动给我们传入 5 个参数,让模块之间能互相通信。

  1. exports:暴露方法或变量(一个个导出)、

2.require:引入其他模块

3.module:代表当前模块对象,module.exports = {} 用来统一导出

4.--dirname:当前模块的文件夹路径

5.--filename:当前模块的完整文件路径

引入模块的方式

javascript 复制代码
const fs = require('fs') // 核心模块
const express = require('express') // 第三方模块
const myUtil = require('./utils') // 自定义模块

导出模块的方式

javascript 复制代码
// 方式一:单个导出
exports.sayHi = function() {}
exports.age = 18

// 方式二:统一导出
module.exports = {
  sayHi,
  age
}

总结一句话:

CommonJS 是服务端模块化方案,本质是用闭包保护 作用域 ,通过 require exports 实现模块通信

2.ES Module---浏览器支持的现代模块化

核心语法

javascript 复制代码
// 导出模块内容
export const name = '张三'
export function sayHi() {}
export default function() {} // 默认导出

// 引入模块内容
import { name, sayHi } from './module.js'
import myDefault from './module.js'

​编辑

ESModule 特点总结

  • 静态结构:浏览器或打包工具在代码运行前就能分析出模块依赖关系。
  • 默认严格模式use strict 默认开启,更安全。
  • 只读 引入:不能修改 import 进来的内容。
  • 适合浏览器:但旧浏览器不支持,通常需结合 webpack / Vite 打包。

📢 小提示:如果在 Node.js 中使用 ESModule,要将文件扩展名改成 .mjs,或在 package.json 中添加 "type": "module"

3.Async/await---写出同步风格的异步代码

async 是什么?

在函数前加上 async,这个函数就会返回一个 Promise 实例

不管你在函数里返回的是普通值还是 Promise,外面得到的都是 Promise

javascript 复制代码
async function getData() {
  return 'hello'
}
getData().then(console.log) // 输出 hello

await 是什么?

只能在 async 函数里使用。

它会等待 Promise 执行完,拿到结果再往下执行

相当于帮我们写了 .then(res => {...}),而且代码更简洁。

javascript 复制代码
async function run() {
  const res = await fetch('https://api.example.com')
  const data = await res.json()
  console.log(data)
}

错误处理:try/catch

await 等待的是异步结果,也有可能报错。

所以我们通常要用 try/catch 包裹。

javascript 复制代码
async function run() {
  try {
    const res = await fetch('https://wrong.url')
    const data = await res.json()
    console.log(data)
  } catch (err) {
    console.error('出错了:', err)
  }
}

总结一句话:

async 把函数变成 Promise,await 让你用同步的方式等待异步结果,底层还是微任务队列中的 .then()

最后总结一句话

Commonjs模块化:函数作用域 + require/exports,Node 环境,同步执行

ESmodule模块化:import/export,默认严格模式,浏览器支持,静态引入

async/await:把异步变同步写法,返回 Promise,底层还是 then 微任务

相关推荐
高斯林.神犇3 小时前
javaWeb基础
前端·chrome
用户21411832636023 小时前
dify案例分享-Qwen3-VL+Dify:从作业 OCR 到视频字幕,多模态识别工作流一步教,附体验链接
前端
南屿im3 小时前
把代码变成“可改的树”:一文读懂前端 AST 的原理与实战
前端·javascript
charlie1145141913 小时前
从《Life of A Pixel》来看Chrome的渲染机制
前端·chrome·学习·渲染·浏览器·原理分析
HWL56794 小时前
输入框内容粘贴时   字符净化问题
前端·vue.js·后端·node.js
梦6504 小时前
JQ 的 AJAX 请求方法
前端·ajax
ObjectX前端实验室4 小时前
【react18原理探究实践】分层解析React Fiber 核心工作流程
前端·react.js
IT_陈寒4 小时前
「JavaScript 性能优化:10个让V8引擎疯狂提速的编码技巧」
前端·人工智能·后端
ObjectX前端实验室5 小时前
【react18原理探究实践】scheduler原理之Task 完整生命周期解析
前端·react.js
ObjectX前端实验室5 小时前
【react18原理探究实践】调度器(Scheduler)原理深度解析
前端·react.js