如何做一个优秀的前端重构工程师 - 文章 - 伯乐在线
& 如何做一个优秀的前端重构工程师
用这个标题，是因为前一段时间组里有一个开放式讨论：怎样才算一个好重构？
其实，”好”与”坏”向来都是相对的，因为每个人眼中看待”好”与”坏”的标准不一样，不如从自身的角度考虑一下：如何做一个好重构？
先来看一个平时我们遇到的最多的两栏布局：
基本的html代码：
来看具体的CSS代码实现（忽略margin）：
很明显在保持同样html结构的情况下，实现两栏布局可以有多种CSS方案实现（左栏定宽），主要方向是用浮动或不用浮动，右栏定宽或者不定宽：
Qzone、朋友网、Facebook都给左栏浮动，唯一不同的是右栏的写法，Qzone给右栏定宽并且浮动，而朋友网和Facebook则并没有给右栏定宽也未浮动，而是利用了创建BFC并且为低版本IE触发hasLayout的原理让右栏自适应宽度。
Yahoo和Google两栏都未用浮动，唯一不同的是Yahoo用了绝对定位的方法，而谷歌用了inline-block，Google已经宣布旗下一些产品放弃对IE8 的支持，所以Google可以大胆的使用inline-block去实现布局，不用去为其他低版本浏览器写一大堆的hack。
这其中有最好的方案么？上面每一种方案都有各自的优劣，可能适合于某种项目背景，同样选用的方案可能和用户群体也有关系。虽然无论选用哪一种方案，从用户层面来讲，无法感知到，但我们不能因此去随意的使用一种方案。
为了项目后期的易维护性和易用性，必须要选择一种最佳的方案，而我们如果连基本的BFC、hasLayout这些知识都不了解便会显得力不从心。同时要明确自己的定位：我们不仅仅是一个”切图仔”或”美工”，我们不能忽视一些障碍用户群体，我们必须去使项目的代码变得更优雅、更易用。虽然重构的基本岗位职责是：PSD转html + css + js，但要知道仅仅做到这些还不算一个好重构，更好的沟通能力，更多的分享、思考和总结，如何正确的去关注一些前端的动态，这都是我们需要做的，当然最重要的还需要我们有一个乐观的态度和幸福的心态，下面本人将详细阐述到底如何做一个好重构，当然这只是鄙人的个人观点，还请各位拍砖。
从专业角度：
明确的自身定位
目前国内将前端分为重构和JS开发的并不多，虽然PS是重构必用的一个软件，但要知道重构不是”切图仔”，切图只是重构工作内容的一部分。我们没有理由因为自己是重构，而不去学习其他技术，因为你知道你不会干一辈子的重构，JS不能丢，同样的对前端新技术要熟知。重构页面时应该把大部分的时间花在页面模块的抽离、性能优化、易维护性、易用性的探索上，而应该花最少的时间去代码实现。也许你写出来的页面有百万级的用户在使用，这里可能有障碍用户，所以你要考虑各种用户的感受与体验，而不仅仅是局限于代码的完成度上。
注重前端基础技能
前端的基础知识就像一个房子的地基，如果地基打不好，一旦遇到一点地震可能就会倒。同时也像一个城堡的各扇门，哪边的门造的不好，敌人的枪火就可以马上攻破，所以打好基础是前端学习更多知识的基石。CSS属性的特性、html标签的语义化、JS的基础知识、W3C的规范（块格式化上下文、层叠上下文、框模型等），这些可以多花点时间去学习和巩固，做到能正确合理的使用某个前端技术方案。
正确对待前沿技术
互联网发展日新月异，前端技术更新也很快，当我们在学css2时，css3已经风靡全球，当我们在学css3时，css4已经被提上了日程。前端的路上永远学无止境，所以在某项新技术诞生时，就需要我们正确的去审视。
在做好自己本职工作的同时，保持一颗学习的热情，新技术可以尝试使用，但请先一定了解为什么要用这个新技术？使用这个技术能为我们带来什么改进？在前端技术上，永远没有最好的技术方案，只有最合适的技术方案。最新的不一定是最好的，旧的也不一定是差的，切忌盲目跟风学习新技术，要知道自己正在学的是否能够学以致用。(笔者注：其实更多的时候并不是某项新技术，技术早就诞生，只是一个新的前端解决方案或标准被推动出来了，如CSS3其实在03年就诞生了）
更好的沟通能力
我们每天可能要和开发、产品、设计、交互、测试等不同的人打交道，所以这就需要我们有一个更好的沟通协调能力，注重一个更好的沟通技巧，减少沟通上的成本。”一切以用户的价值为依归”，这也正是互联网行业所需要的一种理念，在与其他同事沟通时除了真诚待人以外，还需要多为用户去考虑：我们真的需要这么做么？
有选择的参加技术论坛
如果自己呆在一个小公司，前端人也不是很多，没有一个很好的氛围，那么这时我们就只能通过两种方式来拓宽人脉：网络和论坛。网络如QQ群、蓝色理想等，而面对面的论坛无疑是最真实的一种拓宽人脉的方式。其实现在国内大的环境下，前端类的技术论坛我自己都数不过来，这时有选择的参加一个论坛显得尤为重要，而不该不管自己懂不懂、免费还是收费什么论坛都去参加，其实适合自己的是最重要的。
关注浏览器厂商
10年前，IE统治了大半个地球，如今，其他的各大浏览器厂商已挤进全球化份额争夺战，最离不开前端的就是浏览器，关注浏览器厂商的动作与格局可以让你拥有前瞻性的视角。一些浏览器厂商的开发者库：微软的MSDN，火狐的MDN，谷歌的开发者库，欧朋的开发者库。另外可以关注下各浏览器厂商的推广活动，火狐中国会在每一次推出新版本时有体验活动，微软的最新的IE10推出时国内也有推广活动，可以了解这些新版本浏览器的特性以及对css3\html5的支持性如何。
更多的承担和分享
在平时更多的去承担一些额外的工作，譬如在重构团队的协作规范、编码规范上提出自己的一些合理化建议，输出一些利于其他同事更快、更高效提升的文档。平时在自己工作遇到了一些好的工作方法或者对一些新技术的研究可以拿出来和大家分享。重构的团队氛围很重要，谁都不希望呆在一个整天只管自己写代码的团队，那样不管对于个人还是团队都是不利的。
更多的思考与总结
思考指的是”意识流”，具体是我们在重构过程中的想法和理念，怎么想决定了我们怎么做。
作为重构，很多人拿到设计稿之后就是开始埋头切图，用各种”奇技淫巧”实现各种需求，我们甚至不会在拿到设计稿之后仔细的做一下分析：如何做一个合理的架构、如何抽取合适的模块、如何用更优雅的方式和轻量的代码实现页面中的需求。
也许是目前大的环境下在催促着我们不断的向前跑：各种前端论坛大多数都在讲某个技术，纠结于某一技术细节的实现，讲烂掉的性能优化，可很少有人去讲该如何合理的选择一个前端解决方案，如何解决重构中遇到的一系列不同场景中的问题，以及最重要的我们自己的职业生涯思考：我们是准备写一辈子代码么？
总结也叫”review”，是复习、回顾的意思，review对于重构来讲，显得尤为重要，定期的项目回顾能够发现项目中存在的问题从而规避以后再次出现。
当然项目回顾是一方面，更重要的是代码层面的review，不定期的review可以促使我们在一些代码的细节把控方面做的更优雅，review除了可以提高代码的品质外，还能加强团队的协作精神，以及提高团队的整体技术能力。显然这是一件非常有意义的事。团队成员可以在一起review大家的代码，发现每个人身上的不足和亮点，不然我们真的是只管埋头自己代码的苦逼代码仔了。
从生活角度：
保持阅读的热情
网络的信息是碎片化的，在我们没有很好的梳理碎片能力的时候，一本实物书籍对于慰藉我们的心灵显得尤为重要。有时生活、工作会让人压的喘不过气来，这时，我们需要去寻找一种方式去释放压力，嗯，阅读是一种很好的方式。
坚持一项运动爱好
平时工作太忙时，切记一定要改变自己的工作方法，梳理好需求的优先级，预留出一定的时间来放松自己，这个放松一定要让自己的筋骨活动开，可以是去打打羽毛球，或者去跑步，再或者去健身。只有让自己的身体变得强大起来，才有更多的能量值去砍怪升级。
保持乐观的生活态度
善于捕捉生活中的一些细小的幸福颗粒，我们就会经常活在快乐中。上次在腾讯健康加油站听了一次关于生活的分享，其中提到”生活就像炖鸡汤，有时需要加点调料和沾料”，的确，这些沾料就是发现生活中的细小幸福，做一个乐观、豁达、开朗的前端人士。调节好工作和生活的平衡，让自己不要再活的那么累。
————————————-
嗯，做个好重构真的挺不容易的，无论是从专业角度还是从生活角度，缺一不可，保持一个乐观、热情、积极的心，不断学习，让自己活得简单、快乐，此足矣。
其实，你不仅是在重构代码，也是在重构人生！天极传媒：天极网全国分站
您现在的位置：
& >&如何做一个优秀的前端重构工程师
如何做一个优秀的前端重构工程师腾讯网 09:23
　　善于捕捉生活中的一些细小的幸福颗粒，我们就会经常活在快乐中。上次在腾讯健康加油站听了一次关于生活的分享，其中提到"生活就像炖鸡汤，有时需要加点调料和沾料"，的确，这些沾料就是发现生活中的细小幸福，做一个乐观、豁达、开朗的前端人士。调节好工作和生活的平衡，让自己不要再活的那么累。
　　用这个标题，是因为前一段时间组里有一个开放式讨论：怎样才算一个好重构？
　　其实，"好"与"坏"向来都是相对的，因为每个人眼中看待"好"与"坏"的标准不一样，不如从自身的角度考虑一下：如何做一个好重构？
　　先来看一个平时我们遇到的最多的两栏布局：
　　基本的html代码：
　　来看具体的CSS代码实现(忽略margin)：
　　很明显在保持同样html结构的情况下，实现两栏布局可以有多种CSS方案实现(左栏定宽)，主要方向是用浮动或不用浮动，右栏定宽或者不定宽：
　　Qzone、朋友网、Facebook都给左栏浮动，唯一不同的是右栏的写法，Qzone给右栏定宽并且浮动，而朋友网和Facebook则并没有给右栏定宽也未浮动，而是利用了创建BFC并且为低版本IE触发hasLayout的原理让右栏自适应宽度。
　　Yahoo 和Google两栏都未用浮动，唯一不同的是Yahoo用了绝对定位的方法，而谷歌用了inline-block，Google已经宣布旗下一些产品放弃对IE8 的支持，所以Google可以大胆的使用inline-block去实现布局，不用去为其他低版本浏览器写一大堆的hack。
　　这其中有最好的方案么？上面每一种方案都有各自的优劣，可能适合于某种项目背景，同样选用的方案可能和用户群体也有关系。虽然无论选用哪一种方案，从用户层面来讲，无法感知到，但我们不能因此去随意的使用一种方案。
　　为了项目后期的易维护性和易用性，必须要选择一种最佳的方案，而我们如果连基本的BFC、hasLayout这些知识都不了解便会显得力不从心。同时要明确自己的定位：我们不仅仅是一个"切图仔"或"美工"，我们不能忽视一些障碍用户群体，我们必须去使项目的代码变得更优雅、更易用。虽然重构的基本岗位职责是：PSD转html + css + js，但要知道仅仅做到这些还不算一个好重构，更好的沟通能力，更多的分享、思考和总结，如何正确的去关注一些前端的动态，这都是我们需要做的，当然最重要的还需要我们有一个乐观的态度和幸福的心态，下面本人将详细阐述到底如何做一个好重构，当然这只是鄙人的个人观点，还请各位拍砖。
　　从专业角度：
　　明确的自身定位
　　目前国内将前端分为重构和JS开发的并不多，虽然PS是重构必用的一个软件，但要知道重构不是"切图仔"，切图只是重构工作内容的一部分。我们没有理由因为自己是重构，而不去学习其他技术，因为你知道你不会干一辈子的重构，JS不能丢，同样的对前端新技术要熟知。重构页面时应该把大部分的时间花在页面模块的抽离、性能优化、易维护性、易用性的探索上，而应该花最少的时间去代码实现。也许你写出来的页面有百万级的用户在使用，这里可能有障碍用户，所以你要考虑各种用户的感受与，而不仅仅是局限于代码的完成度上。
　　注重前端基础技能
　　前端的基础知识就像一个房子的地基，如果地基打不好，一旦遇到一点地震可能就会倒。同时也像一个城堡的各扇门，哪边的门造的不好，敌人的枪火就可以马上攻破，所以打好基础是前端学习更多知识的基石。CSS属性的特性、html标签的语义化、JS的基础知识、W3C的规范(块格式化上下文、层叠上下文、框模型等)，这些可以多花点时间去学习和巩固，做到能正确合理的使用某个前端技术方案。
　　正确对待前沿技术
　　互联网发展日新月异，前端技术更新也很快，当我们在学css2时，css3已经风靡全球，当我们在学css3时，css4已经被提上了日程。前端的路上永远学无止境，所以在某项新技术诞生时，就需要我们正确的去审视。
　　在做好自己本职工作的同时，保持一颗学习的热情，新技术可以尝试使用，但请先一定了解为什么要用这个新技术？使用这个技术能为我们带来什么改进？在前端技术上，永远没有最好的技术方案，只有最合适的技术方案。最新的不一定是最好的，旧的也不一定是差的，切忌盲目跟风学习新技术，要知道自己正在学的是否能够学以致用。(笔者注：其实更多的时候并不是某项新技术，技术早就诞生，只是一个新的前端解决方案或标准被推动出来了，如CSS3其实在03年就诞生了)
　　更好的沟通能力
　　我们每天可能要和开发、产品、设计、交互、等不同的人打交道，所以这就需要我们有一个更好的沟通协调能力，注重一个更好的沟通技巧，减少沟通上的成本。"一切以用户的价值为依归"，这也正是互联网行业所需要的一种理念，在与其他同事沟通时除了真诚待人以外，还需要多为用户去考虑：我们真的需要这么做么？
　　有选择的参加技术论坛
　　如果自己呆在一个小公司，前端人也不是很多，没有一个很好的氛围，那么这时我们就只能通过两种方式来拓宽人脉：网络和论坛。网络如群、蓝色理想等，而面对面的论坛无疑是最真实的一种拓宽人脉的方式。其实现在国内大的环境下，前端类的技术论坛我自己都数不过来，这时有选择的参加一个论坛显得尤为重要，而不该不管自己懂不懂、免费还是收费什么论坛都去参加，其实适合自己的是最重要的。
　　关注浏览器厂商
　　10年前，IE统治了大半个地球，如今，其他的各大浏览器厂商已挤进全球化份额争夺战，最离不开前端的就是浏览器，关注浏览器厂商的动作与格局可以让你拥有前瞻性的视角。一些浏览器厂商的开发者库：微软的MSDN，火狐的MDN，谷歌的开发者库，欧朋的开发者库。另外可以关注下各浏览器厂商的推广活动，火狐中国会在每一次推出新版本时有体验活动，微软的最新的推出时国内也有推广活动，可以了解这些新版本浏览器的特性以及对css3\html5的支持性如何。
　　更多的承担和分享
　　在平时更多的去承担一些额外的工作，譬如在重构团队的协作规范、编码规范上提出自己的一些合理化建议，输出一些利于其他同事更快、更高效提升的文档。平时在自己工作遇到了一些好的工作方法或者对一些新技术的研究可以拿出来和大家分享。重构的团队氛围很重要，谁都不希望呆在一个整天只管自己写代码的团队，那样不管对于个人还是团队都是不利的。
　　更多的思考与总结
　　思考指的是"意识流"，具体是我们在重构过程中的想法和理念，怎么想决定了我们怎么做。
　　作为重构，很多人拿到设计稿之后就是开始埋头切图，用各种"奇技淫巧"实现各种需求，我们甚至不会在拿到设计稿之后仔细的做一下分析：如何做一个合理的架构、如何抽取合适的模块、如何用更优雅的方式和轻量的代码实现页面中的需求。
　　也许是目前大的环境下在催促着我们不断的向前跑：各种前端论坛大多数都在讲某个技术，纠结于某一技术细节的实现，讲烂掉的性能优化，可很少有人去讲该如何合理的选择一个前端解决方案，如何解决重构中遇到的一系列不同场景中的问题，以及最重要的我们自己的职业生涯思考：我们是准备写一辈子代码么？
　　总结也叫"review"，是复习、回顾的意思，review对于重构来讲，显得尤为重要，定期的项目回顾能够发现项目中存在的问题从而规避以后再次出现。
　　当然项目回顾是一方面，更重要的是代码层面的review，不定期的review可以促使我们在一些代码的细节把控方面做的更优雅，review除了可以提高代码的品质外，还能加强团队的协作精神，以及提高团队的整体技术能力。显然这是一件非常有意义的事。团队成员可以在一起review大家的代码，发现每个人身上的不足和亮点，不然我们真的是只管埋头自己代码的苦逼代码仔了。
　　从生活角度：
　　保持阅读的热情
　　网络的信息是碎片化的，在我们没有很好的梳理碎片能力的时候，一本实物书籍对于慰藉我们的心灵显得尤为重要。有时生活、工作会让人压的喘不过气来，这时，我们需要去寻找一种方式去释放压力，嗯，阅读是一种很好的方式。
　　坚持一项运动爱好
　　平时工作太忙时，切记一定要改变自己的工作方法，梳理好需求的优先级，预留出一定的时间来放松自己，这个放松一定要让自己的筋骨活动开，可以是去打打羽毛球，或者去跑步，再或者去健身。只有让自己的身体变得强大起来，才有更多的能量值去砍怪升级。
　　保持乐观的生活态度
　　善于捕捉生活中的一些细小的幸福颗粒，我们就会经常活在快乐中。上次在腾讯健康加油站听了一次关于生活的分享，其中提到"生活就像炖鸡汤，有时需要加点调料和沾料"，的确，这些沾料就是发现生活中的细小幸福，做一个乐观、豁达、开朗的前端人士。调节好工作和生活的平衡，让自己不要再活的那么累。
　　嗯，做个好重构真的挺不容易的，无论是从专业角度还是从生活角度，缺一不可，保持一个乐观、热情、积极的心，不断学习，让自己活得简单、快乐，此足矣。
　　其实，你不仅是在重构代码，也是在重构人生!
　　原文链接：http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/630.shtml
（作者：smallni责任编辑：Sunny）
天极新媒体&最酷科技资讯扫码赢大奖
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
办公软件IT新闻整机Web重构之道 - WEB前端 - 伯乐在线
& Web重构之道
Web重构之道是今年十月份参加的专题的一次分享的主题。这次有幸能跟、、等大神一起同台分享，感到非常的荣幸，也感到无比的压力。还好分享已结束，借此机会重新回忆这次大会上自己分享的主题。在此之前我首先要感谢给我上台分享的机会，感谢大大的推荐、建议与鼓励。最后感谢提供这样的分享平台。
虽然技不如人，而且懂得知识也少，干货不多，但我是一位爱于分享的人。也是第一次到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可以。