第 6 章 进阶审理

第 6 章 · 进阶审理：交互、无障碍、性能与工程化

章节摘要：前五章解决了「页面长什么样、怎么改」，本章审四个工程维度：JavaScript 交互的两种接线方式（data 属性与脚本 API）、无障碍访问的硬性判例、性能预算与裁剪策略、构建工具链与框架集成及版本迁移。这四案决定一个 Bootstrap 项目是「能跑的演示」还是「能上线的工程」。

学习目标

阅读完本章，你应当能够：

1. 用 data 属性与脚本 API 两种方式驱动同一组件，并监听组件事件完成联动逻辑；
2. 按语义优先、aria 补位、焦点可管理的三原则写出读屏与键盘可用的界面；
3. 给页面做体积预算，并用按需引入、脚本拆分、图片懒加载把首屏压进预算；
4. 用现代构建工具跑通 Sass 定制流水线，判断与 React、Vue 集成时的选型，并执行 4 到 5 的迁移清单。

核心概念速览

四案共同的底层判断：框架给的是下限，不是上限。data 属性能开弹窗，但焦点管理要自己补；默认包能跑，但预算要自己压。

子章节导航

6.1 JavaScript 组件与交互

两种接线、一批事件、一个销毁纪律。弹层组件背后还有 Popper 的定位逻辑，值得单独看清。

6.2 无障碍访问

语义 HTML、aria 属性、焦点管理、键盘路径、色彩对比——五组硬判例，条条对应读屏与键盘用户的真实体验。

6.3 性能优化

先立预算再谈优化：CSS 按需编译、JS 模块化引入、图片懒加载、字体加载策略，四刀下去首屏立减。

6.4 构建工具与框架集成迁移

用 Vite 跑通 Sass 流水线；React、Vue 生态的封装库选型观；4 到 5 的迁移清单。

子章节之间的逻辑关系

四案相对独立，可按需跳读；但 6.1 的焦点管理埋线给 6.2，6.3 的按需裁剪依赖 5.1 的模块化入口，6.4 是前三案工程化的落点。

6.1 交互接线 ──► 6.2 无障碍补位（焦点与 aria）
      │
      └──► 6.3 体积预算（依赖 5.1 按需入口）
                  │
                  └──► 6.4 构建与集成（全部收进工具链）
​

本章知识点清单

逐条可考核，学完本章请自查：

1. 能用 data 属性与脚本 API 两种方式驱动同一个弹窗，并说出各自的适用场景——声明式省代码、命令式可控时机，混用时要留一个唯一入口；
2. 能解释 dispose 与 hide 的区别：后者只是关掉、实例还在，前者连监听与数据一并销毁，单例组件（offcanvas）用错会直接抛错；
3. 能写出至少三个组件事件的完整名字（show.bs.modal、hidden.bs.modal、shown.bs.dropdown），并知道在 show 里 preventDefault 可以拦下这次打开；
4. 能背出语义优先的替换清单：可点的一律 button、导航列表用 nav 包 ul、标题不用加粗段落凑数；
5. 能判断 aria-expanded、aria-controls、aria-label 各自的补位场景——折叠按钮要前两个，纯图标按钮要第三个；
6. 能说清焦点环为什么不能删，以及用 focus 工具类与 :focus-visible 替代 outline:none 的正确姿势；
7. 能给自己的页面立体积预算（样式、脚本、图片分列），并用按需编译 CSS、模块化引 JS、懒加载图片三刀把首屏压进预算；
8. 能执行 4 到 5 的迁移三大块：data- 前缀改 data-bs-、left 与 right 改 start 与 end、jQuery 依赖整体退场。

前置知识与后续延伸

• 前置知识：第 3 章组件结构；第 5 章 Sass 定制（6.3、6.4 直接复用）；能读懂简单 JavaScript。
• 后续延伸：第 7 章实战把本章四案全部落地：交互接线、无障碍自查、预算达标、构建产物验收。