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

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

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

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

重構

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

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

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

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

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

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

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

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

抽象

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

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

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

*PSD是怎么做輔助線(xiàn)的，PSD輔助線(xiàn)是幫助你理解設計意圖的最佳切入點(diǎn)，有些設計會(huì )認真的做柵格輔助線(xiàn)，這種PSD基本上一上手，HTML要怎么寫(xiě)，已經(jīng)很明確。

*實(shí)際內容外寬度<->內部常見(jiàn)布局分布（左右比例，布局模式是左中右，還是上下通欄）

*正文內容默認字體，h1-h6的字體

*全局a標簽默認樣式，字體，顏色，hover style等

*form元素的樣式風(fēng)格

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

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

*列表塊，列表頭為標題塊，列表為內容塊

*正文塊，正文標題為標題塊，正文為內容塊

*列表塊還可以細分，列表內容中每一個(gè)：內容標題為標題塊，描述內容為內容塊（摘要等）

這種模型，可以通過(guò)以下的特征來(lái)做出區分：

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

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

*用于什么用途、表現側重點(diǎn)是什么，比如博客列表頁(yè)，會(huì )提供內容摘要，便于用戶(hù)選擇閱讀，而門(mén)戶(hù)型網(wǎng)站內容列表，會(huì )僅僅顯示標題，因為信息量大，相冊的列表頁(yè)，總是會(huì )做得更加sexy，便于能吸引用戶(hù)的眼球等。

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

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

*現在有什么，還缺什么？

*合理程度，這是用戶(hù)體驗基礎，不合理的體驗，是不會(huì )被認可使用的

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

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

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

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

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

1、問(wèn)題一所對應的

*body字體，顏色，背景色，背景圖，a標簽的通用樣式

*頁(yè)面布局模式，常用寬度定義等

*h1-h6的樣式控制

*input、select樣式

2、問(wèn)題二所對應的

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

3、問(wèn)題三對應的

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

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

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

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

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

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="#">新聞標題1</a></li>08<li><a href="#">新聞標題2</a></li>09<li><a href="#">新聞標題3</a></li>10</ul>11</div>12</div>很顯然，對于一個(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)的結構性樣式特質(zhì)，而通過(guò)基于news_box再次寫(xiě)入到box_title和box_content的樣式，可以基于原來(lái)的樣式的基礎上，進(jìn)行重用，對于專(zhuān)屬news_box的樣式，我們可以在這里重寫(xiě)。

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

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

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

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

現狀

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

預料之外的，是人對于工作的激情和熱誠。這些是無(wú)法從言談中獲取得到的，而對于寫(xiě)代碼的人來(lái)說(shuō)，也許代碼最能說(shuō)明問(wèn)題。