4個(gè)月前我得到了人生中的第一份職位——“重構(gòu)工程師”。那時(shí)就經(jīng)常有人問我:“這份職位是做什么?”“重構(gòu)需要什么技術(shù)?”,當(dāng)時(shí)我的回答是:“重構(gòu)就是前端咯。”然而經(jīng)過這個(gè)4個(gè)月的工作之后,我發(fā)現(xiàn)當(dāng)時(shí)我的回答可能不那么的正確。那么,作為一位仍然還是“新人”的重構(gòu)工程師,說一下關(guān)于這份職位現(xiàn)在我的理解和學(xué)習(xí)到的東西吧。當(dāng)然,有錯(cuò)誤或不當(dāng)?shù)牡胤竭€請各位前輩多多指教。 重構(gòu)工程師是做什么的?需要什么樣的素質(zhì)? 對于重構(gòu)工程師這個(gè)職位,比較官方的回答是:“以網(wǎng)頁為載體,將網(wǎng)站的視覺與交互反饋以更優(yōu)的方式在終端中實(shí)現(xiàn);勇于挑戰(zhàn)現(xiàn)有的不合理規(guī)則,追求標(biāo)準(zhǔn)化;設(shè)計(jì)師中的程序員、程序員中的設(shè)計(jì)師。” 看到以上的解釋,你是不是覺得說的再好聽重構(gòu)工程師不就是做網(wǎng)頁嗎,重構(gòu)工程師=切圖+HTML+CSS,多么簡單的一份工作!其實(shí)不然,切圖也好、HTML和CSS代碼也罷,這些只不過是我們使用的“道具”,更重要的是我們追求的目標(biāo)是什么?我們要實(shí)現(xiàn)的是什么?我認(rèn)為,所謂重構(gòu)工程師所做的恰恰是項(xiàng)目中最基礎(chǔ)也是最關(guān)鍵的工作,我們在切圖,但考慮的是怎樣切才能使布局最合理化、加載速度最快、及易實(shí)現(xiàn)性;我們在寫代碼,但考慮的是怎樣以代碼量最少、JS調(diào)用最合適、最符合規(guī)范、性能最好、可維護(hù)性最佳的情況下來實(shí)現(xiàn)各瀏覽器上最小差別甚至無差別的UI展現(xiàn)和用戶體驗(yàn)。 一句話總結(jié)一下,用戶之所以能在各平臺(tái)上無差別的瀏覽頁面并擁有良好的用戶體驗(yàn),很大程度上,正是重構(gòu)工程師們的工作所帶來的。 剛開始工作的時(shí)候,我也是想:“不就是寫寫HTML+CSS代碼嗎,隨便一個(gè)計(jì)算機(jī)專業(yè)的人都行咯,這份工作會(huì)不會(huì)太簡單。”經(jīng)過這4個(gè)月的工作之后,才發(fā)現(xiàn)當(dāng)時(shí)自己的淺薄和無知。列個(gè)表寫一下當(dāng)時(shí)和現(xiàn)在對這份工作的做法和理解的不同吧。
從上表我們不難總結(jié)出,一個(gè)合格的重構(gòu)工程師應(yīng)該具備的幾點(diǎn)素質(zhì): (一) 良好的溝通能力 溝通,是任何工作中都不能缺少的,重構(gòu)也一樣。在一個(gè)需求正式開始寫代碼之前,我們首先要要做的就是和上游產(chǎn)品經(jīng)理、視覺設(shè)計(jì)師、以及下游前端工程師的溝通。在和上游的溝通中,我們要明確這個(gè)需求的背景(為什么要做這個(gè)需求、這個(gè)需求的必要性)、目的、內(nèi)容、需要實(shí)現(xiàn)的功能,然后確認(rèn)視覺稿,對其中有疑問、發(fā)現(xiàn)有缺失的地方也及時(shí)進(jìn)行溝通。和上游溝通結(jié)束之后,就可以確定這個(gè)需求的優(yōu)先級(jí)和工作量了。然后再和下游進(jìn)行溝通,進(jìn)一步的確定重構(gòu)的工作范圍和實(shí)現(xiàn)方式。
(二) 對自己的產(chǎn)品負(fù)責(zé)的心態(tài) 對自己的產(chǎn)品負(fù)責(zé)不是說在規(guī)定的時(shí)間內(nèi)做完就好了,更應(yīng)該考慮的是我們產(chǎn)出的性能以及可維護(hù)性。比如說最基礎(chǔ)的:你制作的某個(gè)頁面加載速度如何?頁面中是不是總會(huì)有溢出的問題?前端工程師是不是認(rèn)為你的代碼難以閱讀或?yàn)樗麄兊墓ぷ鲙砹似渌槐??你制作的頁面是不是讓其他同事難以維護(hù)?等等。另外,經(jīng)常去瀏覽自己的頁面,檢查是否出現(xiàn)了什么問題也是必要的。發(fā)現(xiàn)自己的產(chǎn)品有任何問題,都應(yīng)該主動(dòng)的去及時(shí)修復(fù),而不是等著產(chǎn)品經(jīng)理發(fā)現(xiàn)、提出、再去修復(fù)。
(三) 追求細(xì)節(jié)完美的精神 一個(gè)合格的重構(gòu)工程師不僅僅是要完美的還原視覺稿,在制作的過程中,還要善于發(fā)現(xiàn)視覺稿中都沒有注意到的問題,比如行距、按鈕顏色的統(tǒng)一性、字體的統(tǒng)一性等問題。另外,各瀏覽器上的展現(xiàn)是否有較大的差異、代碼是否有冗余、其性能的優(yōu)劣和可維護(hù)性等專業(yè)度上的細(xì)節(jié)也是我們必須要重點(diǎn)注意到的。 就像是從最初的“目測”視覺稿到現(xiàn)在1px、1px的去量、去檢查視覺稿的還原度,從拿到視覺稿馬上去實(shí)現(xiàn)到現(xiàn)在拿到稿先分析的這種轉(zhuǎn)變,這四個(gè)月中,我學(xué)到的更多的是一種注重細(xì)節(jié)的態(tài)度和思考的方法。一名合格的重構(gòu)工程師追求的就是這種細(xì)節(jié)上的完美和置身處地的思考。今天我學(xué)到了很多,之后能學(xué)的更多,也許再過4個(gè)月,又會(huì)和今天不同的理解。