怎样做一个好的前端重构工程师.docxVIP

　编者注：这里的“重构”指的是将设计图（比如PSD）转换为html + css + js。　　用这个标题，是因为前一段时间组里有一个开放式讨论：怎样才算一个好重构？　　其实，好与坏向来都是相对的，因为每个人眼中看待好与坏的标准不一样，不如从自身的角度考虑一下：如何做一个好重构？　　先来看一个平时我们遇到的最多的两栏布局：　　基本的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其实在2003年就诞生了）　　更好的沟通能力　　我们每天可能要和开发、产品、设计、交互、测试等不同的人打交道，所以这就需要我们有一个更好的沟通协调能力，注重一个更好的沟通技巧，减少沟通上的成本。一切以用户的价值为依归，这也正是互联网行业所需要的一种理念，在与其他同事沟通时除了真诚待人以外，还需要多为用户去考虑：我们真的需要这么做么？　　有选择的参加技术论坛　　如果自己呆在一个小公司，前端人也不是很多，没有一个很好的氛围，那么这时我们就只能通过两种方式来拓宽人脉：网络和论坛。网络如QQ群、蓝色理想等，而面对面的论坛无疑是最真实的一种拓宽人脉的方式。其实现在国内大的环境下，前端类的