JavaScript Development Lab

通过 20 个独立、最小、可运行的 JavaScript 实验，系统理解现代 JavaScript 的核心知识，并逐步建立从“语法”到“数据处理”、从“DOM 交互”到“异步请求”、再到“小型应用架构”的完整学习路径。

本项目不以“做 20 个炫酷特效”为目标，而是希望通过一组可以反复运行、修改和观察的最小实验，真正理解 JavaScript 在网页开发中的作用。

项目目标

很多 JavaScript 学习过程容易陷入两个极端：

只学语法
↓
知道变量、数组、函数
↓
但不知道如何写真实页面

或者：

只做效果
↓
复制 Tabs / Modal / Slider
↓
但不理解背后的数据和程序逻辑

本项目采用另一种方式：

一个 Lab
↓
一个核心问题
↓
一个最小可运行示例
↓
修改代码
↓
观察结果
↓
理解原理
↓
逐步组合

最终希望建立这样的知识链路：

JavaScript 基础
↓
数据结构与数据处理
↓
DOM 与事件
↓
表单与 CRUD
↓
浏览器本地存储
↓
JSON
↓
Promise
↓
Fetch / Async Await
↓
ES Modules
↓
Mini App

20 个实验知识地图

整个项目分为 5 个阶段，每个阶段解决一个更高层次的问题。

Part 1：JavaScript 基础

目标：

理解 JavaScript 如何保存数据、判断条件、重复执行代码和封装逻辑。

#	实验	核心知识
01	Variables	`let`、`const`、数据类型、`typeof`
02	Condition	`if`、`else`、`switch`、逻辑运算
03	Loop	`for`、`while`、`for...of`
04	Function	函数、参数、`return`、作用域、箭头函数

这一阶段主要解决：

数据是什么？
↓
程序如何判断？
↓
程序如何重复执行？
↓
如何把逻辑封装成函数？

Part 2：数据结构与数据处理

目标：

理解现代 JavaScript 中最常见的 Array + Object 数据结构，以及如何对数据进行筛选、查找、转换和组合。

#	实验	核心知识
05	Array	数组、索引、`length`、`push()`、`pop()`
06	Array Methods	`map()`、`filter()`、`find()`、`reduce()`、`sort()`
07	Object	对象、属性、嵌套对象、对象方法
08	Destructuring & Spread	解构赋值、Spread、Rest

真实 Web 项目中非常常见的数据形态是：

Array
└── Object
    ├── id
    ├── name
    ├── category
    ├── price
    └── ...

例如：

产品列表
文章列表
用户数据
API 返回结果
WooCommerce 产品数据
JSON 数据

都经常使用这种结构。

Part 3：DOM 与浏览器交互

目标：

理解 JavaScript 如何真正控制网页，并响应用户操作。

#	实验	核心知识
09	DOM	`querySelector()`、`textContent`、`innerHTML`、创建和删除元素
10	Class & Dataset	`classList`、`data-*`、`dataset`
11	Events	`click`、`input`、`change`、`submit`、`keydown`
12	Event Delegation	事件冒泡、`event.target`、`closest()`、事件委托

这一阶段建立最重要的浏览器交互模型：

用户操作
↓
Event
↓
JavaScript
↓
DOM
↓
Class / Content
↓
页面发生变化

例如：

Tabs
Accordion
Modal
Menu
Drawer
Product Filter
Gallery

很多常见网页交互，本质上都可以追溯到这一套机制。

Part 4：Web App 基础

目标：

从简单交互进入数据管理，理解表单、CRUD、浏览器存储和 JSON。

#	实验	核心知识
13	CRUD	Create / Read / Update / Delete
14	Form	表单读取、`FormData`、验证、`preventDefault()`
15	LocalStorage	浏览器本地存储、数据持久化
16	JSON	`JSON.stringify()`、`JSON.parse()`、导入导出

这一阶段开始形成小型应用最基础的数据流：

用户输入
↓
JavaScript Object
↓
Array
↓
CRUD
↓
DOM

再进一步：

JavaScript 数据
↓
JSON
↓
LocalStorage / 文件 / API

Part 5：现代 JavaScript

目标：

理解异步编程、外部数据请求和现代 JavaScript 项目的模块化组织方式。

#	实验	核心知识
17	Promise	Promise、`resolve()`、`reject()`、`then()`、`catch()`
18	Fetch & Async/Await	Fetch、`async`、`await`、`try...catch`
19	ES Modules	`import`、`export`、模块职责分离
20	Mini App	综合 Product Explorer

这一阶段完成下面这条重要链路：

JSON
↓
Promise
↓
Fetch
↓
Async / Await
↓
ES Modules
↓
Mini App

最终综合实验：Product Explorer

20-mini-app 是整个第一阶段的综合实验。

它并不是一个追求功能数量的大项目，而是用于验证前面知识能否真正组合起来。

核心功能包括：

外部 JSON 产品数据
Fetch 数据加载
搜索
分类筛选
排序
产品详情
收藏
只看收藏
LocalStorage
ES Modules
Loading / Error 状态

项目结构：

20-mini-app/
├── index.html
├── css/
│   └── style.css
├── data/
│   └── products.json
├── js/
│   ├── app.js
│   ├── api.js
│   ├── storage.js
│   ├── ui.js
│   └── utils.js
└── README.md

可以把它理解成一个最小的现代 JavaScript 应用：

数据
↓
请求 / 存储
↓
业务逻辑
↓
DOM
↓
用户交互

仓库目录

javascript-development-lab/
│
├── README.md
│
├── 01-variables/
├── 02-condition/
├── 03-loop/
├── 04-function/
│
├── 05-array/
├── 06-array-methods/
├── 07-object/
├── 08-destructuring-spread/
│
├── 09-dom/
├── 10-class-dataset/
├── 11-events/
├── 12-event-delegation/
│
├── 13-crud/
├── 14-form/
├── 15-localstorage/
├── 16-json/
│
├── 17-promise/
├── 18-fetch-async-await/
├── 19-es-modules/
└── 20-mini-app/

每个实验都是一个独立目录，并包含自己的 README.md。

典型结构：

xx-example/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── README.md

部分章节会根据实际需要增加：

data/

或者拆分多个 JavaScript 模块。

如何运行

01 ～ 17

大部分实验可以直接打开：

index.html

即可运行。

18 ～ 20

以下章节涉及：

Fetch
JSON 文件请求
ES Modules

建议通过本地 HTTP 服务器运行：

18-fetch-async-await
19-es-modules
20-mini-app

如果电脑安装了 Python，可以进入对应实验目录后运行：

python -m http.server 8000

浏览器访问：

http://localhost:8000/

也可以使用：

VS Code Live Server
其他本地 HTTP Server
GitHub Pages

不建议直接通过：

file://

方式测试 Fetch 和 ES Modules。

每个实验重点看什么？

每个子目录的 README 都尽量围绕以下问题展开：

这一章解决什么问题？
核心 JavaScript 知识是什么？
HTML 承担什么职责？
JavaScript 承担什么职责？
数据如何流动？
修改哪里最容易观察结果？
后面还可以扩展什么？

这样以后复习时，不需要重新阅读整套代码。

JavaScript 的五层理解模型

可以把这 20 个实验进一步抽象成五层。

┌──────────────────────────┐
│       JavaScript App     │
│        综合应用层         │
└────────────▲─────────────┘
             │
┌────────────┴─────────────┐
│ Promise / Fetch / Module │
│        异步与架构         │
└────────────▲─────────────┘
             │
┌────────────┴─────────────┐
│ LocalStorage / JSON      │
│        数据持久化         │
└────────────▲─────────────┘
             │
┌────────────┴─────────────┐
│ DOM / Class / Events     │
│        浏览器交互         │
└────────────▲─────────────┘
             │
┌────────────┴─────────────┐
│ Array / Object / Function│
│        数据与逻辑         │
└──────────────────────────┘

以后遇到 JavaScript 问题时，可以先判断：

当前问题主要属于哪一层？

这会比单纯记忆 API 更容易建立长期知识体系。

项目设计原则

1. 一个实验一个核心问题

尽量避免一个 Lab 同时引入大量新知识。

例如：

03-loop

只研究循环。

不会提前加入：

map()
filter()
reduce()

这些内容留到后面的独立章节。

2. 独立可运行

每个实验都尽量做到：

打开目录
↓
可以单独阅读
↓
可以单独测试
↓
可以单独修改

不会依赖前一个实验才能运行。

3. UI 只辅助学习

本项目不是 UI 组件库。

CSS 只负责：

提高可读性
帮助区分结果
保证电脑和手机基本可用

真正的重点始终是：

JavaScript

4. 优先原生 JavaScript

第一阶段不使用：

React
Vue
jQuery
TypeScript
Node.js 框架
npm
Vite
Webpack
Babel
第三方 UI 框架

目的不是排斥这些工具，而是先把：

JavaScript 本身

真正理解清楚。

5. 不为了模块化而模块化

前面大部分实验只使用：

app.js

直到第 19 章才正式拆分 ES Modules。

原因是：

项目很小时，一个清晰的文件往往比多个小文件更容易维护。

只有当职责开始明显分离时，再拆分模块。

从“语法”到“项目”的变化

整个学习过程可以概括为：

01～04
学习程序语言基础
↓
05～08
学习数据结构
↓
09～12
学习网页交互
↓
13～16
学习数据管理
↓
17～19
学习现代 JavaScript
↓
20
组合成完整应用

最终目标不是背出所有 JavaScript 方法，而是看到需求时能够判断：

需要保存什么数据？
↓
Array / Object

需要什么逻辑？
↓
Condition / Function

需要修改页面吗？
↓
DOM

用户什么时候触发？
↓
Events

数据要保存吗？
↓
LocalStorage / JSON

数据来自外部吗？
↓
Fetch / Promise

代码开始变大了吗？
↓
Modules

与真实 Web 开发的关系

这些实验虽然很小，但背后的知识可以直接迁移到真实项目。

例如产品筛选：

Array
+
filter()
+
DOM
+
Events

Tabs：

dataset
+
classList
+
click

动态产品列表：

Array
+
Object
+
map()
+
Event Delegation

浏览器工具：

Form
+
CRUD
+
LocalStorage
+
JSON

API 页面：

Fetch
+
Promise
+
async/await
+
DOM

因此这些实验并不是彼此孤立的 Demo，而是一套逐步组合的基础知识模块。

第一阶段完成后的能力目标

完成 20 个实验后，建议至少能够理解：

JavaScript 中变量、数组、对象和函数的关系
如何通过数组方法处理一组数据
JavaScript 如何通过 DOM 控制 HTML
Event 如何驱动页面交互
Dataset 和 Class 如何管理页面状态
为什么动态列表适合使用事件委托
CRUD 的基本数据管理思想
表单数据如何进入 JavaScript
LocalStorage 与普通内存数据的区别
JSON 与 JavaScript Object 的区别
Promise 如何表示未来的异步结果
Fetch 如何读取外部数据
async/await 与 Promise 的关系
为什么项目变大后需要模块化
如何把多个基础知识组合成一个小型 Web App

后续扩展方向

第一阶段刻意控制在 20 个核心实验。

未来可以继续建立：