|
如何進(jìn)行規(guī)范的代碼設(shè)計(jì)
相信很少有人會在網(wǎng)頁設(shè)計(jì)的過程中把代碼設(shè)計(jì)單獨(dú)拿出來說，雖然在軟件設(shè)計(jì)中代碼設(shè)計(jì)很受重視，但在web設(shè)計(jì)里，大家更關(guān)心網(wǎng)站結(jié)構(gòu)設(shè)計(jì)、數(shù)據(jù)庫設(shè)計(jì)、頁面視覺設(shè)計(jì)，很少有人會真正關(guān)心前端代碼設(shè)計(jì)。這恰恰是因?yàn)榇a設(shè)計(jì)的優(yōu)劣不是一般用戶所能感覺出來的，設(shè)計(jì)得差的前端代碼，在用戶使用過程中也許毫無影響，卻能將前端工程師和web程序員弄得一塌糊涂。
DIV的規(guī)范及科學(xué)統(tǒng)籌
說到前端代碼，不能不說DIV架構(gòu)。目前主流的網(wǎng)站頁面架構(gòu)方式已經(jīng)轉(zhuǎn)向DIV+CSS的結(jié)構(gòu)層和表現(xiàn)層脫離的方式，這個過程也叫做網(wǎng)站的標(biāo)準(zhǔn)化。這與以往的利用表格定位的方式完全不同，更加強(qiáng)調(diào)了界面元素的模塊化定位，由DIV確定模塊的界限，再由CSS代碼表現(xiàn)該DIV元素的表現(xiàn)形式。
在DIV的布局方式中，我們更多強(qiáng)調(diào)的是規(guī)范，因?yàn)镈IV的ID名稱和CLASS類名稱是能夠由代碼編寫者自行定義的，所以有明確規(guī)范的DIV設(shè)計(jì)是前端代碼設(shè)計(jì)的前提。如今的web工作往往牽涉到一個團(tuán)隊(duì)中的多人進(jìn)行協(xié)作開發(fā)，代碼被閱讀和被修改的次數(shù)遠(yuǎn)遠(yuǎn)多于它被編寫的次數(shù)，而保持代碼易讀、易修改的關(guān)鍵，就在于在代碼編寫前期確定能被認(rèn)同的代碼規(guī)范。
首先我們先了解DIV架構(gòu)中的命名規(guī)則，DIV的許多規(guī)范要點(diǎn)體現(xiàn)在ID或者CLASS的命名中，絕大多數(shù)設(shè)計(jì)師習(xí)慣使用屬性命名方式：即顯示綠色14號字的類就命名為green14，藍(lán)色背景區(qū)域的類就命名為blueBg。這樣命名也未嘗不可，但是這樣的命名方式對于合作的其他職能部門的同事來說，是毫無意義的。PHP程序員不會關(guān)心這個類的字是什么顏色，他只管這塊區(qū)域應(yīng)該和哪個程序模塊接口；模板編輯也不會關(guān)心背景究竟該是什么顏色，他只管哪個區(qū)域是用來顯示頭圖、哪個區(qū)域顯示全站導(dǎo)航和全站通用底部。所以我們比較倡導(dǎo)表意命名方式和接口命名方式，比如pageHead和loginArea這樣的命名，pageHead明確表示了這塊區(qū)域的意思，而loginArea指代了這是個登錄區(qū)域的接口。不管這兩個類里的字號顏色等將來因?yàn)楦陌姘l(fā)生了什么改變，它們起到的作用和所定義的固定區(qū)域是不會改變的。
其次我們了解一下DIV中類的復(fù)用，同一個頁面中，DIV的ID是唯一的，表示該頁面上獨(dú)一無二的一種特定表現(xiàn)；而CLASS（類）是可以無限重復(fù)使用的，表現(xiàn)該頁面上有某些屬性相同的若干區(qū)域，所以DIV的復(fù)用僅僅指的是類。牽涉到復(fù)用的時候，類的命名應(yīng)該盡量多地表意化，有必要的情況下使用屬性命名也能起到很好的效果。比如頁面中有很多個不同的內(nèi)容列表區(qū)塊，但是寬度都是760px，那么使用contList760這樣的類名稱進(jìn)行復(fù)用就比contListA、contListB、contListC……這樣單獨(dú)且表意不明顯的命名要好得多。如圖1所示的網(wǎng)站alistapart.com，由圖2我們可以看出，它的代碼設(shè)計(jì)非常規(guī)整。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 風(fēng)格是網(wǎng)站的外衣 下 下一頁 代碼設(shè)計(jì) 中
|
第 1 頁 
第 9 頁 代碼設(shè)計(jì) 上
