用這個(gè)標(biāo)題,是因?yàn)榍耙欢螘r(shí)間組里有一個(gè)開放式討論:怎樣才算一個(gè)好重構(gòu)?
其實(shí),"好"與"壞"向來都是相對的,因?yàn)槊總(gè)人眼中看待"好"與"壞"的標(biāo)準(zhǔn)不一樣,不如從自身的角度考慮一下:如何做一個(gè)好重構(gòu)?
先來看一個(gè)平時(shí)我們遇到的最多的兩欄布局:
基本的html代碼:
來看具體的CSS代碼實(shí)現(xiàn)(忽略margin):
很明顯在保持同樣html結(jié)構(gòu)的情況下,實(shí)現(xiàn)兩欄布局可以有多種CSS方案實(shí)現(xiàn)(左欄定寬),主要方向是用浮動(dòng)或不用浮動(dòng),右欄定寬或者不定寬:
Qzone、朋友網(wǎng)、Facebook都給左欄浮動(dòng),唯一不同的是右欄的寫法,Qzone給右欄定寬并且浮動(dòng),而朋友網(wǎng)和Facebook則并沒有給右欄定寬也未浮動(dòng),而是利用了創(chuàng)建BFC并且為低版本IE觸發(fā)hasLayout的原理讓右欄自適應(yīng)寬度,
如何做一個(gè)好重構(gòu)
。Yahoo和Google兩欄都未用浮動(dòng),唯一不同的是Yahoo用了絕對定位的方法,而谷歌用了inline-block,Google已經(jīng)宣布旗下一些產(chǎn)品放棄對IE8 的支持,所以Google可以大膽的使用inline-block去實(shí)現(xiàn)布局,不用去為其他低版本瀏覽器寫一大堆的hack。
這其中有最好的方案么?上面每一種方案都有各自的優(yōu)劣,可能適合于某種項(xiàng)目背景,同樣選用的方案可能和用戶群體也有關(guān)系。雖然無論選用哪一種方案,從用戶層面來講,無法感知到,但我們不能因此去隨意的使用一種方案。
為了項(xiàng)目后期的易維護(hù)性和易用性,必須要選擇一種最佳的方案,而我們?nèi)绻B基本的BFC、hasLayout這些知識都不了解便會(huì)顯得力不從心。同時(shí)要明確自己的定位:我們不僅僅是一個(gè)"切圖仔"或"美工",我們不能忽視一些障礙用戶群體,我們必須去使項(xiàng)目的代碼變得更優(yōu)雅、更易用。雖然重構(gòu)的基本崗位職責(zé)是:PSD轉(zhuǎn)html + css + js,但要知道僅僅做到這些還不算一個(gè)好重構(gòu),更好的溝通能力,更多的分享、思考和總結(jié),如何正確的去關(guān)注一些前端的動(dòng)態(tài),這都是我們需要做的,當(dāng)然最重要的還需要我們有一個(gè)樂觀的態(tài)度和幸福的心態(tài),下面本人將詳細(xì)闡述到底如何做一個(gè)好重構(gòu),當(dāng)然這只是鄙人的個(gè)人觀點(diǎn),還請各位拍磚。
從專業(yè)角度:
明確的自身定位
目前國內(nèi)將前端分為重構(gòu)和JS開發(fā)的并不多,雖然PS是重構(gòu)必用的一個(gè)軟件,但要知道重構(gòu)不是"切圖仔",切圖只是重構(gòu)工作內(nèi)容的一部分。我們沒有理由因?yàn)樽约菏侵貥?gòu),而不去學(xué)習(xí)其他技術(shù),因?yàn)槟阒滥悴粫?huì)干一輩子的重構(gòu),JS不能丟,同樣的對前端新技術(shù)要熟知。重構(gòu)頁面時(shí)應(yīng)該把大部分的時(shí)間花在頁面模塊的抽離、性能優(yōu)化、易維護(hù)性、易用性的探索上,而應(yīng)該花最少的時(shí)間去代碼實(shí)現(xiàn)。也許你寫出來的頁面有百萬級的用戶在使用,這里可能有障礙用戶,所以你要考慮各種用戶的感受與體驗(yàn),而不僅僅是局限于代碼的完成度上。
注重前端基礎(chǔ)技能
前端的基礎(chǔ)知識就像一個(gè)房子的地基,如果地基打不好,一旦遇到一點(diǎn)地震可能就會(huì)倒。同時(shí)也像一個(gè)城堡的各扇門,哪邊的門造的不好,敵人的槍火就可以馬上攻破,所以打好基礎(chǔ)是前端學(xué)習(xí)更多知識的基石。CSS屬性的特性、html標(biāo)簽的語義化、JS的基礎(chǔ)知識、W3C的規(guī)范(塊格式化上下文、層疊上下文、框模型等),這些可以多花點(diǎn)時(shí)間去學(xué)習(xí)和鞏固,做到能正確合理的使用某個(gè)前端技術(shù)方案。
正確對待前沿技術(shù)
互聯(lián)網(wǎng)發(fā)展日新月異,前端技術(shù)更新也很快,當(dāng)我們在學(xué)css2時(shí),css3已經(jīng)風(fēng)靡全球,當(dāng)我們在學(xué)css3時(shí),css4已經(jīng)被提上了日程。前端的路上永遠(yuǎn)學(xué)無止境,所以在某項(xiàng)新技術(shù)誕生時(shí),就需要我們正確的去審視。
在做好自己本職工作的同時(shí),保持一顆學(xué)習(xí)的熱情,新技術(shù)可以嘗試使用,但請先一定了解為什么要用這個(gè)新技術(shù)?使用這個(gè)技術(shù)能為我們帶來什么改進(jìn)?在前端技術(shù)上,永遠(yuǎn)沒有最好的技術(shù)方案,只有最合適的技術(shù)方案。最新的不一定是最好的,舊的也不一定是差的,切忌盲目跟風(fēng)學(xué)習(xí)新技術(shù),要知道自己正在學(xué)的是否能夠?qū)W以致用。(筆者注:其實(shí)更多的時(shí)候并不是某項(xiàng)新技術(shù),技術(shù)早就誕生,只是一個(gè)新的前端解決方案或標(biāo)準(zhǔn)被推動(dòng)出來了,如CSS3其實(shí)在03年就誕生了)
更好的溝通能力
我們每天可能要和開發(fā)、產(chǎn)品、設(shè)計(jì)、交互、測試等不同的人打交道,所以這就需要我們有一個(gè)更好的溝通協(xié)調(diào)能力,注重一個(gè)更好的溝通技巧,減少溝通上的成本,
電腦資料
《如何做一個(gè)好重構(gòu)》(http://m.dameics.com)。"一切以用戶的價(jià)值為依歸",這也正是互聯(lián)網(wǎng)行業(yè)所需要的一種理念,在與其他同事溝通時(shí)除了真誠待人以外,還需要多為用戶去考慮:我們真的需要這么做么?有選擇的參加技術(shù)論壇
如果自己呆在一個(gè)小公司,前端人也不是很多,沒有一個(gè)很好的氛圍,那么這時(shí)我們就只能通過兩種方式來拓寬人脈:網(wǎng)絡(luò)和論壇。網(wǎng)絡(luò)如QQ群、藍(lán)色理想等,而面對面的論壇無疑是最真實(shí)的一種拓寬人脈的方式。其實(shí)現(xiàn)在國內(nèi)大的環(huán)境下,前端類的技術(shù)論壇我自己都數(shù)不過來,這時(shí)有選擇的參加一個(gè)論壇顯得尤為重要,而不該不管自己懂不懂、免費(fèi)還是收費(fèi)什么論壇都去參加,其實(shí)適合自己的是最重要的。
關(guān)注瀏覽器廠商
10年前,IE統(tǒng)治了大半個(gè)地球,如今,其他的各大瀏覽器廠商已擠進(jìn)全球化份額爭奪戰(zhàn),最離不開前端的就是瀏覽器,關(guān)注瀏覽器廠商的動(dòng)作與格局可以讓你擁有前瞻性的視角。一些瀏覽器廠商的開發(fā)者庫:微軟的MSDN,火狐的MDN,谷歌的開發(fā)者庫,歐朋的開發(fā)者庫。另外可以關(guān)注下各瀏覽器廠商的推廣活動(dòng),火狐中國會(huì)在每一次推出新版本時(shí)有體驗(yàn)活動(dòng),微軟的最新的IE10推出時(shí)國內(nèi)也有推廣活動(dòng),可以了解這些新版本瀏覽器的特性以及對 css3html5的支持性如何。
更多的承擔(dān)和分享
在平時(shí)更多的去承擔(dān)一些額外的工作,譬如在重構(gòu)團(tuán)隊(duì)的協(xié)作規(guī)范、編碼規(guī)范上提出自己的一些合理化建議,輸出一些利于其他同事更快、更高效提升的文檔。平時(shí)在自己工作遇到了一些好的工作方法或者對一些新技術(shù)的研究可以拿出來和大家分享。重構(gòu)的團(tuán)隊(duì)氛圍很重要,誰都不希望呆在一個(gè)整天只管自己寫代碼的團(tuán)隊(duì),那樣不管對于個(gè)人還是團(tuán)隊(duì)都是不利的。
更多的思考與總結(jié)
思考指的是"意識流",具體是我們在重構(gòu)過程中的想法和理念,怎么想決定了我們怎么做。
作為重構(gòu),很多人拿到設(shè)計(jì)稿之后就是開始埋頭切圖,用各種"奇技淫巧"實(shí)現(xiàn)各種需求,我們甚至不會(huì)在拿到設(shè)計(jì)稿之后仔細(xì)的做一下分析:如何做一個(gè)合理的架構(gòu)、如何抽取合適的模塊、如何用更優(yōu)雅的方式和輕量的代碼實(shí)現(xiàn)頁面中的需求。
也許是目前大的環(huán)境下在催促著我們不斷的向前跑:各種前端論壇大多數(shù)都在講某個(gè)技術(shù),糾結(jié)于某一技術(shù)細(xì)節(jié)的實(shí)現(xiàn),講爛掉的性能優(yōu)化,可很少有人去講該如何合理的選擇一個(gè)前端解決方案,如何解決重構(gòu)中遇到的一系列不同場景中的問題,以及最重要的我們自己的職業(yè)生涯思考:我們是準(zhǔn)備寫一輩子代碼么?
總結(jié)也叫"review",是復(fù)習(xí)、回顧的意思,review對于重構(gòu)來講,顯得尤為重要,定期的項(xiàng)目回顧能夠發(fā)現(xiàn)項(xiàng)目中存在的問題從而規(guī)避以后再次出現(xiàn)。
當(dāng)然項(xiàng)目回顧是一方面,更重要的是代碼層面的review,不定期的review可以促使我們在一些代碼的細(xì)節(jié)把控方面做的更優(yōu)雅,review除了可以提高代碼的品質(zhì)外,還能加強(qiáng)團(tuán)隊(duì)的協(xié)作精神,以及提高團(tuán)隊(duì)的整體技術(shù)能力。顯然這是一件非常有意義的事。團(tuán)隊(duì)成員可以在一起review大家的代碼,發(fā)現(xiàn)每個(gè)人身上的不足和亮點(diǎn),不然我們真的是只管埋頭自己代碼的苦逼代碼仔了。
從生活角度:
保持閱讀的熱情
網(wǎng)絡(luò)的信息是碎片化的,在我們沒有很好的梳理碎片能力的時(shí)候,一本實(shí)物書籍對于慰藉我們的心靈顯得尤為重要。有時(shí)生活、工作會(huì)讓人壓的喘不過氣來,這時(shí),我們需要去尋找一種方式去釋放壓力,嗯,閱讀是一種很好的方式。
堅(jiān)持一項(xiàng)運(yùn)動(dòng)愛好
平時(shí)工作太忙時(shí),切記一定要改變自己的工作方法,梳理好需求的優(yōu)先級,預(yù)留出一定的時(shí)間來放松自己,這個(gè)放松一定要讓自己的筋骨活動(dòng)開,可以是去打打羽毛球,或者去跑步,再或者去健身。只有讓自己的身體變得強(qiáng)大起來,才有更多的能量值去砍怪升級。
保持樂觀的生活態(tài)度
善于捕捉生活中的一些細(xì)小的幸福顆粒,我們就會(huì)經(jīng);钤诳鞓分。上次在騰訊健康加油站聽了一次關(guān)于生活的分享,其中提到"生活就像燉雞湯,有時(shí)需要加點(diǎn)調(diào)料和沾料",的確,這些沾料就是發(fā)現(xiàn)生活中的細(xì)小幸福,做一個(gè)樂觀、豁達(dá)、開朗的前端人士。調(diào)節(jié)好工作和生活的平衡,讓自己不要再活的那么累。
嗯,做個(gè)好重構(gòu)真的挺不容易的,無論是從專業(yè)角度還是從生活角度,缺一不可,保持一個(gè)樂觀、熱情、積極的心,不斷學(xué)習(xí),讓自己活得簡單、快樂,此足矣。
其實(shí),你不僅是在重構(gòu)代碼,也是在重構(gòu)人生!