1.1 前端开发是什么：从地址栏回车说起
1.1 前端开发是什么：从地址栏回车说起
本节摘要：前端开发是负责浏览器里一切用户体验的工种——页面长什么样、点什么有什么反应、数据怎么展示，都归它管。本节从"按下回车之后发生了什么"这个日常场景出发，讲清前端的职责边界、工作产物与协作对象，并引入贯穿全册的案例载体：青云精密制造的车间生产看板。
从一个再熟悉不过的场景说起
每天你都重复同一个动作：打开浏览器，敲网址，回车，页面出现。把这个动作放慢一百倍，会看到一条完整的产业链——你的请求穿过网络到达远端的服务器，服务器把一份写满标签的文档送回来，浏览器在自己的地盘上把这份文档变成你眼前的页面。前端的领地，就是最后这一段：从文档抵达浏览器开始，到像素出现在屏幕、手指点击产生反应为止。
所以前端开发者的工作产物很具体：三种文本文件。一种描述内容与结构，一种描述外观与布局，一种描述行为与交互。没有编译成神秘的二进制，没有机房里的服务器要守——写的是文本，交付的是体验。这也是它适合入门的原因：工具轻、反馈快，保存文件刷新浏览器就能看到成果。
图 1：前端在整条链路上的位置
职责边界：管什么，不管什么
把边界说透，比背定义有用。前端管的是"用户看得见摸得着的一切"：页面结构、视觉样式、点击响应、输入校验、加载体验。前端不管的是"数据最终算得对不对、存在哪里、谁能看"——那是后端的领土。两边在"接口"处交接：前端发起请求、展示数据，后端核对权限、返回结果。
一个直观的例子是登录页。输入框、按钮、密码可见切换、格式不对时的红字提示，全是前端的活；判断账号密码是否匹配、发放通行凭证，是后端的活。前端做校验是为了体验（立刻告诉你格式错了），后端做校验是为了安全（绝不信任何来自浏览器的话）。这个分工意识从第一天就要建立。
日常工作中，前端还大量对接另外两种角色：设计师交来视觉稿，前端负责翻译成样式代码；产品经理交来需求文档，前端评估交互如何实现。所以有人调侃前端是"翻译官"——把设计稿翻译给浏览器，把用户操作翻译给服务器。翻译质量的高低，直接决定页面的成色。
接口：前后班组的交接窗口
边界说清了，再看交接面的形状。前端与后端之间传递东西靠接口：前端发请求，后端回数据，一来一回大抵如此。以看板要用的"取今日工单"为例，这次交接长这样：
一次接口交接的往返（看板取工单）： 前端发问：给我今天的工单列表，按创建时间倒序 后端回答：一段结构化文本，逐条列出工单 工单甲：编号、产品、工序、负责人、状态 工单乙：……依此类推 前端接手：把这段文本解析后，变成页面上的表格行
这次往返里立着新手工位上就该知道。其一，接口是契约：字段叫什么、状态用什么值表示、排序按什么规则，两边事先约定好，任何一边悄悄改动，另一边就收不到货。其二，前端的职责止于"按契约正确地发问、忠实清晰地展示"——数据本身算得对不对，是后端与数据库的事，别往自己身上揽，也别替后端省掉校验。其三，网络会慢、会断、会出错，页面必须为"货没到"准备状态：加载中要有交代，失败要有提示，空列表要有说法。这三种状态怎么写，属于第 4 章行为班的教学内容，此刻先把"交接面有契约、有失败可能"的印象立起来，后面学到请求一节你会想起这里。顺手记一个词：前后端各写各的代码、靠契约对表协作，行业里叫前后端分离，如今已是主流分工形态。
贯穿全册的案例：车间生产看板
空讲边界容易飘，本册给你一个真实的施工对象。虚构的青云精密制造厂需要一张车间生产看板：车间主任早上打开它，看到今天的加工工单；操作工完成一道工序后点一下按钮，工单状态随之流转；来新任务时在表单里登记，看板立刻多出一行。页面不大，五脏俱全——有结构（表格、表单、标题），有样式（状态徽章的颜色、卡片布局、手机适配），有行为（增删改查、数据保存）。
接下来三章，三个班组轮流在这张看板上施工，你现在就可以看一眼它的最终形态长什么样：
<!-- 生产看板的骨架草案：结构班交付的毛坯，仅示意区块划分 --> <body> <header>厂名与日期</header> <section>统计卡片：进行中 / 已完成 / 今日新增</section> <table>工单列表：编号、产品、工序、负责人、状态</table> <form>新增工单：产品名、工序、负责人、优先级</form> <footer>厂区说明</footer> </body>
看板的需求清单（模拟产品经理的原始口吻）： - 打开就能看到今天所有工单，一眼分清哪些还在加工 - 状态要分颜色：待开工灰、加工中蓝、已完成绿 - 新工单登记不能超过半分钟，填错要当场提示 - 车间平板和办公室电脑都要能看，字号不能糊 - 断电重开页面，已登记的工单不能丢
第二条代码块列的是需求清单，它刻意写成产品语言而不是技术语言——真实项目里，把这种口语需求翻译成"要用哪种技术实现"，正是前端每天的基本功。最后一条"断电不丢"在本册会由行为班用浏览器本地存储解决，现在不必深究。
💡 一个判断自己是否适合前端的土办法：改一行样式、刷新页面、看到变化，如果你对这个循环感到上瘾而不是厌倦，这份工作会给你持续的即时反馈。
这个工种的现在与将来
前端历史上有过"切图仔"的旧称——早年只负责把设计稿切成图片拼页面。如今的前端早已是正经的软件工程岗位：代码要进版本库、要过规范检查、要做性能预算、要防安全漏洞。本册第 5 章会专门讲这些"工程化"内容。同时，前端的技术半径也在扩大——用同一种语言可以写手机应用、写桌面软件、甚至写服务器程序。入门阶段不必被这些吓到，万变不离其宗：浏览器里的结构、样式、行为，永远是地基。
常见的一个顾虑是"现在都用框架了，直接学框架行不行"。框架能替你省掉重复劳动，但省不掉理解：框架报错时，你需要看得懂它操作的是哪棵树、改的是哪段样式、监听的是哪个事件——这些恰恰是本册三章的内容。地基和楼房不冲突，先住平房再搬高楼，比直接住在悬空楼阁里踏实。
本节要点回顾
- 前端领地：从文档抵达浏览器到像素上屏、用户操作产生反应，中间的一切归前端；
- 工作产物：描述结构、样式、行为的三种文本文件，写的是文本，交付的是体验；
- 职责边界：前端管体验与展示，后端管数据与裁决，两者在接口处交接；
- 多方协作：翻译设计稿、评估产品需求、对接后端接口，是日常的隐形工作量；
- 案例载体：青云精密制造的生产看板将贯穿全册，本节已见其骨架草案与需求清单；
- 学习次序：框架是效率工具而非理解替代品，三门基础语言先立地基。
下一节进入厂区内部，看三支班组如何划分各自的岗位。