重构的今生

 2004年傅捷、王宗义和祝军翻译了美国塞尔达曼（Zeldman J.）的著作《网站重构》一书。这本书出来受到广大Web爱好者的青眯，可以说让国内整个前端行业(那时还没有前端这样的职位)发生了很大的一个变化。我记得那时候，淘宝UED说:"**我们要做地球上最优秀的前端**"。 这本书称得上是给整个行业带来了革命性的变化，而就这场革命也造就了“21世纪最大的IT冤案”。为什么说是21世纪最大的IT冤案呢？只要2004年以后看了这本书的同学(并不是所有同学(^_^))，只要看到Web页面源码中有`table`标签，就会说这个不行，写这个页面的人不专业，页面也是垃圾，不符合W3C规范。其实这本书从来也没有说网页出现`table`标签就是垃圾网页，就是不符合W3C标准的页面。 除了造成21世纪最大的IT冤案之外，还有**灾难性的DIV+CSS的泛滥**。出现最多的词就是DIV，大家觉得我会DIV，我就很高大上。而且整个页面下来，除了DIV，就是DIV。什么P标签、SPAN标签基本上是找不到。这个时候就是DIV的泛滥，根本也没有什么语义化，可读性一说了。 甚至以前听到过这样的一个故事。故事是发生在一位面试官面试一位求职者，大致的对话是这样的： 面试官：同学，你来我团队打算做什么？ 求职者：(非常自信)我来你们公司把所有带有`table`的页面用DIV+CSS重构。 面试官：(很纳闷)实在不好意思，我们公司所有的页面都改成了DIV和CSS，怎么办？ 求职者：(无语、不吭声)... 从这个故事说明，DIV+CSS是多重的"**NB**"。从侧面也说明，**只要懂DIV，都觉得懂Web，都符合W3C规范，都高大尚**。其实这个陋习直到今天都还有，在很多坛子里，讨论中，甚至在很多求职者的简历、公司的招聘中都还能看到"懂DIV+CSS"、"将PSD转换成DIV+CSS"之类。可想而知，难道大家就从未思考过，整个HTML就只有DIV？整个Web页面只就是DIV+CSS了？ 随着时间的变更，时代的进步。我们贴上的标签不再是“**网页设计师**”或者说“**美工**”了，而是换成了“**切图**”、"**页面仔**"等。同时也被认为同行业中最**没“钱”途**。因为工作中只写HTML和CSS，绝对没有前途，而且待遇也低。主要是因为，很多人认为不就是写个DIV和CSS嘛，谁都会。就算是从未接触过这方面的同学，拿一两本书啃一两个星期就会写。也造就了入门门槛非常低。 经历过这些的时候，我坐下来重新静下来思考：**我们Web重构到底是什么？它的价值又会是什么？**  自从2004年以后从事重构工作的同学或许只懂DIV和CSS（最起码我就是这样的，或许也有很多同学跟我一样），也是自己的看家本领，或者说是吃饭的饭碗吧。最主要的工作内容也就是将PSD设计图转换成HTML和CSS。还有一个最大的任务就是当时引以为豪的，兼容IE5~IE6。我们能把跨浏览器的兼容做好，这也是我们最牛的地方。 而这个时候，我们很多重构工程师觉得自己的工作职责就是写HTML和CSS，然后最大的任务就是将设计师的PSD设计图转换成Web页面。这份工作说实话，只做一天或两天会觉得很有意思，因为即写即见。现再加上一些CSS3的点饰，还能做做动漫效果，也有新鲜感。但天天如此，你会还有新鲜感存在？你可能就会觉得这是多么的枯燥与机械。 加上重构是设计师、交互设计的下游，但又是后端程序的上游。这样也造成了重构工程师是多么的苦逼。假设一个项目的工期已定，但由于各种原因，设计师耽误了时间，而整个项目不会给你太多额外时间，也造成了重构工期的缩短。在现实工作中常常会有这样的现象，设计师花了四天时间设计，而原型页面次日就需要，为了不被扣上“不配合团队合作”，“不高效”的名头，重构也只能委屈求全，加班加点。所以很多重构工程师会认为自己在团队不被认可、不被重视、不公平等。  其实我在思考，我们重构不只是说我们把设计图99.99%的还原就称作**重构**。我觉得重构是一种修改。为什么是一种修改呢？大家平时工作有没有这样的一个感觉，你有多少页面是从头到尾把设计图转换成Web页面？特别是大公司、大团队，很多时候产品或交互设计师之类会跟你说，今天是中秋节，我们要上下嫦娥的图，你帮我换换呗。也就这样，换个图就完成了。那么事实上，你在做这件事情的时候有没有想过，是每次都这样重复做这件事情，还是有去思考，再下次出现类似需求时，不需要你来完成，让工具或运营人员自己就能完成呢？ 还有我们做修改时，不仅仅是改变一种展示效果而以，我们更应该去思考修改的过程，思考以前代码结构是不是合理？如果不合理，就要改，要怎么改。其实这也是一种重构。 第二种重构的意义，是让内部结构更简单。为什么这么说呢？可能你的上一位写HTML和CSS同事是刚刚入行的同学，结果被你老大觉得可能不行，重新招你这位“重构大师”来掌舵。此时的你，将代码变得更简单，那么这个过程其实也是重构。 第三就是有节制的整理代码。并不是代码最少，最简洁就是最优秀的代码。往往很多时候，很多同学在为多一个DIV和少一个DIV争得头破血流。那么是否有真正的想过，多一个DIV就真正的不合理？往往很多时候，不是说你的结构少套一个DIV就合理，我们应该根据自己的业务需求去做平衡。其实这样的一个过程也是重构。 第四就是使用Bug产生率最小化。做过IE低版本兼容的同学或许有这样的感触。为什么在现代浏览器下，页面很完美，一到IE低版本就乱了呢？此时很多人都想尽各种hack来处理，但是否有真正的想过，自己的结构是否合理，是不是自己的代码出了问题呢？而这样让Bug产生率最小化也是一种重构。 除此之外，重构不仅是还原一张设计图，我们存在的意义需要去做更多的思考。如何让更多的同学、更快的还原设计图。而且还原设计图的这个过程更简单化、更标准化。 那么Web重构到底是什么？ 我是这么认为的(**仅个人认为，并不代表权威**)： 重构应该是一种**思想和理念**。虽然从事重构工作，活简单，但我们也要有想法，想怎么去把事做得更好。而且我们还要有追求，不难仅追求99.99%还原设计稿，我们应该追求更多，在还原过程中想，怎么还原到让用户用起来更爽。 重构也是**行内分工的优化,是HTML、CSS和JS的分离及优化**。谁擅长什么就做什么？第一做起事来顺手，成本也低。比如说，你让一位擅长JS的同学去写HTML和CSS，结果写得不好，Bug也出来了，让他调要调半天。从这一点来说，分工还是有好处的。正如@sofish所说**专业的人做专业的事**。这也是为什么还有一些团队有“重构工程师”的存在。 重构是**技术、数据、情怀、人文为主导的交互优化**。虽然说重构是屌丝，但我们还是要有点追求。大家可能会说，不就是一切图的吗？但做我们专业挥刀切图的人不能自己说自己的切图的，或者自认为只切图，如果是这样，你可能将永远是一切图的。我们应该破茧而出，突破自我。