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 微任务

相关推荐
知识分享小能手几秒前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
一大树几秒前
首屏白屏的处理方案~嗖得一下
前端
小old弟2 分钟前
🤔同时发送100个请求?!手撕,并发请求⌨️
前端
533_7 分钟前
[echarts] 更新数据
前端·javascript·echarts
excel7 分钟前
理解 JavaScript 中的迭代器协议与中断行为:for...of vs for...in
前端
幻雨様9 分钟前
UE5多人MOBA+GAS 番外篇:同时造成多种类型伤害,以各种属性值的百分比来应用伤害(版本二)
java·前端·ue5
讨厌吃蛋黄酥14 分钟前
利用Mock实现前后端联调的解决方案
前端·javascript·后端
zzywxc78735 分钟前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
Hello.Reader1 小时前
Rust → WebAssembly 的性能剖析全指南
前端·rust·wasm
前端小巷子1 小时前
Vue 2 Diff 算法
前端·vue.js·面试