前言

　　高效，是一個很難定出標(biāo)準(zhǔn)的事情，在今天這個浮躁的HTML行業(yè)里，很難被客觀的定義。多數(shù)時候，只要制作人員能在項(xiàng)目規(guī)定的時間內(nèi)完成制作需求，并交付程序開發(fā)相關(guān)的程序應(yīng)用，這個HTML前端工程師就算是一個合格的工作人員。而所謂高效，通過此環(huán)節(jié)所能看到的客觀指標(biāo)就是，提前多少時間量完成任務(wù)。

　　然而，事實(shí)又是哪般呢？任務(wù)的細(xì)節(jié)開始變化了，客戶要求增加，設(shè)計(jì)不斷地挑戰(zhàn)人類（其實(shí)是前端工程師）的思維極限，整件事情就完全被打亂了。工程師會開始埋怨，客戶怎么那么多要求，設(shè)計(jì)怎么不按規(guī)范做沒得選擇，客戶確認(rèn)了。加班開始了，不斷的增加Hack，不斷的對既有樣式進(jìn)行大量的覆蓋、增加權(quán)重控制。任務(wù)恍恍惚惚的貌似進(jìn)行下去了。

　　現(xiàn)實(shí)是殘酷，新的考驗(yàn)又開始。樣式細(xì)節(jié)和設(shè)計(jì)偏離很大，以前做的頁面完全錯位了，腳本錯誤不斷，亂碼，為什么頁面竟然有個空白的行（BOM頭）。這些都不是最挑戰(zhàn)人類可承受能力的極限的，最最刺激的就是什么？修復(fù)這個問題你竟然要那么長的時間？這不是一個顯然易見的問題嗎？你們是不是在用CSS？

　　重構(gòu)

　　最近公司的一個項(xiàng)目，其實(shí)已經(jīng)完成了任務(wù)的70%吧，這個70%是表面上做出來的頁面的完成度。但是我發(fā)現(xiàn)在某一天以后，這個任務(wù)居然進(jìn)度極端異常的緩慢。我感到詫異，因?yàn)橐呀?jīng)允許不套入Wordpress制作皮膚，而直接制作一個只包含豐富JS特效的靜態(tài)站點(diǎn)。

　　進(jìn)一步深入了解，發(fā)現(xiàn)兩個前端工程師，竟然在SVN上分了兩個目錄在進(jìn)行這個項(xiàng)目，而且被告知最正式的版本，是測試服務(wù)器上的。

　　然后我嘗試了解，他們是如何進(jìn)行分工合作的，雖然兩人沒有明確彼此進(jìn)行指責(zé)，但是，彼此推諉有時候是比指責(zé)更嚴(yán)厲的態(tài)度。從他們對彼此的推諉，我發(fā)現(xiàn)，他們將各自擅長的領(lǐng)域（一個擅長制作頁面，一個擅長整理JS）作為他們彼此對立的一個矛盾點(diǎn)。具體的表現(xiàn)如，頁面的CSS制作出來以后，JS為了寫特效，又把頁面推翻了，制作自己引入了一些js，可是又沒有和大家做一個介紹和說明。我意識到，他們之間缺乏必要的溝通，也缺乏基本的信任，也許對于中國人（看國足和乒乓球的差異）對于團(tuán)隊(duì)之間的信任，總是做的十分保守、有限。

　　我獲取了代碼，審視了他們的工作成果，我才真正的發(fā)現(xiàn)，問題已經(jīng)遠(yuǎn)不止于缺乏溝通和信任的問題了，而是浮躁。大家都急于將這個任務(wù)盡快的完成，于是采用的做法就是CSS和HTML，又一個頁面做一個頁面的樣式，JS有一個特效做一個特效。正如前言所言，誠然，這就是一個很顯然的高效做法。可是這里帶來了很多問題：

　　1、一個頁面一套CSS（一套相應(yīng)的id和class命名），這種做法將來的維護(hù)成本會很高，因?yàn)樗雎粤苏麄€網(wǎng)站可被重用，代表這個網(wǎng)站的通用性特征，如果要對某個特征進(jìn)行修改，可能需要對同一個位置的樣式進(jìn)行多次重復(fù)的修改。

　　2、問題1往往會引伸出該問題，就是，在檢查制作結(jié)果的時候，往往那些在一個頁面制作達(dá)到要求的地方，為什么在第二個相似的設(shè)計(jì)結(jié)構(gòu)的頁面會有差異？而且甚至存在這種差異第三種、第四種版本。這個問題，如果站在設(shè)計(jì)的角度，會是一個十分嚴(yán)重的問題。

　　3、每個頁面即興的寫一堆腳本，東一塊西一塊的，也許今天我為了項(xiàng)目的進(jìn)度，可以認(rèn)為這個特效是完成了的。但是他日真的套入到程序中，可能會讓程序員碰個一鼻子灰，因?yàn)槌绦騿T也許有耐心看你的代碼，但我多數(shù)時候愿意認(rèn)為，他們不懂，就算他們懂，也沒有義務(wù)去幫你做些什么。結(jié)果往往是，比如A君負(fù)責(zé)寫JS，為此工作了3天，完成了，可是在程序開發(fā)的時候，發(fā)現(xiàn)不對勁，又要求A君來進(jìn)行配合工作，開發(fā)進(jìn)行了5天，A君陪了5天。為什么A君要在之后的5天內(nèi)還要繼續(xù)參與呢？那么就是他前面的3天工作沒有完成了。當(dāng)然，現(xiàn)實(shí)中，我們多數(shù)不會這樣去看待這個問題，而是盡量讓A君還是在后面的5天去參與進(jìn)去，也不會有人去追究他前面3天究竟都做了哪些不合理的事情。而后由于后面5天人員參與數(shù)量增加，我們會希望壓縮項(xiàng)目的開發(fā)時間云云。

　　重構(gòu)，即時重構(gòu)，就以現(xiàn)在既有的這些代碼，其實(shí)我已經(jīng)很早就放下心中的目標(biāo)：一個完美代碼構(gòu)成的網(wǎng)站，我需要他們每個人都明白，怎么樣能讓自己更加高效準(zhǔn)確的工作。

　　抽象

　　對于前端制作，提抽象，可能有些過分，然而我這么多年來的經(jīng)驗(yàn)告訴自己，只有剝離了表面現(xiàn)象，才能洞察需求的實(shí)際。

　　我就不談那些有的沒有的空把式了，對于頁面制作和特效定制，一個最行之有效的抽象方式就是：不要急于動手實(shí)現(xiàn)，而是多看設(shè)計(jì)圖，找出：

　　1、排除設(shè)計(jì)元素差異（顏色、icon），找出頁面結(jié)構(gòu)之間的共同特性，其中需要著重注意以下幾個特點(diǎn)：

　　* PSD是怎么做輔助線的，PSD輔助線是幫助你理解設(shè)計(jì)意圖的最佳切入點(diǎn)，有些設(shè)計(jì)會認(rèn)真的做柵格輔助線，這種PSD基本上一上手，HTML要怎么寫，已經(jīng)很明確。
　　*實(shí)際內(nèi)容外寬度 <-> 內(nèi)部常見布局分布（左右比例，布局模式是左中右，還是上下通欄）
　　*正文內(nèi)容默認(rèn)字體，h1 - h6的字體
　　*全局a標(biāo)簽?zāi)J(rèn)樣式，字體，顏色，hover style等
　　*form元素的樣式風(fēng)格

　　2、排除設(shè)計(jì)細(xì)節(jié)的差異（文字大小、margin、padding、height、line-height等），找出可被重用的模塊（Box）模型，而這種模型，往往是以一個如下基礎(chǔ)模型為基礎(chǔ)的：

　　這種模型從功能上區(qū)分，往往有以下幾種：

　　*列表塊，列表頭為標(biāo)題塊，列表為內(nèi)容塊
　　*正文塊，正文標(biāo)題為標(biāo)題塊，正文為內(nèi)容塊
　　*列表塊還可以細(xì)分，列表內(nèi)容中每一個：內(nèi)容標(biāo)題為標(biāo)題塊，描述內(nèi)容為內(nèi)容塊（摘要等）

it知識庫：如何更高效的制作可通用的HTML頁面，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。