1.2 三班岗分工：结构、样式与行为的边界

1.2 三班岗分工：结构、样式与行为的边界

本节摘要：HTML、CSS、JavaScript 对应浏览器工厂里的结构班、样式班、行为班三支班组。本节给出三份岗位说明书：各自交付什么、不交付什么、通过什么界面交接，并用同一个"状态徽章"需求演示三班各自会怎么处理，帮助你建立全册最重要的分工直觉。

岗位说明书：三支班组各交什么活

工厂要把活干好，先得把岗位职责写清楚，避免两个班组抢着干同一件事，或者都以为对方会干。浏览器工厂的排班表很明确：结构班先上，交付页面骨架；样式班随后，给骨架装修；行为班收尾，接上电线让页面能对人的操作做出反应。三班共用同一张图纸（同一个页面），但各写各的文件、各用各的语法。

最后一列"绝不插手"最容易出事。新手常犯的越界有三类：用结构班的做法硬写样式（标签属性堆外观，改一处要翻全文档）；用样式班的语言干行为的活（指望样式能判断输入对错）；用行为班的方式补结构（页面内容全靠脚本生成，脚本一挂页面全白）。越界不是不能做，而是代价高、难维护——就像让电工来砌墙，不是不行，是返工的时候谁都不认识这堵墙。

交接界面：三班怎么传递成果

班组之间不直接修改对方的成品，而是通过明确的界面协作。样式班不改动骨架文件，它通过"选择器"点名结构班搭出的元素来装修；行为班也不重写骨架，它通过浏览器提供的文档对象模型接口（后续章节细讲）去增删改动。这套规矩带来一个重要的工程性质：三班的文件可以分别由不同的人维护、分别测试、分别替换。

图 1：三班岗的交接界面

图中最关键的一条线是行为班回通结构班的那条"合规通道"。行为班想改页面内容，不能直接去改结构班的源文件，而是在页面运行时通过文档对象模型去改动浏览器内存里的那棵元素树。这个通道是第 4 章的主战场，此处先记住结论：改动有通道，越界有代价。

同一个需求，三班各出什么力

拿看板里最典型的"状态徽章"需求做切片观察：工单状态分待开工、加工中、已完成，要用不同颜色的徽章展示。三班的分工如下。

结构班只负责把状态装进合适的标签，并留出可被点名的记号：

<!-- 结构班：只管装内容与留记号，不管颜色 -->
<span class="badge badge-pending">待开工</span>
<span class="badge badge-running">加工中</span>
<span class="badge badge-done">已完成</span>
<!-- class 就是留给样式班的挂钩：badge 说明它是徽章，后半段说明它是哪种状态 -->
​

样式班拿着记号写装修单，三种状态各配一套颜色，谁都不用回去动结构：

/* 样式班：对着挂钩装修，结构班一个字都不用改 */
.badge {
  padding: 2px 10px;        /* 徽章内边距：文字与边框之间留呼吸空间 */
  border-radius: 10px;      /* 圆角：数值越大越接近胶囊形 */
  font-size: 13px;          /* 徽章字号比正文略小 */
}
.badge-pending { background: #e0e0e0; color: #555; }  /* 灰：还没动工 */
.badge-running { background: #e3f0ff; color: #1a6ec8; } /* 蓝：机器在转 */
.badge-done    { background: #e2f6e9; color: #1e8e4e; } /* 绿：完工签收 */
​

行为班负责"变色"这件事的触发时机——操作工点击按钮，工单从加工中变成已完成，徽章跟着换装：

// 行为班：监听点击，切换挂钩，让样式班的新规则自动生效
button.addEventListener("click", function () {
  const badge = document.querySelector(".badge-running");
  badge.classList.remove("badge-running"); // 摘掉旧状态挂钩
  badge.classList.add("badge-done");       // 挂上新状态挂钩
  badge.textContent = "已完成";             // 顺手更新文字内容
});
​

三段代码各司其职：结构给容器和记号，样式认记号刷外观，行为在恰当时机换记号。将来需求变成"增加一种延期状态"，只需结构加一行、样式加一条规则、行为加一个分支，三班互不踩脚。这个微型切片值得反复回味，它是全书一切协作模式的母版。

⚠️ 常见坑：用行为班的脚本直接写死颜色（比如直接设置元素的色值）绕过样式班。偶尔为之无害，大面积这么干，装修规则就散落在几百段脚本里，重新设计配色的成本会指数上升。

从分工推出的学习策略

理解分工之后，学习路线自然浮现：按班组顺序学，每学一班就问两个问题——它向上游要什么、向下游交什么。结构班要的是内容策划，交的是带记号的骨架；样式班要的是骨架与设计稿，交的是规则表；行为班要的是骨架与业务规则，交的是会动的页面。本册第 2、3、4 章正是按这个顺序展开，每章开头都会先看该班组的交接单。

另一个推论是排错思路。页面出了问题，先判断是哪班的锅：内容不对找结构班，样子不对找样式班，反应不对找行为班。这个"先分诊再动手"的习惯，能帮你省下大量在错误文件里翻找的时间，第 4 章末尾的质检台一节会把分诊流程整理成清单。

补一句关于团队规模的话：小团队里常有一人身兼三班，大厂里三班可能分属不同小组。人怎么兼都行，文件的边界最好始终守住——三份文件泾渭分明，将来无论谁接手你的代码，都能按班索骥地找到要改的位置；边界一旦糊掉，接手的人（包括半年后的你自己）只能整页重读。

本节要点回顾

• 三班分工：结构班交骨架、样式班交装修单、行为班交电路图，各用各的语言各写各的文件；
• 交接界面：样式班靠选择器点名装修，行为班靠文档对象模型改树，互不直改对方源文件；
• 徽章切片：状态徽章需求的三段代码是全书协作模式的母版，值得反复回味；
• 越界代价：外观写死在结构里、内容全靠脚本生成，都是日后返工的重灾区；
• 排错分诊：内容、样子、反应三类问题分别去三个班组的文件里找原因；
• 学习策略：按班组顺序学，每班弄清它向上游要什么、向下游交什么。

分工既明，下一节把三班放进真实的加载过程，看流水线上各工序如何咬合。