序章：从切图仔到架构梦

一、像素的起点

2015年夏，我拿到第一份前端offer时，以为“切图仔”只是个谦称。直到主管把十七个PSD文件甩在我桌上：“下周五上线，首页要兼容IE8。”

那是我第一次知道，原来“兼容”不是形容词，而是动词——一种需要熬夜、掉发、对着不同浏览器骂脏话的持续性动作。我的工位上贴着三张纸条：一张写着“float闭合的六种方法”，一张画着“IE6 PNG透明修复流程图”，还有一张是外卖电话。

“会用jQuery吗？”面试官曾这样问我。我点头如捣蒜，其实只会$(document).ready()。入职后才发现，公司祖传代码里藏着这样的瑰宝：

javascript 复制代码

$('#submit').click(function(){
    setTimeout(function(){
        location.reload()
    }, 3000) // 等3秒让后端“处理一下”
})

没有Promise，没有async/await。我们用回调地狱搭建业务逻辑，用$.ajax的success和error回调函数体会人生的起落。那时我以为，$(this)就是前端世界的哲学终极——你永远不知道它真正指向谁，就像不知道产品经理明天会不会改需求。

那个改变一切的夜晚来得毫无征兆。凌晨两点，我盯着控制台里密密麻麻的“Uncaught TypeError”，突然意识到：我在写的不是代码，是定时炸弹。

项目用了三个不同版本的jQuery插件，它们互相覆盖$变量；CSS文件有四千行，其中.clearfix出现了四十七次；有个叫global.js的文件，里面定义着从表单验证到轮播图的所有功能。

“我要重构。”第二天我对主管说。他看了我三秒钟，笑了：“你知道上一个说这话的人去哪了吗？去写PHP了。”

但我还是偷偷开始了。把那个global.js拆成模块时，我发现了2013年留下的注释：“// 这里有个bug，但客户没发现，先别动”。原来我们不是代码的创造者，只是祖传bug的守护人。

2016年春天，技术选型会成了修罗场。会议室的白板上画着三条路：

左边是React，写着“虚拟DOM、组件化、生态繁荣”，下面有人用红笔补了一句：“学习曲线陡峭，JSX像邪教”。

中间是Angular，挂着“大厂背书、全家桶、TypeScript”，旁边贴着便利贴：“太重，像开航母买菜”。

右边是Vue，画着星星和爱心，有人写着“渐进式、中文文档、尤雨溪帅”，下面被杠掉改成：“会不会太小众？”

主管最后拍板：“先用jQuery顶着，等生态成熟。”散会后，老张拍拍我的肩：“知道为什么吗？因为客户用的是Windows XP+IE8，而框架的README第一行写着：不支持IE8。”

那天我明白了一个道理：技术选型不是选择最好的，而是选择能活下去的。

真正触动我的，是一次线上事故。促销活动零点开始，服务器在23:59崩溃。我们紧急回滚，发现是因为某个JS文件加载顺序错了——两个互相依赖的脚本，在合并压缩后失去了先后顺序。

“我们需要构建流程。”我说，“需要模块化，需要依赖管理，需要自动化测试。”

主管问：“要多久？”

“三个月。”

“给你三周。因为下个季度要搞小程序了。”

就是从那天起，“架构”这个词在我心里生了根。它不再是技术博客里的炫酷概念，而是血泪教训换来的生存法则——是让代码在深夜两点还能被看懂的能力，是让新同事三天就能上手的文档，是让线上事故减少十分钟的监控体系。

我开始利用一切时间学习。通勤地铁上看Webpack配置，午休时调试Babel插件，周末对着电脑屏幕喃喃自语：“Tree shaking到底摇了什么？”

有次妻子问我：“你最近老说梦话，什么loader、plugin的，是不是压力太大了？”

我想了想，没告诉她，我昨晚确实梦见了自己写的一个webpack插件，它因为循环依赖在梦里追着我跑了三条街。

代价是真实的：颈椎开始报警，发际线稳步后移，体检报告多了“视力快速下降”和“轻度脂肪肝”。但每当我把混乱的代码整理干净，把构建时间从五分钟降到三十秒，那种快感就像第一次写出“Hello World”。

现在回头看，切图的那两年不是弯路，而是必修课。正因为亲手用float和position一个像素一个像素地对齐过，我才理解CSS Grid和Flexbox的革命性；正因为被IE的盒模型折磨过，我才珍惜现代浏览器的标准化；正因为维护过五千行的jQuery文件，我才渴望组件化的清爽。

架构梦不是要成为CTO，而是想建立一种秩序——在需求永无止境的变化中，在技术日新月异的迭代中，创造一块能让代码优雅生长、让团队高效协作、让业务稳定运行的土壤。

电梯里遇到新来的实习生，他问我：“前辈，怎么才能快速成长？”

我想了想，说：“先学会切图。不是用工具自动导出，而是亲手写每个CSS属性，理解每个标签的语义，感受每个选择器的权重。然后，你会开始痛恨混乱，渴望秩序——那就是架构梦开始的时候。”

电梯门打开，走廊尽头的窗户透进夕阳。我知道，属于jQuery的时代正在落幕，而我的故事，才刚刚写完序章。