![](https://box.kancloud.cn/2015-10-26_562db44f9c9d8.jpg)
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重构到底是什么?它的价值又会是什么?**
![](https://box.kancloud.cn/2015-10-26_562db44fbffe0.jpg)
自从2004年以后从事重构工作的同学或许只懂DIV和CSS(最起码我就是这样的,或许也有很多同学跟我一样),也是自己的看家本领,或者说是吃饭的饭碗吧。最主要的工作内容也就是将PSD设计图转换成HTML和CSS。还有一个最大的任务就是当时引以为豪的,兼容IE5~IE6。我们能把跨浏览器的兼容做好,这也是我们最牛的地方。
而这个时候,我们很多重构工程师觉得自己的工作职责就是写HTML和CSS,然后最大的任务就是将设计师的PSD设计图转换成Web页面。这份工作说实话,只做一天或两天会觉得很有意思,因为即写即见。现再加上一些CSS3的点饰,还能做做动漫效果,也有新鲜感。但天天如此,你会还有新鲜感存在?你可能就会觉得这是多么的枯燥与机械。
加上重构是设计师、交互设计的下游,但又是后端程序的上游。这样也造成了重构工程师是多么的苦逼。假设一个项目的工期已定,但由于各种原因,设计师耽误了时间,而整个项目不会给你太多额外时间,也造成了重构工期的缩短。在现实工作中常常会有这样的现象,设计师花了四天时间设计,而原型页面次日就需要,为了不被扣上“不配合团队合作”,“不高效”的名头,重构也只能委屈求全,加班加点。所以很多重构工程师会认为自己在团队不被认可、不被重视、不公平等。
![](https://box.kancloud.cn/2015-10-26_562db44fd349c.jpg)
其实我在思考,我们重构不只是说我们把设计图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所说**专业的人做专业的事**。这也是为什么还有一些团队有“重构工程师”的存在。
重构是**技术、数据、情怀、人文为主导的交互优化**。虽然说重构是屌丝,但我们还是要有点追求。大家可能会说,不就是一切图的吗?但做我们专业挥刀切图的人不能自己说自己的切图的,或者自认为只切图,如果是这样,你可能将永远是一切图的。我们应该破茧而出,突破自我。