Javascript模块化与Async语法糖-CSDN博客

本文链接：https://blog.csdn.net/A6516565189/article/details/149822908

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

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

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

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

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

1. exports：暴露方法或变量（一个个导出）、

2.require：引入其他模块

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

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

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

引入模块的方式

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

导出模块的方式

// 方式一：单个导出
exports.sayHi = function() {}
exports.age = 18

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

总结一句话：

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

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

核心语法

// 导出模块内容
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

async function getData() {
  return 'hello'
}
getData().then(console.log) // 输出 hello

await 是什么？

只能在 async 函数里使用。

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

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

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

错误处理：try/catch

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

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

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