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

相关推荐
李少兄20 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10121 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194321 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 天前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 天前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 天前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc1 天前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅1 天前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅1 天前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
over6971 天前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript