淺談網(wǎng)頁(yè)設計怎樣才算一個(gè)好重構發(fā)布者：本站     時(shí)間：2021-12-08 13:12:22

用這個(gè)標題，是因為前一段時(shí)間組里有一個(gè)開(kāi)放式討論：怎樣才算一個(gè)好重構?

其實(shí)，"好"與"壞"向來(lái)都是相對的，因為每個(gè)人眼中看待"好"與"壞"的標準不一樣，不如從自身的角度考慮一下：如何做一個(gè)好重構?

先來(lái)看一個(gè)平時(shí)我們遇到的最多的兩欄布局：

淺談網(wǎng)頁(yè)<a href=/design/ target=_blank class=infotextkey>設計</a>如何才算一個(gè)好重構,PS教程,

基本的html代碼：

淺談<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>如何才算一個(gè)好重構,PS教程,

來(lái)看具體的CSS代碼實(shí)現(忽略margin)：

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

很明顯在保持同樣html結構的情況下，實(shí)現兩欄布局可以有多種CSS方案實(shí)現(左欄定寬)，主要方向是用浮動(dòng)或不用浮動(dòng)，右欄定寬或者不定寬：

Qzone、朋友網(wǎng)、Facebook都給左欄浮動(dòng)，唯一不同的是右欄的寫(xiě)法，Qzone給右欄定寬并且浮動(dòng)，而朋友網(wǎng)和Facebook則并沒(méi)有給右欄定寬也未浮動(dòng)，而是利用了創(chuàng )建BFC并且為低版本IE觸發(fā)hasLayout的原理讓右欄自適應寬度。

Yahoo和Google兩欄都未用浮動(dòng)，唯一不同的是Yahoo用了絕對定位的方法，而谷歌用了inline-block，Google已經(jīng)宣布旗下一些產(chǎn)品放棄對IE8 的支持，所以Google可以大膽的使用inline-block去實(shí)現布局，不用去為其他低版本瀏覽器寫(xiě)一大堆的hack。

這其中有最好的方案么?上面每一種方案都有各自的優(yōu)劣，可能適合于某種項目背景，同樣選用的方案可能和用戶(hù)群體也有關(guān)系。雖然無(wú)論選用哪一種方案，從用戶(hù)層面來(lái)講，無(wú)法感知到，但我們不能因此去隨意的使用一種方案。

為了項目后期的易維護性和易用性，必須要選擇一種最佳的方案，而我們如果連基本的BFC、hasLayout這些知識都不了解便會(huì )顯得力不從心。同時(shí)要明確自己的定位：我們不僅僅是一個(gè)"切圖仔"或"美工"，我們不能忽視一些障礙用戶(hù)群體，我們必須去使項目的代碼變得更優(yōu)雅、更易用。雖然重構的基本崗位職責是：PSD轉html + css + js，但要知道僅僅做到這些還不算一個(gè)好重構，更好的溝通能力，更多的分享、思考和總結，如何正確的去關(guān)注一些前端的動(dòng)態(tài)，這都是我們需要做的，當然最重要的還需要我們有一個(gè)樂(lè )觀(guān)的態(tài)度和幸福的心態(tài)，下面本人將詳細闡述到底如何做一個(gè)好重構，當然這只是鄙人的個(gè)人觀(guān)點(diǎn)，還請各位拍磚。

從專(zhuān)業(yè)角度：

明確的自身定位

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

目前國內將前端分為重構和JS開(kāi)發(fā)的并不多，雖然PS是重構必用的一個(gè)軟件，但要知道重構不是"切圖仔"，切圖只是重構工作內容的一部分。我們沒(méi)有理由因為自己是重構，而不去學(xué)習其他技術(shù)，因為你知道你不會(huì )干一輩子的重構，JS不能丟，同樣的對前端新技術(shù)要熟知。重構頁(yè)面時(shí)應該把大部分的時(shí)間花在頁(yè)面模塊的抽離、性能優(yōu)化、易維護性、易用性的探索上，而應該花最少的時(shí)間去代碼實(shí)現。也許你寫(xiě)出來(lái)的頁(yè)面有百萬(wàn)級的用戶(hù)在使用，這里可能有障礙用戶(hù)，所以你要考慮各種用戶(hù)的感受與體驗，而不僅僅是局限于代碼的完成度上。

注重前端基礎技能

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

前端的基礎知識就像一個(gè)房子的地基，如果地基打不好，一旦遇到一點(diǎn)地震可能就會(huì )倒。同時(shí)也像一個(gè)城堡的各扇門(mén)，哪邊的門(mén)造的不好，敵人的槍火就可以馬上攻破，所以打好基礎是前端學(xué)習更多知識的基石。CSS屬性的特性、html標簽的語(yǔ)義化、JS的基礎知識、W3C的規范(塊格式化上下文、層疊上下文、框模型等)，這些可以多花點(diǎn)時(shí)間去學(xué)習和鞏固，做到能正確合理的使用某個(gè)前端技術(shù)方案。

正確對待前沿技術(shù)

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

互聯(lián)網(wǎng)發(fā)展日新月異，前端技術(shù)更新也很快，當我們在學(xué)css2時(shí)，css3已經(jīng)風(fēng)靡全球，當我們在學(xué)css3時(shí)，css4已經(jīng)被提上了日程。前端的路上永遠學(xué)無(wú)止境，所以在某項新技術(shù)誕生時(shí)，就需要我們正確的去審視。

在做好自己本職工作的同時(shí)，保持一顆學(xué)習的熱情，新技術(shù)可以嘗試使用，但請先一定了解為什么要用這個(gè)新技術(shù)?使用這個(gè)技術(shù)能為我們帶來(lái)什么改進(jìn)?在前端技術(shù)上，永遠沒(méi)有最好的技術(shù)方案，只有最合適的技術(shù)方案。最新的不一定是最好的，舊的也不一定是差的，切忌盲目跟風(fēng)學(xué)習新技術(shù)，要知道自己正在學(xué)的是否能夠學(xué)以致用。(筆者注：其實(shí)更多的時(shí)候并不是某項新技術(shù)，技術(shù)早就誕生，只是一個(gè)新的前端解決方案或標準被推動(dòng)出來(lái)了，如CSS3其實(shí)在03年就誕生了)

更好的溝通能力

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

我們每天可能要和開(kāi)發(fā)、產(chǎn)品、設計、交互、測試等不同的人打交道，所以這就需要我們有一個(gè)更好的溝通協(xié)調能力，注重一個(gè)更好的溝通技巧，減少溝通上的成本。"一切以用戶(hù)的價(jià)值為依歸"，這也正是互聯(lián)網(wǎng)行業(yè)所需要的一種理念，在與其他同事溝通時(shí)除了真誠待人以外，還需要多為用戶(hù)去考慮：我們真的需要這么做么?

有選擇的參加技術(shù)論壇

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

如果自己呆在一個(gè)小公司，前端人也不是很多，沒(méi)有一個(gè)很好的氛圍，那么這時(shí)我們就只能通過(guò)兩種方式來(lái)拓寬人脈：網(wǎng)絡(luò )和論壇。網(wǎng)絡(luò )如QQ群、藍色理想等，而面對面的論壇無(wú)疑是最真實(shí)的一種拓寬人脈的方式。其實(shí)現在國內大的環(huán)境下，前端類(lèi)的技術(shù)論壇我自己都數不過(guò)來(lái)，這時(shí)有選擇的參加一個(gè)論壇顯得尤為重要，而不該不管自己懂不懂、免費還是收費什么論壇都去參加，其實(shí)適合自己的是最重要的。

關(guān)注瀏覽器廠(chǎng)商

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

10年前，IE統治了大半個(gè)地球，如今，其他的各大瀏覽器廠(chǎng)商已擠進(jìn)全球化份額爭奪戰，最離不開(kāi)前端的就是瀏覽器，關(guān)注瀏覽器廠(chǎng)商的動(dòng)作與格局可以讓你擁有前瞻性的視角。一些瀏覽器廠(chǎng)商的開(kāi)發(fā)者庫：微軟的MSDN，火狐的MDN，谷歌的開(kāi)發(fā)者庫，歐朋的開(kāi)發(fā)者庫。另外可以關(guān)注下各瀏覽器廠(chǎng)商的推廣活動(dòng)，火狐中國會(huì )在每一次推出新版本時(shí)有體驗活動(dòng)，微軟的最新的IE10推出時(shí)國內也有推廣活動(dòng)，可以了解這些新版本瀏覽器的特性以及對css3/html5的支持性如何。

更多的承擔和分享

在平時(shí)更多的去承擔一些額外的工作，譬如在重構團隊的協(xié)作規范、編碼規范上提出自己的一些合理化建議，輸出一些利于其他同事更快、更高效提升的文檔。平時(shí)在自己工作遇到了一些好的工作方法或者對一些新技術(shù)的研究可以拿出來(lái)和大家分享。重構的團隊氛圍很重要，誰(shuí)都不希望呆在一個(gè)整天只管自己寫(xiě)代碼的團隊，那樣不管對于個(gè)人還是團隊都是不利的。

更多的思考與總結

思考指的是"意識流"，具體是我們在重構過(guò)程中的想法和理念，怎么想決定了我們怎么做。

作為重構，很多人拿到設計稿之后就是開(kāi)始埋頭切圖，用各種"奇技淫巧"實(shí)現各種需求，我們甚至不會(huì )在拿到設計稿之后仔細的做一下分析：如何做一個(gè)合理的架構、如何抽取合適的模塊、如何用更優(yōu)雅的方式和輕量的代碼實(shí)現頁(yè)面中的需求。

也許是目前大的環(huán)境下在催促著(zhù)我們不斷的向前跑：各種前端論壇大多數都在講某個(gè)技術(shù)，糾結于某一技術(shù)細節的實(shí)現，講爛掉的性能優(yōu)化，可很少有人去講該如何合理的選擇一個(gè)前端解決方案，如何解決重構中遇到的一系列不同場(chǎng)景中的問(wèn)題，以及最重要的我們自己的職業(yè)生涯思考：我們是準備寫(xiě)一輩子代碼么?

總結也叫"review"，是復習、回顧的意思，review對于重構來(lái)講，顯得尤為重要，定期的項目回顧能夠發(fā)現項目中存在的問(wèn)題從而規避以后再次出現。

當然項目回顧是一方面，更重要的是代碼層面的review，不定期的review可以促使我們在一些代碼的細節把控方面做的更優(yōu)雅，review除了可以提高代碼的品質(zhì)外，還能加強團隊的協(xié)作精神，以及提高團隊的整體技術(shù)能力。顯然這是一件非常有意義的事。團隊成員可以在一起review大家的代碼，發(fā)現每個(gè)人身上的不足和亮點(diǎn)，不然我們真的是只管埋頭自己代碼的苦逼代碼仔了。

從生活角度：

保持閱讀的熱情

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

網(wǎng)絡(luò )的信息是碎片化的，在我們沒(méi)有很好的梳理碎片能力的時(shí)候，一本實(shí)物書(shū)籍對于慰藉我們的心靈顯得尤為重要。有時(shí)生活、工作會(huì )讓人壓的喘不過(guò)氣來(lái)，這時(shí)，我們需要去尋找一種方式去釋放壓力，嗯，閱讀是一種很好的方式。

堅持一項運動(dòng)愛(ài)好

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

平時(shí)工作太忙時(shí)，切記一定要改變自己的工作方法，梳理好需求的優(yōu)先級，預留出一定的時(shí)間來(lái)放松自己，這個(gè)放松一定要讓自己的筋骨活動(dòng)開(kāi)，可以是去打打羽毛球，或者去跑步，再或者去健身。只有讓自己的身體變得強大起來(lái)，才有更多的能量值去砍怪升級。

保持樂(lè )觀(guān)的生活態(tài)度

淺談網(wǎng)頁(yè)設計如何才算一個(gè)好重構,PS教程,

善于捕捉生活中的一些細小的幸福顆粒，我們就會(huì )經(jīng)?；钤诳鞓?lè )中。上次在騰訊健康加油站聽(tīng)了一次關(guān)于生活的分享，其中提到"生活就像燉雞湯，有時(shí)需要加點(diǎn)調料和沾料"，的確，這些沾料就是發(fā)現生活中的細小幸福，做一個(gè)樂(lè )觀(guān)、豁達、開(kāi)朗的前端人士。調節好工作和生活的平衡，讓自己不要再活的那么累。