精妙的 JavaScript：编程的现代入门

📚 内容概要

一本关于使用 JavaScript 进行现代编程的全面指南。课程涵盖编程基础原理、JavaScript 语言规范、浏览器集成以及基于 Node.js 的服务器端开发，包含五个真实世界的项目应用。

深入而优雅地探索 JavaScript 编程的核心。

作者： Marijn Haverbeke

致谢： 得到 454 名财务支持者的资助；插图由 Wasif Hyder、Max Xiantu、Margarita Martínez、José Menor、Jim Tierney、Dyle MacGregor、Jeff Avallone、Thomas Palef 及 Antonio Perdomo Pastor 绘制。

🎯 学习目标

1. 定义程序的概念，并解释计算机语言中不同抽象层次。
2. 使用 JavaScript 数字和算术运算符生成数值。
3. 声明并更新变量，同时遵守命名规范和保留字限制。
4. 使用 do 循环、for 循环和 switch 语句实现稳健的控制流，并通过缩进和注释保持代码整洁。
5. 使用多种语法定义和调用函数，处理参数、可选参数及嵌套词法作用域。
6. 应用递归、闭包和调用栈等高级函数式概念来解决复杂的算法难题。
7. 利用专门的对象和数组方法管理复杂的数据结构和字符串。
8. 实现高阶函数（filter、map、reduce），抽象逻辑并组合数据转换。
9. 遍历和操作原型链，创建结构化、可复用的对象实例和多态接口。
10. 实现多态接口以处理复杂的数据可视化（表格）。

🔹 第一课：JavaScript 基础与程序结构

概述： 本课介绍使用 JavaScript 的编程基础概念，从程序的哲学定义过渡到代码的实际机制。学生将探索数据如何通过类型和比特表示，如何使用运算符操作值，以及如何通过变量、表达式和语句组织程序。课程还涵盖 JavaScript 的独特行为，如自动类型转换和短路求值。

学习成果：

• 定义什么是程序，并解释计算机语言中的不同抽象层次。
• 使用 JavaScript 数字和算术运算符生成数值。
• 声明并更新变量，同时遵守命名规范和保留字限制。

🔹 第二课：函数与复杂数据结构

概述： 本课探讨结构化编程的基本构建模块，重点在于高级控制流、函数式编程技巧以及复杂的数据组织方式。学生将掌握如何在函数中封装逻辑，通过作用域和闭包管理变量可见性，并操作可变对象以分析现实世界数据（如统计相关性）。

学习成果：

• 使用 do 循环、for 循环和 switch 语句实现稳健的控制流，并通过缩进和注释保持代码清晰。
• 使用多种语法定义和调用函数，处理参数、可选参数及嵌套词法作用域。
• 应用递归、闭包和调用栈等高级函数式概念来解决复杂的算法难题。

🔹 第三课：高阶函数与原型

概述： 本课探讨从基本数据操作向高级函数式与面向对象模式的转变。内容包括使用 Map 和全局对象高效存储数据，高阶函数的强大功能（用于抽象操作，如过滤、转换和汇总），以及 JavaScript 对象系统的底层机制，包括原型、构造函数和多态性。

学习成果：

• 使用专门的对象和数组方法管理复杂的数据结构和字符串。
• 实现高阶函数（filter、map、reduce），抽象逻辑并组合数据转换。
• 遍历和操作原型链，创建结构化、可复用的对象实例和多态接口。

🔹 第四课：面向对象编程与错误管理

概述： 本课探讨 JavaScript 中的高级面向对象模式，聚焦于通过表格布局接口实现的多态性，以及模拟生态系统（“电子生命”）的设计。课程进一步转向软件可靠性，涵盖“严格模式”、调试技术，以及结构化测试的重要性，以减少程序员常见的错误。

学习成果：

• 实现多态接口以处理复杂的数据可视化（表格）。
• 对比继承与组合，构建可扩展的对象结构。
• 管理高阶函数和对象方法中的执行上下文（this）。

🔹 第五课：模式匹配与模块化

概述： 本课涵盖现代编程的双重需求：处理复杂字符串数据，以及将代码组织成可维护的结构。学生将学习使用正则表达式描述和操作文本模式，随后探索模块化，以隔离代码、管理命名空间并促进重用。

学习成果：

• 使用字面量和构造函数语法构建并测试正则表达式。
• 实现高级模式匹配技术，包括分组、回溯和非贪婪重复。
• 应用模块化设计原则，防止命名空间污染并解耦程序组件。

🔹 第六课：语言设计与网络环境

概述： 本课探讨从结构化软件设计到自定义编程语言“Egg”创建的过渡。进一步将这些概念延伸至网络环境，详细说明网络、HTML 和文档对象模型（DOM）如何共同构成浏览器的可编程界面。学生将学习通过模块化管理代码复杂度，并使用 JavaScript 操控实时网页文档。

学习成果：

• 使用 define 函数实现稳健的模块系统，并管理复杂依赖。
• 构建一个功能完整的领域特定语言解析器和求值器，包括作用域和函数支持。
• 解释网络架构，包括 TCP/IP、HTML 结构，以及浏览器沙箱的安全影响。

🔹 第七课：事件与交互式平台

概述： 本课探讨文档对象模型（DOM）操作、CSS 样式与复杂事件处理之间的协同作用，以创建交互式网页体验和游戏。学生将学习控制布局与动画，管理用户输入的异步特性，通过时间技术优化性能，并使用面向对象原则架构一个基于网格的平台游戏。

学习成果：

• 操作 DOM 布局与样式：使用 JavaScript 读取元素尺寸，应用级联样式，并通过 CSS 定位和三角学实现元素动画。
• 掌握事件编排：实现高级事件处理，包括传播控制、阻止默认行为，以及管理特殊事件（键盘、鼠标、滚动和焦点）。
• 优化脚本执行：使用 Web Workers 进行后台处理，并利用防抖和节流技术管理高频事件。

🔹 第八课：画布图形与网络协议

概述： 本课探讨从基于 DOM 的游戏渲染过渡到高性能的 HTML5 Canvas API，同时介绍 2D 平台游戏物理的基础机制。学生将学习实现复杂的游戏逻辑，包括重力和碰撞检测，同时掌握命令式绘图技术。此外，课程还将引入 HTTP 协议和 XMLHttpRequest 对象，用于处理客户端-服务器通信。

学习成果：

• 在游戏环境中实现基于网格的碰撞检测和重力驱动运动。
• 使用 HTML5 Canvas API 渲染路径、曲线、图像和动画精灵表。
• 应用坐标变换（缩放、旋转、翻转）并使用 save 和 restore 管理上下文状态。

🔹 第九课：高级表单与持久化应用

概述： 本课探讨高级网页开发技术，重点关注通过 XMLHttpRequest 和 Promise 实现异步通信，深入交互 HTML 表单字段，以及客户端数据持久化。学生将学习配置和执行带有自定义头的异步网络请求，并通过构建模块化绘画应用和持久化笔记工具，处理异步流程中的错误。

学习成果：

• 使用 XMLHttpRequest 和基于 Promise 的链式调用配置并执行异步网络请求。
• 操作复杂的表单行为，包括焦点管理、字段禁用和文件处理。
• 使用 localStorage 和 sessionStorage 实现客户端数据存储，以维持应用状态。

🔹 第十课：使用 Node.js 的服务器端开发

概述： 本课弥合了高级客户端交互性与服务器端逻辑之间的差距。学生将首先掌握复杂的画布操作工具和浏览器安全限制，然后进入 Node.js 环境，构建异步文件服务器和使用长轮询与 RESTful 路由的实时网络应用。

学习成果：

• 实现高级绘图工具（直线、擦除、喷漆、填充），并管理画布安全（污染问题）。
• 使用 Node.js 执行服务器端脚本，通过 NPM 管理依赖，并使用回调和 Promise 处理异步 I/O。
• 构建一个功能完整的 HTTP 服务器，能够执行文件操作、处理 JSON 请求，并通过长轮询实现实时更新。