Web重构之道 大漠

专题名：Web重构之道

大漠：大家下午好。压力很大，也很紧张，第一次来QCon这种高大上的会议分享topic，加上前面的嘉宾都是高大上的话题，现在带着大家回到屌丝的话题，有点像是砸点场子。我叫大漠，有人经常跟我说，“大漠孤烟直”。鞋城，国语“最好”的前端，大家要是听我的国语实在困难，因为从小语文没写好，考试老是不及格。手淘最丑的“伪前端”，除了阿里，我就是最丑的前端了。为什么是伪前端？我没有做调查，我自己猜想，阿里前端不懂JS的可能只能找到我了，因为我懂JS，我自己也常说我不是前端，平时我喜欢Sass，2011年做了一个前端网站，时不时记一点自己的笔记，因为人笨，又不会其他的，只能多吃点苦，然后记下一些不懂的，做事的时候不要去求人。

2014年写了一本书，也误了不少子弟。今天的主题是“Web的重构之道”。我对这个“重构”是有多爱？其实我也恨它，想做别的，做不了，韩老师让我写一个JS，憋一天也憋不出一个代码，只能做个。我分三个部分讲一下我自己的切身体会。

前世。以前的重构，或者以前做Web网页的人，对重构是怎样一个看法？然后今生，你们玩高大上的时候还有多少人在苦逼的切图？然后未来，像我这样的伪前端，将来要怎样生存，或者有怎样的思考？
    这张网页图，2003年的淘宝，可能这里基本上没有没几个人看到这张页面。在这样的淘宝大家可以看出来，一个很大的特色，整个网页除了图片、文本链接、地址没别的了，flash还会来点动画的感觉，我们这个根本什么都没有。顶多就是点个图片，会告诉你去另外一个，又回到这样的。

还有就是顶部文字从左往右不停地来回，还有就是link标签一闪一闪，这就是动画，给我们网页增添一点不同的色彩。那这个时候，也没有重构一说，大家给我们这群人定义的标签就是“网页设计师”。这其实还是很高大上的称谓。那个时候读网页设计师，拿的也是高薪。然后就是美工，说什么设计师，就是一个美工，拿几张图拼成一个页面，就成网页设计师了？Web在我们这个时代还不是很看重。一个企业问他有没有网页，要什么网页？我业绩很好。

然后慢慢的，2004年有一本《网站重构》的翻译书在中国大陆出现，这本书出来就不得了了，整个前端都发生了很大的一个变化。那时候我记得淘宝UED（音）我们要做“地球最优秀的前端”。这场革命给我们带来一个变化，“21世纪最大的IT冤案”。为什么说是21世纪最大的IT冤案？只要2004年以后看了这本书的同学都说，看到网页上只要有推广标签，就说这个不行，做的网页是垃圾。不符合W3C（音）规范的标准，其实这本书从来也没有说网页出现标签就是垃圾网页，就是不符合标准规范的。所以被称为21世纪最大的IT冤案。

第二就是“灾难性的div+css泛滥”。出现最多的词就是div，大家觉得我会div，我很高大上，整个页面下来，除了div，就是div了，什么P标签，这些基本找不到，这个时候就成了一个泛滥。包括很多人去面试，说有这样一个故事，有一个面试官面试一个新同学，问他，同学你来我团队打算做什么？他很自信地说，我来你们公司把你们所有的网页，带标签的网页换成div+css的。面试官很纳闷，他跟同学说，实在不好意思，我现在网页都改成了div跟css，怎么办？面试者就不吭声了。这个时候只要懂div的，都觉得是懂Web的，然后很标准规范的，都是高大上的。

其实慢慢的，随着时间的变更，我们贴上的标签不是美工了，换了，切图、页面仔。可能广东呆过的同学会非常清楚，因为广州那边的人喜欢把男孩子称作“仔”，页面仔是从那边来的。现在就是说没“钱”途，因为只写这个，绝对没有前途，工资低。不就是div+css嘛，谁都会，一本书读一个星期谁也会写。然后就造成了我们入门门槛非常低。

我经历这些的时候在想，我们的Web重构到底是什么？它的价值又会是什么？自从2004年以后做重构的，懂的就是这两个，看家本领，也是吃饭的饭碗。最主要的工作，就是把PSD转成HTML+css，我不说div。还有一个最大的任务，那时候我们引以为豪的，IE5、IE5.5、6我们都能把它灭了。这是我们最牛的。有个老外朋友跟我说，我们国外这种IE6做兼容的找不到了，找了一个客户问，我客户是中国市场，你得给我做兼容IE6的，不然客户没办法看，然后屁颠屁颠找了一圈，整不了，最后找了一个外包，中国中国小伙子给他做IE6兼容。

这个时候可能我们很多重构工程师觉得，我的工作职责，就是写HTML，写css，然后最大的任务就是把设计师的PSD设计图转变成Web页面。这份工作说实话，只做一天两天会觉得很有意思，一动手，马上浏览器就能看到了。再加上后面css3玩得溜一点，加点修饰，还能做动漫，就觉得很有新鲜感。但是天天做，设计师搞了四天的设计图，说重构，明天就要，就傻眼了。设计四天，重构搞一天，多不公平？然后加班。不知道有没有携程的同事，当年携程就是这样，不停马不停蹄的，设计师来个设计图，大漠，明天早上要，然后就傻眼了。

其实我在思考，我们重构不只是说我把设计图99.9%的还原，就叫重构。我觉得重构是一种修改。为什么是一种修改？大家平时工作有没有这样一个感觉，你有多少的页面是从头到尾从设计图切出来的？特别是大公司、大团队，可能你有自己的产品，很多时候交付会说你给我搞一个导航条，比如今天中秋节了，我要上个嫦娥的图，好，就只做这一点。苦就苦在外包公司，没自己的产品，他天天做的事情就是怎么把PSD转换成页面。我们做这种修改的时候，就要考虑我修改的过程，以前的代码结构是不是合理？如果不合理，就要改了。这个也是一种重构。

第二种，内部结构更容易。为什么这么说？可能你上一任写HTML+css，是拿了两本书学了两个月就进公司做了两个页面，结果被你老大觉得可能不行，又招你这个大神来负责，然后一看，这个代码简直无法直视的时候，你让这个代码变得更简单，这个过程也是重构。

第三，有节制的整理代码。并不是搞得最整洁就是优秀的代码。多套一个div，这个人肯定没有学过重构，明显是不要的，怎么多出一个？真正合理不合理，不是说越少的结构就是越合理的，应该根据自己的业务、需求做平衡。
    第四，使bug产生率最小化。做过IE6或者7兼容的同学很有感触，5fox（音）这种高大上的浏览器一看心里很舒畅，测IED（音）版本的时候就苦逼了，不停加个下划线，很多人第一想到的，是加这种bug，根本没有想到代码是不是出现问题。

Web重构到底是什么？是一种思想。因为做重构工程，活简单，我们得有想法，把它做好。是理念，我们追求的不仅仅是还原，我们要追求更多，就是怎样还原到让人家更舒服。专业的人做专业的事，可能前端有擅长HTML的，也有擅长JS的，这个时候就出现了分离的东西。在目前携程还有很多团队只写HTML跟css。

其实也是一种很累的分工优化，谁擅长做什么就做什么，第一做起来顺手，成本也低，然后你叫一个擅长JS的人弄个HTML、css，结果也写得不好，bug也出来了，叫他调也调不来，所以这个时候分工还是有好处的。我觉得是技术、数据、情怀、人文为主导的交互优化。虽然是屌丝，还是要有点追求。大家会说，不就是切图的吗？我们不能说自己就是个切图的，这样你就永远是个切图的，我们应该破茧而出，突破自我。

以前我们做重构，工具你要会用，命令也要会敲，不然也说不过去，要跟交付设计师讨论这样交付是否合理，搞不好哪天你就升级了，不再是屌丝重构，而是变成交付设计师。还有用研，以前一个按钮，上去以后给你变个颜色，已经有点感觉了，现在看一些高大上的，点了以后会给你转个圈圈，数据提交完以后给你出现一个勾勾，表示已经提交完了，这个我们也是可以做的。所以我们不能局限在自己的小范围里面。

可能有人说你站在台上吹牛。那在手淘这一个高大上的团队，怎么做重构？接下来我讲一讲我在手淘做重构的过程。
  这个页面不只是淘宝、手淘里面有，估计只要做Web的，都碰到这个东西。相信你们产品里也有这个东西，不同的产品、不同的业务线、不同的页面，都有这个东西。这个怎么做？有什么我们不知道的？从PPT上明显的可以看到，起码左边的图片不一样，有圆的、方的、大的、小的，这些是不确定的因素。右边的内容，有单行的、多行的，标题有顶不对齐的，有集中的，还有就是内容不固定，宽度不固定，再加上我们现在要面对的设备也是很多种。今天安卓明天iPhone，这个屏幕宽度都不一样。那你怎样做这件事情？

黑了，说这么优秀的团队也写出这么差的代码来？A工程师觉得上面写也是没有问题的，然后B工程师觉得下面写也是OK的，所以有6种样式。做重构的人，可能他会觉得没办法接受。我们仔细看，整个可以分为三个部分，整个结构这个时候已经非常清晰，我常把这种叫做重构对象。左边、右边的图，蓝色的我称作媒体对象，就是常看到的头像或者人头，甚至产品列表里的产品片，右边图中间的那个红色的，当作一个主体内容。这个时候应该能想象得到这样一个结构，是不是会比较清晰？

这个右边有按钮，这个时候在中间再加一个这样的，可能做到这个时候，大家会觉得已经能满足很多人的需求了，其实再仔细想想，是不是真的能满足？比如说我头像要跟标题垂直、居中、对齐，这个时候我们这种方法还能不能实现？作为一个专业的重构，你就要考虑一下你这个玩意丢出去以后，人家用起来能不能遂心应手？

个性化的样式怎么处理？第一个是顶部对齐，第二个居中，第三个又多出一个东西，这个时候又开始犯傻了。我已经被这个折磨了很长时间。这个时候我想了一个办法，不同的产品，可能有细微化的样式差别，那我根据产品，对整个布局结构我不造成任何影响，但是要达到细微化的东西，可以灵活控制它。

接下来一个问题，其实它扩展性还不够强大，我有时候有按钮，有时候没有，怎么办？要不要动结构？或者添加其他的东西，能不能实现？或者顶端对齐、居中对齐、底部对齐，有没有更好的方法能实现？其实有。左边这个Flexbox，是个高大上的东西，现在有很多团队也在用，不管是移动端还是PC都有人在用。右边是一个Flag  Object，这个时候其实从这个图上来看，没有太大区别，Flexbox我不说，因为这个这个东西很常见，我说一下Flag  Object，这个东西很常见，

但是大家不会往这上面想。为什么不往这上面想？因为从前面走过来的人，都已经被兼容性给毒害了，就会想到当年IE6不支持不兼容。其实事实不是这样？目前我们多少人还在兼容IE低版本？我估计已经很少了。而且这种东西在移动端上用，根本不用考虑它兼容不兼容的问题。这个属性是不会存在什么兼容性问题的。那这个时候我们要控制，扩展它右边有没有按钮，是不是顶端对齐还是居中对齐，就很好控制。因为以前最早做Web，是用表格，会操作表格就会操作这个东西，是不是更好一些。

继续深入讲，前面那部分工作做的还是以前重构做的事情，不管你结构怎么变、优化，还是冲过做的事情。那我们有没有考虑，我们略思考一点工程上的事情，也就是说，虽然我不懂工程，但我能参与、我能思考，哪怕我不做那么高大上的工程，我只对我们自己的css做工程上的思考，可不可以？我简单把刚才的示例一下，这个文件只负责布局这部分的东西，然后下面是皮肤的，商品的或者卡片的，不同样式的时候，可以堆在这里面，或者往往下面下面继续创建文件。这个时候可能很多人会纳闷，你这不是会增加很多请求吗？

看到后面的文件后缀是.scss，而不是.css，这就涉及到Saas的问题，了解Saas的人会知道这样做是不会增加请求的。所以我这里仅仅提供提供一种思路，这种思路是我自己亲身经历过的一件事情，接下来我想，大家都讲安格拉（英，音），real  JS（音），对一个不懂JS的人来说，这是一件既兴奋又痛苦的事情。为什么这么说？你看懂的人都在玩那种高大上的东西，而且能做出很多有意思的东西，不懂的人看着他，就只认识那几个字母，里面能干嘛就不懂了。然后很多人可能会质疑，你不能学吗？学是可以学，学的过程我们就不说了，这是一个长远的话题。

我想有没有一个万能的标签，能把刚才我们的事情做出来？说到这个时候可能很多人会想到谷歌的坡里闷特（英，音），就是老早出的自定义Web组件的东西。这个时候我们韩老师把谷歌那个玩意儿改良了一下，说不懂JS不怕，就用我改良的这个东西，分分钟，好，我就拿着韩老师改良的坡里闷特（英，音），写了一个这样的，我感觉是以前高大上了，然后我问，我这样写，第二个不一样的我怎么办？等于又要创建一个文件、一个项目？然后韩老师就郁闷了，这个时候我们一起探索这个问题，也就是说，粒子化的东西我们如何管理？特别是淘宝，最常见的就是浏览的时候看到底下价格、优评、点赞的数量、评论数。只做一个行业还好一点，天天长得一样。

手淘面对的，就是今天这个人只有标题、价格，明天那个人要在这个基础上增加一个按钮，再增加一个点赞的，还要再增加降价的，这个时候我又傻眼了。所以我一直没明白，这种粒子化的东西要怎么处理？针对这种话题我找过张迎龙（音）大师讨论过，他说，我们分而治之，我就只懂了这几个字，然后真正含义没有理解。我就说，要找个时间去跟他一起探讨一下？分而治之，怎么解决粒子化的东西？我们不仅碰到这种头疼的事情，比如现在大家在用安格拉（音），view  JS（音），包括VACT（音），对达峰来说他能接受把css都插到JS，插到一个地方去，但是对于我这样的人，说实话就感觉我一下子好不容易分清楚了，又一下子回到了最早的，说css要单独一个文件，JS单独一个文件，HTML一个文件，这下又回到了最初。又是一个挑战，对这个问题我思考很久，到现在还没有想明白。

就算在这个基础上做一点点修改，就能完成我需要的效果，我当初就把这种定义为组件，我想不断的积累，然后也能去重复使用、可以扩展、然后可以维护。

    其实还有一种，就是可以定制。怎么定制？粒子化的东西不好控制。我们阿里的人做了一个这个，把我做的人跟他做的东西结合在一起，因为还没有成功，我拖过去，就会在APP里面做出这样一个页面，然后我们阿里知治（音）只要点一个按钮，就可以发布到我们H5的网站上，比如要添加价格，上面的东西怎么改？我们这个还在做，点击它，可以改标题、文字、样式，然后保存一下就发布到线上。这是我们现在还在做的。

我自己把这种理解为“可定制”，就是我们做任何东西，除了能复用、扩展、好维护之外，还要方便人家能定制。就像达峰说的，“让没有做过网页的人也能做网页”，其实我们这个也是。我们这个是针对运营的人，天天找我们阿里知治（音），说给做一个页面，阿里就说怎么又长得一样？就想出歪注意，当初里面有很多东西，自己选，觉得不顺眼改一改，就不用来烦我们了。这样就能愉快地玩耍。

这是我在手淘团队思考的一些事情。我不再停留在携程那个时代，我只要想着办法把PSD转换出来，就OK了。或者说，我能解决一些bug问题，写一点css3，就是重构很牛逼的人，其实还差远了。我觉得重构工程师不能把自己局限于在这里面。
    其实重构能做的事情还有很多。比如性能优化，这个图是我们淘金币优化前跟优化的的页面效果图，看这个图，大家反正看到的都是一张图片，也不知道你优化了什么？我们来看一下，这是优化前的数据，这是优化后的数据，在整个优化的过程中，做了一些什么事情？其实重构也能做很多事情，你图片怎么处理？怎么优化？大概有没有听过飙叔讲过一个经典的故事？自从我听到那个故事以后，我对飙叔无比崇拜，他能把一张图、里面的东西抠出来，通过两个div叠加起来。很多人做法，就是就要怕差一张图，你要用就用，不用拉倒。飙叔跟老板算这笔钱，我给你优化了图片，省了多少流量，在腾讯这样一个“大腿”上省了多少钱，老板，省下的这些钱，就是我给你创造的价值。

我想说的就是，很多时候很多人会思考重构这个行业里有没有自己的价值？这个价值你要说怎么说，如果情怀高一点，说是为了理想、梦想做，情怀低一点，就是为了钱，老板我给你省了多少钱，你给我多发点奖金？怎么想省钱，帮老板省钱，那就是你存在的价值，你要想的事情。左边跟右边，我们优化以后，给我们业务带来的价值。引导支付几乎增加了一半，然后GMV可想而知。很多人想，怎么优化？

优化这个话题很大，要展开说可能也要花很长时间。网上或者书上，有谷歌的一些优化，这个可能提供给我们的是做一个参考，那真正优化的过程，哪怕是一个很小的点，都能改变你整个页面或者整个项目的性能。这个“点”，就靠你自己怎么监控、测试。然后在监控、测试整个的过程里，测试永远都是一个假数据，然后我们内部好就好在在一个优秀的团队，有很强大的工具，我们可以随时拉到线上数据，能分析出多了什么样的请求、哪个请求多花了时间。就像双十一之前我们做的，我们在不同的网络下都是email能打开。

通过这样一个事情，我想告诉大家，价值是要自己去寻找的，不是说你坐在那里或者吹两下牛就有你的价值在了。
    “未来是美好的，道路是曲折的，现实是残酷的”。像我这种就已经面临很大的残酷了，不懂JS，韩老师不要我，我估计我出去了就没人要了。我得回家种地去了。谢谢大家！

提问环节：提问：在一家小公司，老板要你做一个运营系统，人家会给你PSD吗？不会。图都不给你切，人工做，一个人搞定。怎么办？没有图片，然后做出来，老板说怎么回事？压根看不了。这种情况下其实很多小公司会面临这样的情况，没有美工、没有所谓的设计师，只有一个工程师Java一搞，css一搞，全能的，但是这种情况下，对我们工程师来说就是更挫逼（音）的一件事情。有没有一种办法，对我们这种全能工程师来说有一种更好的方式来做这些自己公司用的管理网站、管理系统？最近谷歌出了一个外尔科莫乐（音）的框架，让我看到了一个出路。到底该怎么解决这个问题？如何把css和HTML干掉，只有JS或者Java可以搞定？

大漠：按你现在的描述，你可能比我更痛苦一点。其实你这个问题也对我来说很好解决，因为你这是一个内部系统，然后有一个PRD，最起码你能考虑斯他伯（音），这是一个很好的东西，然后foundation这些东西，也就是说你根本不用担心设计的样式怎么样，你只要跟着套路结合PRD，出来的效果就不会差。我就不信你老板看了你这样一个类似于推特风格的内部管理系统，还会说你做出来的东西挫逼，然后你把推特的页面打开给老板看，你看，推特都长这样。

提问：现在我们遇到一个问题，现在有个网站，按照以前的说骂，都是通过电脑浏览器的方式访问我们网站，但是现在随着iPhone、iPad逐步流行起来，我们网站需要向移动终端支持。也是牵扯Web页面的重构，包括HTML、css。不知道能不能给我们一些建议？有没有好的方式最好地兼容现在的电脑版的网页

大漠：这看你自己的产品定位。如果你产品不涉及要有一些交易之类的，就是纯展示性的，而且产品不是很复杂，可以考虑响应式设计。就是在这个基础上你能实现多终端的兼容。如果要给用户更好的体验，那我觉得你想只通过一套代码实现，难度还是很大，甚至不大可能。