Web重构之道

前言

Web重构之道是今年十月份参加 上海Qcon全球软件开发大会 的 新时代的前端 专题的一次分享的主题。这次有幸能跟 @达峰 、 @sofish 、 @桂川 等大神一起同台分享，感到非常的荣幸，也感到无比的压力。还好分享已结束，借此机会重新回忆这次大会上自己分享的主题。在此之前我首先要感谢@贺佬给我上台分享的机会，感谢@winter大大的推荐、建议与鼓励。最后感谢Qcon提供这样的分享平台。

分享感觉

虽然技不如人，而且懂得知识也少，干货不多，但我是一位爱于分享的人。也是第一次到QCon这种高大上的会议上分享，加上@sofish、@达峰、@桂川、@王沛和@佳辰几位嘉宾 分享的主题 都是一些高大上的话题，让我感觉压力很大。加上自己国语不标准(被@点头猪称为 鞋城 国语“最好”一位)，生怕把@贺佬的场子给砸了。不过好在一点，以前也经历了一些“场子”，学会一些自黑,不会怯场，最主要的还是自己的脸皮厚如城墙(毕竟是人老了，皮糙肉厚)。

分享的主题

这次分享的主题是“Web重构之道”。重构在当今的Web时代是一个含“金”量最低的职位，而重构之道是具有历史的一个话题，做为所谓的“Web 重构工程师”（其实就是一“页面仔”）我想借这样的机会分享自己对重构是怎么样的理解。选择“重构”并不证明我是有多爱重构，其实我也很恨它，想做别的， 只不过是自己学有所限，做别的无法做，也做不了。那么既然无法做别的，只能努力好做。不是自古有人说，“三百六十行，行行有状元”。虽称不上状元，但我想 通过分享告诉正在做重构的从业人员能重新思考与定位重构。或者说自己的职业规划。

这个话题分享我主要分为了三个部分：

• 我是怎么理解曾经的重构（ 前世 ）
• 我是怎么看现在的重构( 今生 )
• 将来的重构又是什么( 未来 )

简单点说就是：以前的重构，或者以前做Web网页的人，对重构是怎样一个看法？然后今生，你们玩高大上的时候还有多少人在苦逼的切图？然后未来，像我这样的伪前端，将来要怎样生存，或者有怎样的思考？。

重构的前世

上图是2003年淘宝的一个页面，现在要看到这张页面是件比较困难的事情，或许也没有多少人看到过这张图。不过做为Web开发者，我们不仿来分析一下这样 的Web页面。这个页面有一个很大的特色，整个页面除了图片、文本链接等，就没有别的了。而对于那个年代的Web页面，都是这样的特色，当然有的页面还会 配些Flash动效（这样的页面是当时先进的、高档的页面）。另外一些网站页面会有跑马灯的文字动效或者 <blink> 标签制作的闪烁文字效果。

那个时候也没有重构一说，大家给我们这群人定义的标签就是“ 网页设计师 ”。其实这个称谓称得上是高大尚。当然那个时候，网页设计师拿的也是高薪。除此之外，还被冠上“ 美工 ”称谓。在大多数人的眼里，还称不上是设计师，顶多就是一美工，拿几张图拼一拼，一个Web页面就出来了。怎么就称得上是网页设计师了呢？而且那个时 候，Web并不很看重，很多企业都没有自己的官网。因为那个时候，企业主都觉得Web网页并不能给他们带来任何的收益，而且自认为业绩好，为什么还要花钱 去做这样的事情。

而这个时代，对于Web重构师而言，他的价值也并无法更好的体现。用图将Web页面拼出来，这就是他存在的价值。

重构的今生

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所说 专业的人做专业的事 。这也是为什么还有一些团队有“重构工程师”的存在。

重构是 技术、数据、情怀、人文为主导的交互优化 。虽然说重构是屌丝，但我们还是要有点追求。大家可能会说，不就是一切图的吗？但做我们专业挥刀切图的人不能自己说自己的切图的，或者自认为只切图，如果是这样，你可能将永远是一切图的。我们应该破茧而出，突破自我。

重构的未来

以前我们做重构，只是考虑如何将PSD转换成HTML和CSS页面。但往往这样是不够的，我们应该去考虑更多的事情。

比如说，我们应该去思考怎么和PD、用研、交互、程序等等打交道，考虑工程化等等。

可能有人会说，你站在台上吹牛，可知民间疾苦。也有很多人可能更想知道，在手淘这样一个高大尚的团队怎么做重构？那么我们来看看一个简单的示例。

如上图所示，这不仅仅是在淘宝、手淘中有，估计只要是做Web的，都可能会碰到这个东东。相信你们的产品里也有这个东东。不同的产品、不同的业务线、不同的页面都可能有。那么怎么做？

从示意图，不难发现他们有一些共性：

• 嵌套
• 左边是图、右边是文本
• 有按钮

也发现他们有一些不同之处：

• 左边的图不一样，有圆的、方的、大的和小的这些不确定因素
• 右边的内容有单行的、多行的
• 标题有顶端对齐的、垂直居中的
• 右边内容不固定
• 宽度不固定

上图我是从淘宝页面上截图过来的代码示意图。或许你看到这样的代码之后，你也会摇头说“这么优秀的团队怎么也写出这么差的代码”？在任何一个优秀 的团队，都会有不同水平的人员。A工程师觉得上一部分代码并没有问题，然后B工程师觉得下部分代码也是OK的。如此一来，就会有六种不同的结构，不同的样 式代码。但对于一位"专业的"重构人员来说，他是没有办法接受的。

我们不仿仔细看看，不管哪一种风格，他都分为三个部分。如此一来整个结构就非常的清晰：

将左边的图和右边的按钮称为 .media-object ，中间的标题或内容称为 .media-body 。简单的重构一下：

或许这个时候，现在这样能满足很多情景的需求了，其实再仔细想想，是不是真的就满足了呢？比如说标题和头像要垂直居，那么前面所做的是否能满足需 求呢？作为一位专业的重构，此时你就要去思考了，你写的这个拿去出去以后，其他工程师用起来能不能得心应手。而且个性化又要如何处理。

这个时候或许会根据不同的产品添加不同的类名做细微化的样式处理。而在这个过程中，我们仅是处理样式的细微化，并不会对整个布局结构产生任何影响。

接下来一个新问题，其实它扩展性还不够强大，在整个效果中，有的时候有最右边的按钮，有的时候又没有。那么我们应该怎么办？要不要动结构？或者我 们添加新东西之后，这样能不能实现？或者说能不能顶端对齐、垂直居中、底端对齐，这一切的问题有没有更好的方法能实现？其实是有的，比如说现在讨论较多 的，也很火的Flexbox布局。当然这个很多团队并不敢大胆的在项目中使用，必须受限于浏览器的兼容性。那么有没有其他的方法呢？

除了Flexbox之外，其实还可以使用Flag Object。

正如上面代码截图所示，其实这个东东大家非常常见，但就不会往这上面去想。为什么不会往上面想呢？因为从前面走过来的人，都已经被兼容性给毒害 了，思路就被兼容性限死了。其实事情是这样？话说回来，我们目前还有多少人在兼容IE的低版本呢？既然不多，那我们的思路为什么又不能拓宽呢？

继续往下探讨，前面那部分工作，还是以前重构工程师做的事情，不管你的结构怎么变化，怎么优化，还是做着以前的事情： 将设计图还原 。那我们有没有考虑，我们是否也可以略思考一点工程上的事情，也就是说，虽然重构不懂工程，但也可以参与、去思考，哪怕不做高大尚的工程化，我们仅对CSS做点工程上的思考，难道这样不可以？

将上在的示例分解一下，整个样式分为两部分 _media-layout.scss 和 _media-skin.scss 。并且通过Sass独有的特性，将这两个文件引入到 media.scss 文件。而其中 _media-layout.scss 只是负责布局上的样式，而 _media-skin.scss 负责皮肤或细化上的样式。

这里仅仅是提供一种思路，而这种思路是我自己亲身经历过的一件事情。接下来我在继续思考，大家都在讲Angular、React等。而对于一位不 懂JS的人来说，这既是一件兴奋又痛苦的事情。为什么这么说呢？看大家都在玩先进的东东，而且能做出很多有意思的东东，但对于不懂的同学来说，看着这些东 东，也就是几个字母，里面能干嘛，并不懂。

虽然我也不懂，但我在思考，我们是否可以做一个万能的标签。把刚才我们做的事情都通过这个标签来完成。说到这个时候，很多人会想到Web组件化， 比如Google的Polymer。而我们也有一个改造的Polymer，在这个基础上，就算你不太懂JS，或许遵守一定的规则也能写出一个类似这样的标 签，做这样的事情。

其实这些思考还不够多，因为我们还需要面对很多事情，比如粒子如何管理？其实这件事情我以及我们的团队都一直在探索，也一直还没有完美的答案。只是希望我们不断的探索之后，会有一个很好的答案与大家一起分享。

除此之外，我们考虑可复用性、可扩展性、可维护性和可定制性之外，未来的重构可做的事情不仅仅是这些。可以说任何你想做的事情你都可以做，任何前端工程师做的事情你都可以做。比如说，页面的性能优化，可定制的工具化等等。

或许你还在纠结重构的存在的价值何在，那么价值是通过什么方式来向团队或你的老板体现呢？其实很简单，想办法让用户爽，让老板爽。最简单用你的技术去做出成绩，直接用钱体现出你存在的价值。

总而言之： 未来是美好的，道路是曲折的，现实是残酷的，加油吧!!!

总结

啰嗦一大篇，那么重构是什么呢？想通过下面几个词来表达我自己对重构的理解：

• 重构不光追求还原设计稿
• 重构不光追求浏览器兼容性
• 重构不光追求技术
• 欲重构Web页面需先重构人
• 欲重构Web页面需先重构理念
• 重构最重要的就是基础和理念

这是一篇不谈技术的文章，是一篇扯蛋的文章。如果你阅读到这里，我非常的感谢，也非常的抱歉，因为我浪费了你很多的时间，但我最终还是希望这篇文章对你有所启发，不是技术上的启发，而是思想与灵魂上的启发。

蛋扯得有些远，上面尽可能还原了我在Qcon上所讲的内容。如果你感兴趣的话，到时视频出来了可以看看录制的视频，不过可能有很多词你听不懂，那是因为我的语法没学好。最后你听到的就会有点像 @情封根据录音还原的现场 。（^_^）

对应的PPT可以 点击这里下载 。