# JS-ADV-CourseCode

**Repository Path**: leeworks/js-adv-course-code

## Basic Information

- **Project Name**: JS-ADV-CourseCode
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 6
- **Created**: 2026-03-13
- **Last Updated**: 2026-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 《JavaScript高级编程》课程代码仓库

欢迎来到 **JavaScript 高级编程** 代码仓库！本仓库致力于为学员提供高质量的教学示例与实战案例，帮助大家深入理解 JavaScript 的核心机制与高级特性。

## 📂 目录结构与内容

代码按章节组织，方便检索与学习。

### [Chapter 3] 异步编程与事件循环

本章重点讲解 JavaScript 的单线程模型、非阻塞 I/O 以及异步编程的演进方案。

#### 1. 核心概念与机制

- **阻塞与非阻塞**：
  - `01-blocking.html`: 直观演示同步代码如何阻塞 UI 渲染。
  - `02-async-callback.js`: 理解异步回调的基本工作方式。
- **事件循环 (Event Loop)**：
  - `04-event-loop.js`: 宏任务(MacroTask)与微任务(MicroTask)的执行顺序。
  - `05-event-loop-viz.html`: 事件循环的可视化演示。

#### 2. 异步方案演进

- **从回调到 Promise**：
  - `03-callback-hell.js`: 经典的“回调地狱”问题示例。
  - `06-async-pattern.js`: 异步模式的通用探讨。
  - `09-promise-basic.js`: Promise 的基本用法与链式调用。
  - `10-promise-all.js`: 使用 `Promise.all` 处理并发任务。
- **终极解决方案 Async/Await**：
  - `11-async-basic.js`: `async`/`await` 语法糖带来的同步写法体验。
  - `12-async-parallel.js`: 如何在 `async`/`await` 中实现并行执行。

#### 3. 网络请求实战

- `07-xhr-demo.html`: 传统的 `XMLHttpRequest` 使用演示。
- `13-fetch-demo.html`: 现代 `Fetch API` 使用演示。
- `08-json-basics.js`: JSON 数据的解析与序列化。

#### 4. 综合案例 (Case Study)

位于 `chapter-3/case-study/` 目录下，通过同一个业务场景，横向对比四种不同时代的异步实现方式，深刻体会技术演进带来的便利：

1.  `01-xhr-callback.js`: 回调函数风格
2.  `02-xhr-promise.js`: Promise 封装风格
3.  `03-fetch-api.js`: Fetch API 风格
4.  `04-async-await.js`: Async/Await 风格

### [Chapter 4] 模块化 (Module)

本章深入探讨 JavaScript 的模块化机制，从早期的全局作用域痛点到现代的 ES6 模块系统。

#### 1. 基础语法与核心机制

- **基本导出与导入**：
  - `01-basic-export-import/`: 演示 `export` 关键字的基本用法，以及 `import` 导入只读引用的特性。
- **命名管理**：
  - `02-rename-and-namespace/`: 解决命名冲突的重命名技巧 (`as`)，以及使用 `* as` 进行命名空间导入。

#### 2. 高级导出模式

- **默认导出与混合使用**：
  - `03-default-export/`: 掌握 `export default` 的使用场景，以及如何在一个模块中同时使用默认导出和命名导出。

#### 3. 浏览器与副作用

- **浏览器中的模块**：
  - `04-browser-module/`: 演示如何在 HTML 中通过 `<script type="module">` 正确加载模块（注意 CORS 限制）。
- **副作用导入**：
  - `05-side-effects/`: 演示无绑定导入（Side-effect Import）的应用场景，如扩展原生对象或加载 Polyfill。

### [Chapter 5] ES6 面向对象编程 (OOP)

本章全面解析 ES6 引入的 Class 语法，掌握现代 JavaScript 中的封装、继承与多态，以及解决 `this` 指向丢失的最佳实践。

#### 1. Class 基础与封装

- **基本语法**：
  - `01-class-basic.js`: 类的声明、构造函数 (`constructor`) 与实例方法的定义。
- **数据封装**：
  - `02-getter-setter.js`: 使用 `get` 和 `set` 拦截属性的读写，实现数据验证逻辑。
  - `03-private-fields.js`: ES2022 原生私有字段 (`#field`) 的应用，实现真正的强制封装。

#### 2. 静态成员与继承

- **静态方法与属性**：
  - `04-static-members.js`: `static` 关键字的使用场景（如工具类、工厂模式）。
- **继承与多态**：
  - `05-inheritance.js`: 使用 `extends` 和 `super` 实现类的继承与方法重写。

#### 3. 常见陷阱与解决方案

- **This 绑定问题**：
  - `06-this-binding.js`: 深入分析 Class 方法作为回调（如事件监听器）传递时 `this` 丢失的原因，并对比 `bind()` 与 **箭头函数 (Public Class Fields)** 两种解决方案。

#### 4. 综合案例 (Case Study)

位于 `chapter-5/case-study/` 目录下，演示如何使用 ES6 Class 封装一个可复用的 UI 组件（UserCard）：

- `UserCard.js`: 组件的核心逻辑封装（包含私有 DOM 引用与事件绑定）。
- `index.html`: 交互演示页面，包含组件的挂载 (`mount`) 与卸载 (`destroy`) 流程。
- 重点演示了在 DOM 事件监听中，如何利用**箭头函数属性**优雅地解决 `this` 漂移问题。

### [Chapter 6] Symbol 数据类型

本章全面解析 ES6 引入的第七种基础数据类型 Symbol，掌握其“独一无二”的特性，并学会在实际架构中应用。

#### 1. 基础特性与对象属性

- **基本语法与唯一性**：
  - `01-symbol-basic.js`: Symbol 的创建、类型转换陷阱，以及如何用作常量消除“魔术字符串”。
- **对象属性与“半私有”化**：
  - `02-object-properties.js`: 使用 Symbol 作为对象键名防止冲突，以及演示 `for...in` 中隐身的特性和 `Reflect.ownKeys` 的读取。

#### 2. 全局注册与内置钩子

- **全局 Symbol**：
  - `03-global-symbol.js`: 演示 `Symbol.for()` 和 `Symbol.keyFor()` 在跨模块共享 Symbol 时的应用。
- **元编程钩子**：
  - `04-built-in-symbols.js`: 演示常用的内置 Symbol（如 `hasInstance`, `iterator`, `toPrimitive`, `toStringTag`）如何改变 JS 的默认行为。

#### 3. 综合案例 (Case Study)

位于 `chapter-6/case-study/` 目录下，演示如何基于 Symbol 构建一个健壮的 EventBus（事件发布订阅中心）：

- `EventBus.js`: 核心逻辑封装，使用 Symbol 定义核心事件常量，避免被业务代码意外覆盖或触发。
- `index.html`: 交互演示页面，直观对比 Symbol 事件与普通字符串事件的防冲突效果。

### [Chapter 7] Set 与 Map

本章介绍 ES6 新增的两种极其重要的数据结构：Set 和 Map。它们弥补了传统 Array 和 Object 在特定场景下的局限性。

#### 1. Set 集合

- **基础与去重**：
  - `01-set-basics.js`: 演示 Set 的“值唯一”特性，以及在前端开发中最常用的**数组/字符串一行去重**技巧，包含集合运算（并集、交集、差集）。

#### 2. Map 字典与内存管理

- **真正的字典**：
  - `02-map-basics.js`: 直观对比传统 Object 作为字典时（对象转字符串键）导致的冲突问题，演示 Map 允许**任意类型作为键**的强大优势。
- **WeakMap 与内存防泄漏**：
  - `03-weakmap-dom.html`: 演示在 DOM 节点绑定数据的场景中，WeakMap 如何利用“弱引用”特性，在 DOM 被销毁时实现自动垃圾回收。

#### 3. 综合案例 (Case Study)

位于 `chapter-7/case-study/` 目录下：

- `LRUCache.js`: 基于 Map 实现的简易 LRU 缓存，利用 Map 维护插入顺序的特性。
- `EventBusMap.js`: 使用 Map 构建的事件发布订阅中心，展示 Map 键类型的灵活性。

## 🚀 如何使用

1.  **克隆仓库**

    ```bash
    git clone git@gitee.com:leeworks/js-adv-course-code.git
    ```

2.  **运行代码**
    - **Node.js 环境**：对于 `.js` 后缀的文件，建议使用 Node.js 直接运行。
      ```bash
      # 示例
      node chapter-3/04-event-loop.js
      ```
    - **浏览器环境**：对于 `.html` 后缀的文件，请直接在浏览器中打开，并打开开发者工具 (F12) 查看控制台 (Console) 输出。

## ⚠️ 注意事项

- 请确保你的 Node.js 版本在 **v14+** 以上，以支持最新的语法特性。
- 建议跟随课程视频或文档，按顺序阅读和运行代码。

---

Happy Coding! 祝学习愉快！