前言

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

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

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

　　重構(gòu)

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

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

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

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

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

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

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

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

　　抽象

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

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

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

　　* PSD是怎么做輔助線的，PSD輔助線是幫助你理解設(shè)計(jì)意圖的最佳切入點(diǎn)，有些設(shè)計(jì)會(huì)認(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）模型，而這種模型，往往是以一個(gè)如下基礎(chǔ)模型為基礎(chǔ)的：

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

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

it知識(shí)庫(kù)：如何更高效的制作可通用的HTML頁(yè)面，轉(zhuǎn)載需保留來(lái)源！

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