前端過程中快速制作可通用的HTML頁面發(fā)布者：本站     時(shí)間：2020-05-16 08:05:40

速高效的制作通用的html'頁面。什么才是高效，是一個(gè)很難定出標(biāo)準(zhǔn)的事情，在今天這個(gè)浮躁的HTML行業(yè)里，很難被客觀的定義。多數(shù)時(shí)候，只要制作人員能在項(xiàng)目規(guī)定的時(shí)間內(nèi)完成制作需求，并交付程序開發(fā)相關(guān)的程序應(yīng)用，這個(gè)HTML前端工程師就算是一個(gè)合格的工作人員。而所謂高效，通過此環(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ì)偏離很大，以前做的頁面完全錯(cuò)位了，腳本錯(cuò)誤不斷，亂碼，為什么頁面竟然有個(gè)空白的行（BOM頭）。這些都不是最挑戰(zhàn)人類可承受能力的極限的，最最刺激的就是什么？修復(fù)這個(gè)問題你竟然要那么長(zhǎng)的時(shí)間？這不是一個(gè)顯然易見的問題嗎？你們是不是在用CSS？

重構(gòu)

最近公司的一個(gè)項(xiàng)目，其實(shí)已經(jīng)完成了任務(wù)的70%吧，這個(gè)70%是表面上做出來的頁面的完成度。但是我發(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)制作頁面，一個(gè)擅長(zhǎng)整理JS）作為他們彼此對(duì)立的一個(gè)矛盾點(diǎn)。具體的表現(xiàn)如，頁面的CSS制作出來以后，JS為了寫特效，又把頁面推翻了，制作自己引入了一些js，可是又沒有和大家做一個(gè)介紹和說明。我意識(shí)到，他們之間缺乏必要的溝通，也缺乏基本的信任，也許對(duì)于中國人（看國足和乒乓球的差異）對(duì)于團(tuán)隊(duì)之間的信任，總是做的十分保守、有限。

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

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

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

3、每個(gè)頁面即興的寫一堆腳本，東一塊西一塊的，也許今天我為了項(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君來進(jìn)行配合工作，開發(fā)進(jìn)行了5天，A君陪了5天。為什么A君要在之后的5天內(nèi)還要繼續(xù)參與呢？那么就是他前面的3天工作沒有完成了。當(dāng)然，現(xiàn)實(shí)中，我們多數(shù)不會(huì)這樣去看待這個(gè)問題，而是盡量讓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ì)于前端制作，提抽象，可能有些過分，然而我這么多年來的經(jīng)驗(yàn)告訴自己，只有剝離了表面現(xiàn)象，才能洞察需求的實(shí)際。

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

1、排除設(shè)計(jì)元素差異（顏色、icon），找出頁面結(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)容塊（摘要等）

這種模型，可以通過以下的特征來做出區(qū)分：

*所在的頁面，比如用于首頁每個(gè)欄目的最新內(nèi)容的列表，還是某個(gè)欄目首頁的內(nèi)容列表等

*出現(xiàn)在頁面的位置，比如Ajax彈出層，DropDown Menu，側(cè)邊欄，正文欄等

*用于什么用途、表現(xiàn)側(cè)重點(diǎn)是什么，比如博客列表頁，會(huì)提供內(nèi)容摘要，便于用戶選擇閱讀，而門戶型網(wǎng)站內(nèi)容列表，會(huì)僅僅顯示標(biāo)題，因?yàn)樾畔⒘看?，相?cè)的列表頁，總是會(huì)做得更加sexy，便于能吸引用戶的眼球等。

*和頁面其他部位的關(guān)聯(lián)，這個(gè)需要因應(yīng)各個(gè)的設(shè)計(jì)的不同，就不具體舉例了。

3、排除實(shí)現(xiàn)的復(fù)雜度，找出特效展現(xiàn)的共同特性，并盡可能的想象其實(shí)現(xiàn)的一些細(xì)節(jié)。這部分工作是尤其重要的，因?yàn)樗麤Q定了一個(gè)頁面的工作重點(diǎn)所在，通過對(duì)這部分重點(diǎn)的細(xì)節(jié)想象，你會(huì)發(fā)現(xiàn)如下問題：

*現(xiàn)在有什么，還缺什么？

*合理程度，這是用戶體驗(yàn)基礎(chǔ)，不合理的體驗(yàn)，是不會(huì)被認(rèn)可使用的

*用戶如何操作的，頁面的元素如何變化，既能做到驚嘆，而又在用戶的可理解可被認(rèn)知范圍內(nèi)，而后最大程度的緩沖系統(tǒng)與用戶之間的驚詫點(diǎn)

*合理性，合理性，合理性

當(dāng)你確信，在找到上述3個(gè)問題的答案后，并且做出足夠的思考與預(yù)估后，我們可以開始動(dòng)手制作了。

什么優(yōu)先？什么其次？

優(yōu)先要做的，永遠(yuǎn)都是通用性、共用性方面的東西，他會(huì)伴隨在你整個(gè)制作過程中。當(dāng)然，大多數(shù)公司，這種通用性存在共識(shí)，基礎(chǔ)的CSS、基礎(chǔ)的JS Framework。然而，對(duì)于項(xiàng)目和任務(wù)本身來說，你需要做更多這個(gè)項(xiàng)目自身的共用性的工作。其實(shí)說白了，就是上面的三個(gè)問題。

1、問題一所對(duì)應(yīng)的

*body字體，顏色，背景色，背景圖，a標(biāo)簽的通用樣式

*頁面布局模式，常用寬度定義等

*h1-h6的樣式控制

*input、select樣式

2、問題二所對(duì)應(yīng)的

*制作多個(gè)和設(shè)計(jì)元素、設(shè)計(jì)細(xì)節(jié)無關(guān)的通用性的box模型（甚至不包括寬度的細(xì)節(jié)），僅僅描述一個(gè)模型的骨架性特征。

3、問題三對(duì)應(yīng)的

*為需要實(shí)現(xiàn)特效的部位做足夠的兼容性準(zhǔn)備。

問題1，往往不存在太多的問題，可是大家看看自己寫過的CSS，有多少句在頁面里定義了字體、字體大小、顏色的，這些部分的代碼也都是可以被再次抽象，而再減少對(duì)設(shè)計(jì)細(xì)節(jié)進(jìn)行描述的。

問題2，是從根本上提高CSS編碼質(zhì)量的一條解決之道。初步了解CSS特性的人，往往會(huì)患上重度描述的癥狀，他們寄望于通過編寫大量、甚至是成癮性的定義樣式特性，為求實(shí)現(xiàn)設(shè)計(jì)。確實(shí)，這種Hash結(jié)構(gòu)讓我們了解到了描述的快感。然而，正式因?yàn)檫@種重度描述，令CSS文件的修改，成為一個(gè)令人頭疼的所在，密密麻麻的樣式聲明，不斷重復(fù)又重復(fù)的特性描述，整個(gè)樣式被定義的面目全非。

局部特征描述法，是一個(gè)很好的治療的模式，通過對(duì)僅有的若干個(gè)特征進(jìn)行描述，而后進(jìn)行組合使用，能讓我們的HTML和CSS獲得解放（代碼量），同時(shí)帶來更多的靈活性（我不再需要對(duì)權(quán)重過度緊張等）。

比如，一個(gè)box，相關(guān)的box_title，box_content，僅僅描述其結(jié)構(gòu)（如內(nèi)部關(guān)聯(lián)程度，如padding，margin等），寬度使用相關(guān)的樣式，如具體的w500（width:500px），或其使用用途的特征描述，如news_box（定義了具體的某幾個(gè)樣式）。于是我們會(huì)得到這樣的HTML結(jié)構(gòu)：

01<div class="box news_box w500fl">02<div class="box_title">03<a href="#">新聞Box</a>04</div>05<div class="box_content">06<ul class="news_list">07<li><a href="#">新聞標(biāo)題1</a></li>08<li><a href="#">新聞標(biāo)題2</a></li>09<li><a href="#">新聞標(biāo)題3</a></li>10</ul>11</div>12</div>很顯然，對(duì)于一個(gè)news_box，我們會(huì)有很具體的要求：

1.news_box.box_title{font-size:16px;font-weight:bold;}2.news_box.box_content{padding:5px;}3.news_list li{height:20px;line-height:20px;}4.news_list a{padding-left:10px;background:url(....)no-repeat top left;}這種定義方式，不會(huì)破壞box、box_title、box_content相關(guān)的結(jié)構(gòu)性樣式特質(zhì)，而通過基于news_box再次寫入到box_title和box_content的樣式，可以基于原來的樣式的基礎(chǔ)上，進(jìn)行重用，對(duì)于專屬news_box的樣式，我們可以在這里重寫。

而后，也許我們還有pic_box，還有blog_box，還有很多很多，我們都不需要再對(duì)box的結(jié)構(gòu)進(jìn)行調(diào)整，而僅僅只要對(duì)每個(gè)box的本身的特征進(jìn)行局部描述。

這已經(jīng)有點(diǎn)類型面向?qū)ο箝_發(fā)的方式，但是我不同意把一個(gè)標(biāo)簽的多個(gè)class認(rèn)為是一次多重繼承，他頂多只能算是一種混入（Mix in），比如Scala中的trait。

局部描述還有更多實(shí)際使用中的案例，并且，他的技巧和好處遠(yuǎn)不止于此，這里就不再累贅的進(jìn)行描述了。

問題3，其實(shí)要強(qiáng)調(diào)的重點(diǎn)，是為開發(fā)JS特效預(yù)留更加寬松和自由的切入接口。JS特效的問題，會(huì)在另外的一篇日志去講，這里就不再做過多的描述了。

現(xiàn)狀

重構(gòu)并不是要搞他個(gè)刀光劍影、暗無天日，而在于重新樹立一些正確的觀念苗頭。我并不預(yù)想著，事實(shí)上你也不可能期待，這樣一次重構(gòu)，就能把每件事情做的真的和想象中那樣完美無缺。

預(yù)料之外的，是人對(duì)于工作的激情和熱誠。這些是無法從言談中獲取得到的，而對(duì)于寫代碼的人來說，也許代碼最能說明問題。