Web重构之道

2015/10/25 · 基础技术 ·
重构

原文出处: 大漠   

如何学习页面重构/对页面重构理解,学习页面重构理解

笔者是前端小白一枚,在往前端页面重构方向学习成长中,今天花了一天时间学习相关的文章

在这里集合一些关于重构基础概念和成长建议,希望能对想了解和学习页面重构的同学有所帮助

文章中提到的相关文章均说明链接地址,利于说明文章来源,也方便读者深入探讨

抱着学习的态度看这些文章,我也希望能够在文章中加入自己学习的一些想法,欢迎大家评论探讨

 

/*==========================正文分割线=========================*/

 

学前端的小白第一次听到页面重构会问,前端工程师和重构工程师有什么区别?

那么下面在知乎上的问题可以让你有一定的理解

 

前端工程师和网页重构工程师二者有什么区别和联系?

来自 <;

【前端开发工程师】的工作内容是使用 JavaScript、ActionScript
等语言编写客户端脚本,实现动态效果。比如:AJAX
提交文章评论、通过本地存储保存用户历史浏览记录等等。偏开发。

【网页重构工程师】的工作内容是通过编写
CSS、合理化页面结构来实现页面效果和提升性能。比如:对页面进行微数据处理和SEO、页面样式统一等等。
偏设计。

前者的重点在 JavaScript、ActionScript,甚至
iOS、Android客户端程序;而后者的重点在 HTML、CSS、SEO 等。

两者技术重叠度很高,在阿里巴巴、淘宝和支付宝没有这样分工,均称为【前端开发工程师】,上面的技能都要懂。而在腾讯,WOYO
等公司有明确的分工,但据我所知,以上技能他们也都懂的。

对于两者的区别,我没有专门考究,仅听朋友云云和自己的理解,希望能帮到你。

 

作者:吴钊

链接:

来源:知乎

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

我有写过一篇关于这两者的对比

1、页面重构需要具备足够的耐心,反反复复;js工程师要不重复自己。

2、页面重构需要了解设计师的想法;js工程师需要了解后端工程师的想法。

3、页面重构偏艺术,需要想象力;js工程师偏程序,需要逻辑思维。

4、页面重构要关注css3,用代码实现各种效果;js工程师要关注html5,了解新的js
api。

 

作者:周文彬

链接:

来源:知乎

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 /*======================分割线========================*/

 

看完了知乎上的回答,你可能会觉得回答的内容有些抽象,那到底重构是做什么的?

页面重构师

页面重构师,从事的工作简单的说就是“将设计稿转换成web页面”,工作内容可以简单到直接把PSD从PS里导出成网页,也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。

单纯的页面重构,所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间完成;在这种工作强度下,很多人都是靠着对这份工作的喜爱在维持着,一旦工作热情消失,很容易就会变得枯燥,保持热情也成了重构工作者(也许是所有参加工作的人)应该具备的能力。

重构不单是做出页面,而是做出好页面:

1.结构完整,可通过标准验证

2.标签语意化,结构合理

3.充分考虑到页面在站点中的作用和重要性,并对其进行有针对性的优化

一、设计稿的分析——对设计稿的分析能力

  1. 能分清设计稿中的公共私有的部分

2.
在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写样式)

3.
在1的基础上,准确的给出各部分的实现方案(包括如何切图、写结构、写样式)

4.
在3的基础上,能同时考虑方案的扩展性复用性页面性能(包括如何切图、写结构、写样式)

  1. 在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)

上面这些都是在还没开始动手制作之前所要做的。

二、切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,还包括把切出来的图片合并到一起,

怎么切、从哪切才能将性能最大化,说“切图是一门艺术”完全不为过。

切图也可以划分成几个阶段:

  1. 切成所需要的图片(如何将需要的部分切出来)

2.
在1的基础上,对切出来的图片进行一些优化(包括压缩文件大小选择图片类型

  1. 在2的基础上,规划切出来的图片(包括文件分布)

  2. 在3的基础上,考虑整体的性能(包括合并图片、压缩文件大小)

三、HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容,通过HTML和CSS的编写,将设计稿转换成WEB页面最重要的一块,也是我们所要重点掌握的内容,把它们放在一起,是因为它们相互的关联性太强,HTML的写法会影响到CSS的写法,它又可以划分成下面几个阶段:

  1. 还原设计稿视觉效果,并通过标准验证(HTML)

  2. 在1的基础上,实现多浏览器的兼容(HTML)

  3. 在2的基础上,标签语义化(HTML)

4.
在3的基础上,选择较优的实现方式(包括模块化结构,方便程序脚本使用,HTML和CSS)

  1. 在4的基础上,考虑到扩展性、复用性和可维护性(HTML和CSS)

  2. 在5的基础上,考虑到整站的样式分布(包括如何实现分布)

  3. 在6的基础上,样式写法的优化(包括技巧的应用)

还有一点是对所遇到问题的解决能力,这一点在不同的阶段都可能会遇到,所以没有写到上面。

如果你已经达到或超过3、4、5,恭喜你,你已经是一个职业的“页面重构工作者”了。为了我们自身的发展,关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等,也是十分必要的。大家一起进步吧。

来自
<;

/*========================分割线========================*/

 

页面重构的工作内容你已经知道了,
那么你还有一个很重要的方面要注意,那就是与网页设计师的沟通配合

 

干货!网页设计与重构那些事儿

 

另一个话题:与重构有关的,有时候设计师也不断的抱怨页面仔做出的页面没有设计稿上的好看,不是间距大了就是间距小了,不是字体小了就是字体大了,不是图片压缩的太厉害就是压根图片切少了,或者动画也不是我们想要的效果。。。。越到这些我不能全怪他们,我们也有责任,毕竟他们不是设计,但是我个人的观点是重构需要一些PS技巧或设计理论,在设计师没有时间走查页面的时候也能输出比较高质量的页面。

银河国际平台官方网站 1

市面上大大小小的浏览器几十种,常见的大致也有十来种,由于每个浏览器自身渲染页面的差异,并不是同一个页面在所有浏览器上看到的都一样,我大致用90%的还原度来衡量吧,也可能有些设计师要求重构100%还原,那我表示那位重构相当苦逼,保证页面跟设计稿90%一致,有不少工作需要设计师和重构共同参与的,比喻设计师在时间允许的情况下做好标注,哪个地方多少像素,用什么颜色值,高度是多少等标注在页面上。

银河国际平台官方网站 2

重构者不关关注代码本身,也可以跳出代码看看视觉表现层,如果确实对几像素看不出来,可以截图放在psd上做对比,这个方法很容易自己发现问题,成本也比较低。

银河国际平台官方网站 3

在表格做网页时期,图片和图标几乎都是单个的,加载一张图片就是一次http请求,服务器就要读取一次,频繁的读取再加上大量的用户不断的访问,很可能让服务器承受不起而挂机。因此需要尽可能的减少http请求,合并背景图是一个很有效的办法。

通常背景图的输出质量百分比可以调在60-80%,对比较重要的icon、图片可以调为100%输出高质量图片。

在网页加载过程中,或因为网速原因图片暂时没有加载出来而出现短时间空白,建议给该区域预先定义好背景色,以提示用户该区域是有内容的。

鼠标停在图片上时,适当的添加title或者alt,以方便用户在图片加载失败时可以知道这张图片是干什么用的。

按需加载,异步加载,类似苹果官网上很多地方用到了异步加载,好处是提高主要页面的加载速度,用户需要的时候才加载其他附件页面。

少用CSS滤镜,现在应该很少人用了,基本都是采用优雅降级或提示用户升级浏览器。

网站上线前压缩CSS和JS文件,注意记得备份。

银河国际平台官方网站 4

 

我喜欢用这个词,虽然自己并没有达到代码优雅,做到代码优雅还需要不断的努力,一些细节足够让专家看到你是否具备职业化素养,这里就不班门弄斧了,还是看图吧~

银河国际平台官方网站 5

原文地址:站酷

作者:@Lerroyli 腾讯MIG无线研发部网页美术设计师

 

/*======================分割线===================*/

 

张鑫旭大大则是在他的博文中引入了”门派”的观点,文章非常长。

在学习过程中也经常能搜到张鑫旭大大相关博文,每一篇文章都特别有张鑫旭独特文风,

作为一个前端入门者,在此表示深深的感谢

强烈建议能看到这里的读者可以去拜访张鑫旭大大的原版博文,相信读者会对重构有一个更深的理解。

<;

在这里截取部分文末作者写文的初衷和希冀。

 

CSS页面重构之“门派”之分

五、CSS页面重构“门派”意识与包容心

为何要提出“门派”这个概念,我想我希望大家都能以一颗包容的心态对看到其他同行的CSS代码以及页面重构方式。

就拿上面QQ校友按钮与自适应按钮的例子举例吧,可能有些同行在使用某一个按钮时发现这个按钮的虚框不对称,可能心中就会暗想,这个网站或者这个页面制作人员不重视细节,离我还是有些差距的;可能有喜欢自适应按钮的同行看到QQ校友或是其他很多网站定宽按钮时,会暗想,这些网站的前端技术真是不咋地,按钮一点重用性都没有。

最后的结果可能是相互鄙视与不屑。

其实大可不必,我是体会到了一颗包容的海纳百川的心态对于自身的成长非常的重要。

千万不要拿着自己的那套准则趋评判别人的代码,去指手划脚。

您站在直线的A点,怎么能轻易的就明白B点处所包含的思想呢。

我们应该做的是以一颗开放的心态去看待别人您目前看似不屑的代码与页面重构方式,并从中学习到新的东西。

这种心态决定了我们成长的高度。我们要一直保持饥渴的状态,不要固守自己的那套东西,灵活,吸收与变化。

所以,您要是发现某个页面某处在IE6下有3像素的偏移,不要轻易断言,这里是个bug,这个页面工程师火候不够。

或许是这个工程师更看重的页面扩展性与CSS代码的数量,对这种一般用户根本不会注意的问题,其没有必要再写一个hack去解决;

您要是看到页面上的按钮将文字也作为图片切进去了,不要觉得这个工程师功力不够,觉得这样子按钮毫无重用性,或许人家更看重的是视觉体验,宁可多做几张图,多几个按钮,也要有更好的视觉体验效果。

六、实用指导意义

虽然没有明确的“门派”的概念,但是实际上,CSS界确实有隐性的“门派”之分的。

知道这个也是有一定的实际意义的,例如在找工作的时候,(个人观点,仅供参考),如果您要进入腾讯公司,要清楚腾讯公司写页面更看重的是什么,作为一个颇具规模的大互联网公司,其流程规范等都已经相对非常成熟了,前辈们继承下来的东西不是你所能左右的,您所能做的就是代码风格也页面重构思想要与之相符。

如果您固守你自己那一套,比如说将扩展性与重用性放在首位,对于体验尤其是兼容性(各个浏览器一致)放在次席的话,到头不幸的肯定是你自己。你需要就是对其产品页面的CSS代码(命名,风格)以及HTML重构思想进行一番研究。

对于大公司,说句可能不对的话,中规中矩地写你的CSS代码,这往往反而是最好的。

要是,以后,我羽翼渐丰,有幸能够面试他人的话,我更看重的将会是对方的CSS与HTML代码的重用性与扩展性是否足够高,CSS代码是否足够简洁,性能是否足够高,对于所谓的兼容性(也重要)不是最先决的条件。

此时,您的代码与页面要是方方正正,规规整整,就像是砖头房子一样,我一定会把你劈掉的。我要是流水般的页面布局。

 

来自
<;

 

/*======================分割线===================*/

以下节选引用白树在前端早读课公众号上的文章,希望对入门前端的同学有所帮助

白树——博客园:

前言

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

如何学习前端

  记得群里有人问我现在开始学习前端还来得及吗,种一棵树最好的时间是十年前,其次是现在,想做什么就马上去做,并坚持下去。

     
对于刚步入前端的同学来说,最重要的应该是学习『基础』知识,像CSS、JavaScript的基础原理看多几遍也不会过时,最好找两本书系统的学习或者上网找教程如w3school在线教程,然后如我前面提到的找项目或者做demo去实践,将知识转化为经验,并坚持下来,这种学习方式最简单,进步也最明显。

  有的同学说工作忙没有太多时间学习,其实可以挤出来,例如我通常会利用每天上班前和下班后的时间,大概有一个钟在公交或地铁上,看书或者拿着手机学习,特别是早上上班那段路上,学习效率会很高。

  我们知道现在前端的水很深,为了解决各种业务问题,提高生产效率,技术创新特别快,那么具备快速的学习能力是你的核心竞争力之一,并不意味着你每样新技术都要学,应该根据公司的业务需求选择适合的框架,其它的了解下,用到时再学习也不迟,更何况使用新框架的学习门槛不会太高,容易上手,这点上看,刚步入前端的新人是特别有优势的,至于想要掌握它的深沉原理,需要花费很多的功夫去学习,这个阶段你可能达到资深工程师的高度。

每个人的学习方法可能对自己进步很大但不适合别人,人都是独一无二的,要结合自己的生活习惯,通过实践中思考,找到属于自己的方法。

分享感觉

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

在学习的过程中,遇到问题是怎么解决的?

  在组内有个毕业生妹子,有一次问我3D旋转动画的问题,在说完简单原理后我想把发个例子给她参考,她拒绝了,说要自己思考怎么做,我笑着给她点赞。

  学习遇到问题懂得『独立思考』去解决是一项最基础的能力,这种能力完全可以培养并形成习惯,不管是在哪个行业工作,对个人的提升大有帮助。很可惜,我在博客或者群里见过很多刚步入前端的同学,遇到问题就马上提问,甚至是要求提供现成的demo。

     
思考后解决不了问题可以百度或谷歌,例如stackoverflow,需具备一点英语能力。实在解决不了再上群等方式『提问』,可以参考张鑫旭写的《如何提问才能进阶成为前端大神》

/*======================分割线===================*/

如何做一个好的前端重构工程师

来自 <;

作者: smallni  来源: 腾讯TGideas  发布时间: 2013-01-05 16:58

从专业角度:

明确的自身定位

目前国内将前端分为重构和JS开发的并不多,虽然PS是重构必用的一个软件,但要知道重构不是”切图仔”,切图只是重构工作内容的一部分。我们没有理由因为自己是重构,而不去学习其他技术,因为你知道你不会干一辈子的重构,JS不能丢,同样的对前端新技术要熟知。重构页面时应该把大部分的时间花在页面模块的抽离、性能优化、易维护性、易用性的探索上,而应该花最少的时间去代码实现。也许你写出来的页面有百万级的用户在使用,这里可能有障碍用户,所以你要考虑各种用户的感受与体验,而不仅仅是局限于代码的完成度上。

注重前端基础技能

前端的基础知识就像一个房子的地基,如果地基打不好,一旦遇到一点地震可能就会倒。同时也像一个城堡的各扇门,哪边的门造的不好,敌人的枪火就可以马上攻破,所以打好基础是前端学习更多知识的基石。CSS属性的特性、html标签的语义化、JS的基础知识、W3C的规范(块格式化上下文、层叠上下文、框模型等),这些可以多花点时间去学习和巩固,做到能正确合理的使用某个前端技术方案。

正确对待前沿技术

互联网发展日新月异,前端技术更新也很快,当我们在学css2时,css3已经风靡全球,当我们在学css3时,css4已经被提上了日程。前端的路上永远学无止境,所以在某项新技术诞生时,就需要我们正确的去审视。

在做好自己本职工作的同时,保持一颗学习的热情,新技术可以尝试使用,但请先一定了解为什么要用这个新技术?使用这个技术能为我们带来什么改进?在前端技术上,永远没有最好的技术方案,只有最合适的技术方案。最新的不一定是最好的,旧的也不一定是差的,切忌盲目跟风学习新技术,要知道自己正在学的是否能够学以致用。(笔者注:其实更多的时候并不是某项新技术,技术早就诞生,只是一个新的前端解决方案或标准被推动出来了,如CSS3其实在2003年就诞生了)

更好的沟通能力

我们每天可能要和开发、产品、设计、交互、测试等不同的人打交道,所以这就需要我们有一个更好的沟通协调能力,注重一个更好的沟通技巧,减少沟通上的成本。”一切以用户的价值为依归”,这也正是互联网行业所需要的一种理念,在与其他同事沟通时除了真诚待人以外,还需要多为用户去考虑:我们真的需要这么做么?

有选择的参加技术论坛

如果自己呆在一个小公司,前端人也不是很多,没有一个很好的氛围,那么这时我们就只能通过两种方式来拓宽人脉:网络和论坛。网络如QQ群、蓝色理想等,而面对面的论坛无疑是最真实的一种拓宽人脉的方式。其实现在国内大的环境下,前端类的技术论坛我自己都数不过来,这时有选择的参加一个论坛显得尤为重要,而不该不管自己懂不懂、免费还是收费什么论坛都去参加,其实适合自己的是最重要的。

关注浏览器厂商

10年前,IE统治了大半个地球,如今,其他的各大浏览器厂商已挤进全球化份额争夺战,最离不开前端的就是浏览器,关注浏览器厂商的动作与格局可以让你拥有前瞻性的视角。一些浏览器厂商的开发者库:微软的MSDN,火狐的MDN,谷歌的开发者库,欧朋(Opera)的开发者库。另外可以关注下各浏览器厂商的推广活动,火狐中国会在每一次推出新版本时有体验活动,微软的最新的IE10推出时国内也有推广活动,可以了解这些新版本浏览器的特性以及对css3\html5的支持性如何。

更多的承担和分享

在平时更多的去承担一些额外的工作,譬如在重构团队的协作规范、编码规范上提出自己的一些合理化建议,输出一些利于其他同事更快、更高效提升的文档。平时在自己工作遇到了一些好的工作方法或者对一些新技术的研究可以拿出来和大家分享。重构的团队氛围很重要,谁都不希望呆在一个整天只管自己写代码的团队,那样不管对于个人还是团队都是不利的。

更多的思考与总结

思考指的是”意识流”,具体是我们在重构过程中的想法和理念,怎么想决定了我们怎么做。

作为重构,很多人拿到设计稿之后就是开始埋头切图,用各种”奇技淫巧”实现各种需求,我们甚至不会在拿到设计稿之后仔细的做一下分析:如何做一个合理的架构、如何抽取合适的模块、如何用更优雅的方式和轻量的代码实现页面中的需求。

也许是目前大的环境下在催促着我们不断的向前跑:各种前端论坛大多数都在讲某个技术,纠结于某一技术细节的实现,讲烂掉的性能优化,可很少有人去讲该如何合理的选择一个前端解决方案,如何解决重构中遇到的一系列不同场景中的问题,以及最重要的我们自己的职业生涯思考:我们是准备写一辈子代码么?

总结也叫”review”,是复习、回顾的意思,review对于重构来讲,显得尤为重要,定期的项目回顾能够发现项目中存在的问题从而规避以后再次出现。

当然项目回顾是一方面,更重要的是代码层面的review,不定期的review可以促使我们在一些代码的细节把控方面做的更优雅,review除了可以提高代码的品质外,还能加强团队的协作精神,以及提高团队的整体技术能力。显然这是一件非常有意义的事。团队成员可以在一起review大家的代码,发现每个人身上的不足和亮点,不然我们真的是只管埋头自己代码的苦逼代码仔了。

从生活角度:

保持阅读的热情

网络的信息是碎片化的,在我们没有很好的梳理碎片能力的时候,一本实物书籍对于慰藉我们的心灵显得尤为重要。有时生活、工作会让人压的喘不过气来,这时,我们需要去寻找一种方式去释放压力,嗯,阅读是一种很好的方式。

坚持一项运动爱好

自己的工作方法,梳理好需求的优先级,预留出一定的时间来放松自己,这个放松一定要让自己的筋骨活动开,可以是去打打羽毛球,或者去跑步,再或者去健身。只有让自己的身体变得强大起来,才有更多的能量值去砍怪升级。

保持乐观的生活态度

善于捕捉生活中的一些细小的幸福颗粒,我们就会经常活在快乐中。上次在腾讯健康加油站听了一次关于生活的分享,其中提到”生活就像炖鸡汤,有时需要加点调料和沾料”,的确,这些沾料就是发现生活中的细小幸福,做一个乐观、豁达、开朗的前端人士。调节好工作和生活的平衡,让自己不要再活的那么累。

嗯,做个好重构真的挺不容易的,无论是从专业角度还是从生活角度,缺一不可,保持一个乐观、热情、积极的心,不断学习,让自己活得简单、快乐,此足矣。

其实,你不仅是在重构代码,也是在重构人生!

来自 <;

 

笔者是前端小白一枚,在往前端页面重构方向学习成长中,今天花了一天时间学习…

分享的主题

银河国际平台官方网站 6

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

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

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

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

重构的前世

银河国际平台官方网站 7

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

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

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

重构的今生

银河国际平台官方网站 8

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重构到底是什么?它的价值又会是什么?

银河国际平台官方网站 9

自从2004年以后从事重构工作的同学或许只懂DIV和CSS(最起码我就是这样的,或许也有很多同学跟我一样),也是自己的看家本领,或者说是吃饭的饭碗吧。最主要的工作内容也就是将PSD设计图转换成HTML和CSS。还有一个最大的任务就是当时引以为豪的,兼容IE5~IE6。我们能把跨浏览器的兼容做好,这也是我们最牛的地方。

而这个时候,我们很多重构工程师觉得自己的工作职责就是写HTML和CSS,然后最大的任务就是将设计师的PSD设计图转换成Web页面。这份工作说实话,只做一天或两天会觉得很有意思,因为即写即见。现再加上一些CSS3的点饰,还能做做动漫效果,也有新鲜感。但天天如此,你会还有新鲜感存在?你可能就会觉得这是多么的枯燥与机械。

加上重构是设计师、交互设计的下游,但又是后端程序的上游。这样也造成了重构工程师是多么的苦逼。假设一个项目的工期已定,但由于各种原因,设计师耽误了时间,而整个项目不会给你太多额外时间,也造成了重构工期的缩短。在现实工作中常常会有这样的现象,设计师花了四天时间设计,而原型页面次日就需要,为了不被扣上“不配合团队合作”,“不高效”的名头,重构也只能委屈求全,加班加点。所以很多重构工程师会认为自己在团队不被认可、不被重视、不公平等。

银河国际平台官方网站 10

其实我在思考,我们重构不只是说我们把设计图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所说专业的人做专业的事。这也是为什么还有一些团队有“重构工程师”的存在。

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

重构的未来

银河国际平台官方网站 11

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

银河国际平台官方网站 12

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

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

银河国际平台官方网站 13

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

从示意图,不难发现他们有一些共性:

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

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

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

银河国际平台官方网站 14

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

银河国际平台官方网站 15

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

银河国际平台官方网站 16

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

银河国际平台官方网站 17

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

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

银河国际平台官方网站 18

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

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

银河国际平台官方网站 19

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

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

银河国际平台官方网站 20

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

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

银河国际平台官方网站 21

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

银河国际平台官方网站 22

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

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

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

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

总结

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

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

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

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

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

1 赞 收藏
评论

银河国际平台官方网站 23