毛叔(騰訊財(cái)付通設(shè)計(jì)中心)：4個(gè)月前我得到了人生中的第一份職位——“重構(gòu)工程師”。那時(shí)就經(jīng)常有人問(wèn)我：“這份職位是做什么？”“重構(gòu)需要什么技術(shù)？”，當(dāng)時(shí)我的回答是：“重構(gòu)就是前端咯?！比欢?jīng)過(guò)這個(gè)4個(gè)月的工作之后，我發(fā)現(xiàn)當(dāng)時(shí)我的回答可能不那么的正確。那么，作為一位仍然還是“新人”的重構(gòu)工程師，說(shuō)一下關(guān)于這份職位現(xiàn)在我的理解和學(xué)習(xí)到的東西吧。當(dāng)然，有錯(cuò)誤或不當(dāng)?shù)牡胤竭€請(qǐng)各位前輩多多指教。

重構(gòu)工程師是做什么的？需要什么樣的素質(zhì)？

對(duì)于重構(gòu)工程師這個(gè)職位，比較官方的回答是：“以網(wǎng)頁(yè)為載體，將網(wǎng)站的視覺(jué)與交互反饋以更優(yōu)的方式在終端中實(shí)現(xiàn)；勇于挑戰(zhàn)現(xiàn)有的不合理規(guī)則，追求標(biāo)準(zhǔn)化；設(shè)計(jì)師中的程序員、程序員中的設(shè)計(jì)師?！?/p>

看到以上的解釋，你是不是覺(jué)得說(shuō)的再好聽(tīng)重構(gòu)工程師不就是做網(wǎng)頁(yè)嗎，重構(gòu)工程師=切圖+HTML+CSS，多么簡(jiǎn)單的一份工作！其實(shí)不然，切圖也好、HTML和CSS代碼也罷，這些只不過(guò)是我們使用的“道具”，更重要的是我們追求的目標(biāo)是什么？我們要實(shí)現(xiàn)的是什么？我認(rèn)為，所謂重構(gòu)工程師所做的恰恰是項(xiàng)目中最基礎(chǔ)也是最關(guān)鍵的工作，我們?cè)谇袌D，但考慮的是怎樣切才能使布局最合理化、加載速度最快、及易實(shí)現(xiàn)性；我們?cè)趯懘a，但考慮的是怎樣以代碼量最少、JS調(diào)用最合適、最符合規(guī)范、性能最好、可維護(hù)性最佳的情況下來(lái)實(shí)現(xiàn)各瀏覽器上最小差別甚至無(wú)差別的UI展現(xiàn)和用戶體驗(yàn)。

一句話總結(jié)一下，用戶之所以能在各平臺(tái)上無(wú)差別的瀏覽頁(yè)面并擁有良好的用戶體驗(yàn)，很大程度上，正是重構(gòu)工程師們的工作所帶來(lái)的。

剛開始工作的時(shí)候，我也是想：“不就是寫寫HTML+CSS代碼嗎，隨便一個(gè)計(jì)算機(jī)專業(yè)的人都行咯，這份工作會(huì)不會(huì)太簡(jiǎn)單?！苯?jīng)過(guò)這4個(gè)月的工作之后，才發(fā)現(xiàn)當(dāng)時(shí)自己的淺薄和無(wú)知。列個(gè)表寫一下當(dāng)時(shí)和現(xiàn)在對(duì)這份工作的做法和理解的不同吧。

從上表我們不難總結(jié)出，一個(gè)合格的重構(gòu)工程師應(yīng)該具備的幾點(diǎn)素質(zhì)：

（一）???良好的溝通能力

溝通，是任何工作中都不能缺少的，重構(gòu)也一樣。在一個(gè)需求正式開始寫代碼之前，我們首先要要做的就是和上游產(chǎn)品經(jīng)理、視覺(jué)設(shè)計(jì)師、以及下游前端工程師的溝通。在和上游的溝通中，我們要明確這個(gè)需求的背景（為什么要做這個(gè)需求、這個(gè)需求的必要性）、目的、內(nèi)容、需要實(shí)現(xiàn)的功能，然后確認(rèn)視覺(jué)稿，對(duì)其中有疑問(wèn)、發(fā)現(xiàn)有缺失的地方也及時(shí)進(jìn)行溝通。和上游溝通結(jié)束之后，就可以確定這個(gè)需求的優(yōu)先級(jí)和工作量了。然后再和下游進(jìn)行溝通，進(jìn)一步的確定重構(gòu)的工作范圍和實(shí)現(xiàn)方式。

（二）???對(duì)自己的產(chǎn)品負(fù)責(zé)的心態(tài)

對(duì)自己的產(chǎn)品負(fù)責(zé)不是說(shuō)在規(guī)定的時(shí)間內(nèi)做完就好了，更應(yīng)該考慮的是我們產(chǎn)出的性能以及可維護(hù)性。比如說(shuō)最基礎(chǔ)的：你制作的某個(gè)頁(yè)面加載速度如何？頁(yè)面中是不是總會(huì)有溢出的問(wèn)題？前端工程師是不是認(rèn)為你的代碼難以閱讀或?yàn)樗麄兊墓ぷ鲙?lái)了其他不便？你制作的頁(yè)面是不是讓其他同事難以維護(hù)？等等。另外，經(jīng)常去瀏覽自己的頁(yè)面，檢查是否出現(xiàn)了什么問(wèn)題也是必要的。發(fā)現(xiàn)自己的產(chǎn)品有任何問(wèn)題，都應(yīng)該主動(dòng)的去及時(shí)修復(fù)，而不是等著產(chǎn)品經(jīng)理發(fā)現(xiàn)、提出、再去修復(fù)。

（三）???追求細(xì)節(jié)完美的精神

一個(gè)合格的重構(gòu)工程師不僅僅是要完美的還原視覺(jué)稿，在制作的過(guò)程中，還要善于發(fā)現(xiàn)視覺(jué)稿中都沒(méi)有注意到的問(wèn)題，比如行距、按鈕顏色的統(tǒng)一性、字體的統(tǒng)一性等問(wèn)題。另外，各瀏覽器上的展現(xiàn)是否有較大的差異、代碼是否有冗余、其性能的優(yōu)劣和可維護(hù)性等專業(yè)度上的細(xì)節(jié)也是我們必須要重點(diǎn)注意到的。

就像是從最初的“目測(cè)”視覺(jué)稿到現(xiàn)在1px、1px的去量、去檢查視覺(jué)稿的還原度，從拿到視覺(jué)稿馬上去實(shí)現(xiàn)到現(xiàn)在拿到稿先分析的這種轉(zhuǎn)變，這四個(gè)月中，我學(xué)到的更多的是一種注重細(xì)節(jié)的態(tài)度和思考的方法。一名合格的重構(gòu)工程師追求的就是這種細(xì)節(jié)上的完美和置身處地的思考。今天我學(xué)到了很多，之后能學(xué)的更多，也許再過(guò)4個(gè)月，又會(huì)和今天不同的理解。

原文地址：http://tid.tenpay.com/?p=2328
作者：毛叔
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量69萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：