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