# ZoneJs练习

**Repository Path**: leeyamaster/zone-js-practice

## Basic Information

- **Project Name**: ZoneJs练习
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Zone.js 学习示例

Zone.js 是一个能够拦截和追踪异步操作的 JavaScript 库，Angular 用它来追踪变更检测。

## 运行方式

`zone.js` 已下载到项目根目录，直接用浏览器打开各个 HTML 文件即可（或使用 `npx serve .` 启动本地服务器）。

## 示例说明

### 基础示例（01-03）
| 文件 | 内容 |
|------|------|
| `01-basic-zone.html` | 最基本的 Zone 用法：`Zone.current`、`zone.run()` |
| `02-nested-zones.html` | Zone 的嵌套关系（父子 Zone） |
| `03-zone-data.html` | 在 Zone 中存储数据，异步回调中也能访问 |

### 对比示例（04-07）
| 文件 | 内容 |
|------|------|
| `04-compare-context.html` | **上下文数据**：无 Zone 需手动传参，有 Zone 自动携带 |
| `05-compare-tracking.html` | **任务追踪**：无 Zone 需手动计数，有 Zone 用 onHasTask 自动感知 |
| `06-compare-error.html` | **错误捕获**：无 Zone 时 try-catch 抓不到 setTimeout 里的错误，有 Zone 可统一捕获 |
| `07-compare-invoke-task.html` | **任务拦截**：无 Zone 无法感知异步执行，有 Zone 的 onInvokeTask 能看见每一个回调 |

### 进阶示例（08-15）
| 文件 | 内容 |
|------|------|
| `08-schedule-vs-invoke.html` | **onScheduleTask vs onInvokeTask**：任务注册时 vs 任务执行时 |
| `09-zone-wrap.html` | **zone.wrap**：包装回调，让它在任意调用时都在指定 Zone 内执行 |
| `10-async-timing.html` | **耗时统计**：用 onInvokeTask 统计每个异步任务的执行时间 |
| `11-onInvoke.html` | **onInvoke**：zone.run() 同步执行时的钩子 |
| `12-onCancelTask.html` | **onCancelTask**：clearTimeout 取消任务时触发 |
| `13-angular-style.html` | **模拟 Angular**：onHasTask 全部完成时执行「变更检测」 |
| `14-zone-boundary.html` | **Zone 边界**：Zone 外发起的异步不会被追踪 |
| `15-runGuarded.html` | **zone.runGuarded**：同步错误也能被 onHandleError 捕获 |

## 核心概念

- **Zone.current**：当前所在的 Zone
- **zone.run(fn)**：在指定 Zone 内执行函数
- **zone.fork(config)**：基于当前 Zone 创建子 Zone
- **properties**：Zone 可以携带数据，用 `Zone.current.get('key')` 获取