網(wǎng)站設(shè)計(jì)分析：模塊化——高效重構(gòu)
來源:網(wǎng)站推廣 2012-06-27
說起模塊化,也許我們首先想到的是編程中的模塊設(shè)計(jì),以功能塊為單位進(jìn)行程序設(shè)計(jì),最后通過模塊的選擇和組合構(gòu)成最終產(chǎn)品。把這種思想運(yùn)用到頁面構(gòu)建中,也已經(jīng)不是什么新鮮事。相信很大一部分頁面構(gòu)建工程師都經(jīng)歷了這樣幾個(gè)階段:第一階段是在一個(gè)css文件中把多個(gè)頁面按自己的習(xí)慣順序從上往下編寫樣式,基本不考慮有無公用樣式,以完成設(shè)計(jì)呈現(xiàn)為首要目的;第二階段是提取不同頁面中的通用樣式,如公用顏色、圖標(biāo)、按鈕等,實(shí)現(xiàn)一些基本元素的復(fù)用;第三階段是提取公用功能模塊,如導(dǎo)航、版權(quán)信息等,實(shí)現(xiàn)部分公用模塊的復(fù)用。
剛才描述的第三階段的方法已經(jīng)包含了模塊化思想,不少團(tuán)隊(duì)也都有一套成熟的模塊化開發(fā)方案。而我第一次聽說模塊化構(gòu)建方式,是三年前在一家韓國(guó)互聯(lián)網(wǎng)企業(yè)工作時(shí),某些產(chǎn)品中要求使用一種稱為UIO方式,模塊化通用的功能模塊或組件,以達(dá)到最大程度的模塊獨(dú)立性與復(fù)用性,當(dāng)時(shí)團(tuán)隊(duì)中很多同事和我一樣,認(rèn)為這種工作方式約束了編碼的自由性,過多的結(jié)構(gòu)約束反而降低了工作效率,加之產(chǎn)品之間也存在不統(tǒng)一,最后并沒有運(yùn)用到整個(gè)團(tuán)隊(duì)。
那么,如果我們運(yùn)用模塊化構(gòu)建的方式,優(yōu)勢(shì)在哪呢?也許在開始嘗試之處,需要一個(gè)適應(yīng)的過程,可能會(huì)使團(tuán)隊(duì)成員出現(xiàn)之前類似我當(dāng)時(shí)的想法,但當(dāng)大家都適應(yīng)并熟練這種工作方式之后,必定能極大地提供頁面構(gòu)建的效率。
假設(shè)有這樣一個(gè)場(chǎng)景,團(tuán)隊(duì)接到一個(gè)頁面非常多、工作量非常大的緊急項(xiàng)目,第一個(gè)團(tuán)隊(duì)這么做:組長(zhǎng)給每人分配幾個(gè)頁面,大家分頭做完各自的頁面,統(tǒng)一交付,對(duì)于不同頁面之間結(jié)構(gòu)呈現(xiàn)相似的模塊,細(xì)心點(diǎn)的團(tuán)隊(duì)可能會(huì)約定讓某個(gè)人寫好,再復(fù)制給每個(gè)需要用到的人,不太在意的,則讓每個(gè)人把各自頁面上的所有內(nèi)容都寫一遍,已完成任務(wù)為重。第二個(gè)團(tuán)隊(duì)事先根據(jù)所有的頁面劃分公用或重復(fù)模塊,再按模塊唯一性分配給每個(gè)人,有人負(fù)責(zé)搭建框架,有人制作模塊,最后合并框架和模塊,再按開發(fā)的工作計(jì)劃,順序交付頁面。對(duì)比的結(jié)果是,由于第二個(gè)團(tuán)隊(duì)是多人共同制作一個(gè)頁面,他們能以最快的速度產(chǎn)出開發(fā)需要的第一頁面,而且越到后期越能發(fā)現(xiàn)頁面中可重用的模塊越多,最后整個(gè)工作時(shí)間也許能比第一個(gè)團(tuán)隊(duì)縮減一半。模塊的復(fù)用不單是對(duì)本團(tuán)隊(duì)的工作時(shí)間有很大影響,同樣,對(duì)于下游的開發(fā)者來說,意味著他們也不需要為相同的模塊重套代碼或重新開發(fā)。此外,代碼的冗余量、以及產(chǎn)品升級(jí)時(shí)兩種工作方式的代碼擴(kuò)展性也體現(xiàn)出很大的差距。再者,如果你的團(tuán)隊(duì)將要運(yùn)用BIGPIPE或者LESS的開發(fā)方式,css的模塊化是最好的配合手段,或者說是必須的。
當(dāng)決定使用模塊化構(gòu)建的工作方式時(shí),遵循某些原則對(duì)模塊化的順利推進(jìn)有很大的幫助。
曾經(jīng)有一篇關(guān)于面向?qū)ο骳ss的文章中指出,面向?qū)ο蟮腸ss有兩個(gè)主要原則:separate the structure from the skin,separate the container from the content。第一個(gè)原則體現(xiàn)在模塊化思想可以理解為,模塊的設(shè)計(jì)制作和布局框架本身相分離,意味著你的模塊不能只為某個(gè)布局而編寫樣式,像微博這類存在換膚功能的產(chǎn)品更是如此,如果模塊在不同的皮膚樣式下需要另寫很多樣式甚至是修改結(jié)構(gòu)的時(shí)候,這個(gè)模塊的制作就是失敗的;第二個(gè)原則說的布局與內(nèi)容的分離,布局中某個(gè)位置不必只能放置某種內(nèi)容,反過來可以理解為模塊的靈活性和復(fù)用性。
其次遵守團(tuán)隊(duì)協(xié)作開發(fā)規(guī)范原則。這個(gè)規(guī)范可以包含文件目錄結(jié)構(gòu)、文件和樣式命名規(guī)范、圖片sprite規(guī)范、模塊劃分和調(diào)用規(guī)范等,例如我們對(duì)文件目錄深度的規(guī)定、公用樣式使用規(guī)定、模塊的樣式名唯一性規(guī)定、模塊文件名和樣式名必須一致的規(guī)定等等,確保所有人產(chǎn)出的模塊是統(tǒng)一、規(guī)范的。
按結(jié)構(gòu)呈現(xiàn)形式劃分模塊的原則。這一點(diǎn)和模塊化編程有較大的區(qū)別,通常在編程開發(fā)時(shí)是以模塊的功能來劃分的,而在頁面構(gòu)建上,有時(shí)候不同功能的模塊呈現(xiàn)的樣式是一樣的,為達(dá)到模塊樣式最大程度的復(fù)用,就不能按功能來劃分模塊,簡(jiǎn)單來說,哪些模塊外觀結(jié)構(gòu)一樣,我們就可以把它們歸為一個(gè)模塊,以微博右側(cè)模塊舉例,“可能感興趣的人”和“推薦應(yīng)用”模塊的外觀是一樣,都是左側(cè)一個(gè)圖片、右側(cè)文字和功能按鈕,那它們就是同一個(gè)樣式模塊。
模塊穩(wěn)固性原則。我經(jīng)常問新人一個(gè)問題,“你覺得怎樣體現(xiàn)你寫的代碼質(zhì)量高,比一般人好?”,大多數(shù)人會(huì)回答遵守語義化,減小不必要的嵌套,代碼盡量精簡(jiǎn)。語義化和代碼精簡(jiǎn)固然是評(píng)價(jià)質(zhì)量的一個(gè)重要方面,但是我認(rèn)為,代碼是否考慮到數(shù)據(jù)遍歷的合理性,是否考慮到dom節(jié)點(diǎn)的可操作性,是否考慮到因擴(kuò)展造成的抗破壞行,更能體現(xiàn)一個(gè)頁面構(gòu)建工程師的水平。
模塊自適應(yīng)性原則。指的是任何一個(gè)模塊,都盡可能實(shí)現(xiàn)寬度和高度的自適應(yīng),非特殊情況不要設(shè)置模塊的寬高,采取這種原則制作出的模塊具有很好的即插即用功能,是高效完成頁面拼合工作的重要前提。試想如果每個(gè)模塊都定義了寬度,那么在不同的布局上你就必須重新定義每個(gè)模塊的寬高或邊距等屬性來適應(yīng)當(dāng)前布局。
Margin-bottom原則。一般情況下,網(wǎng)頁的布局都是從上到下的流式布局(多欄結(jié)構(gòu)也可以看成各欄內(nèi)的流式布局),所以,我們可以為每個(gè)模塊統(tǒng)一預(yù)設(shè)margin-bottom,達(dá)到統(tǒng)一間距的目的,避免出現(xiàn)有些模塊設(shè)置上邊距、有些模塊設(shè)置下邊距的情況發(fā)生。(左右間距通常是由布局框架的樣式設(shè)置)
在制訂好團(tuán)隊(duì)的合作規(guī)范、遵守的原則后,并不代表你就可以完全按你的思路啟動(dòng)工作,團(tuán)隊(duì)配合是多向的,除了團(tuán)隊(duì)內(nèi)部,其他團(tuán)隊(duì)的支持也是不可或缺的,所以還需要以下兩個(gè)前置條件:
設(shè)計(jì)必須嚴(yán)格遵循柵格化。模塊是獨(dú)立的,但最終模塊還是嵌套在布局中,因?yàn)槲覀兊淖罱K產(chǎn)出物是完整的靜態(tài)頁面,如何將分離的模塊在最短的時(shí)間內(nèi),拼成一個(gè)符合設(shè)計(jì)師意圖和產(chǎn)品要求的頁面?柵格化是快捷的保障,在一個(gè)嚴(yán)格按照柵格化設(shè)計(jì)的布局框架中,工程師只需要設(shè)置好布局框架樣式和分欄的內(nèi)外間距,后續(xù)的工作只需要把該頁面所使用的模塊嵌套進(jìn)來,再調(diào)用對(duì)應(yīng)模塊的樣式,由于模塊的自適應(yīng)性,在所有模塊準(zhǔn)備充分的情況下,通常一個(gè)頁面的拼合只需要幾分鐘的時(shí)間。
產(chǎn)品、設(shè)計(jì)與交互的規(guī)范統(tǒng)一。通常在項(xiàng)目的某個(gè)階段,產(chǎn)品和設(shè)計(jì)在模塊上的統(tǒng)一是比較容易的,但如果在同一個(gè)項(xiàng)目的不同階段,尤其是在不同項(xiàng)目之間或不同產(chǎn)品之間要達(dá)到規(guī)范統(tǒng)一,就不是一件簡(jiǎn)單的事情。當(dāng)規(guī)范統(tǒng)一性出現(xiàn)問題時(shí),導(dǎo)致模塊化只停留在某個(gè)項(xiàng)目階段,每次添加新功能、增加新內(nèi)容都需要增加全新的模塊樣式,移植性和復(fù)用性大打折扣,無法發(fā)揮應(yīng)有的效果。當(dāng)然,產(chǎn)品是持續(xù)改變和創(chuàng)新的,我們不能要求一個(gè)產(chǎn)品永遠(yuǎn)按照某個(gè)規(guī)范來進(jìn)行設(shè)計(jì),但我們還是應(yīng)該共同努力尋求階段性共贏的解決方案。在微博,經(jīng)過各方長(zhǎng)時(shí)間的努力,特別是交互設(shè)計(jì)對(duì)產(chǎn)品功能組件的統(tǒng)一,構(gòu)建的WDL規(guī)范庫對(duì)我們的模塊化提供了很大幫助。
根據(jù)實(shí)際情況來看,要達(dá)到所有滿足的條件往往不是一帆風(fēng)順的,特別是第二個(gè)條件的達(dá)成。但是退一步來說,即使不能使模塊化在每個(gè)項(xiàng)目、每個(gè)產(chǎn)品中長(zhǎng)期穩(wěn)定的發(fā)揮它的最大能量,至少可以在每一次項(xiàng)目任務(wù)中獲得模塊化給團(tuán)隊(duì)帶來的效率提升。
如果經(jīng)過大家的努力,在所有條件都滿足,而且模塊化工作方式能在團(tuán)隊(duì)順利開展的情況下,我們依然可能會(huì)遇到各式各樣的問題,一個(gè)無法避免的問題就是,產(chǎn)品功能升級(jí)引起的模塊變化,這時(shí)候是修改原有的模塊還是另起一個(gè)新的模塊?二是模塊的劃分程度,有些時(shí)候從模塊的呈現(xiàn)和功能劃分都比較模糊,有些時(shí)候?qū)δ承﹥?nèi)容是否劃為公用樣式還是模塊、還是頁面獨(dú)有內(nèi)容都是見仁見智的;三是模塊的分類,采取何種方式分類便于查找?類似這些問題還有很多,在不同的項(xiàng)目和形勢(shì)下,需要具體問題具體分析,發(fā)揮團(tuán)隊(duì)的智慧,尋找最合理的應(yīng)對(duì)方案。
雖然在實(shí)施過程中可能會(huì)遇到各種問題和團(tuán)隊(duì)配合之間的阻力,但是當(dāng)你逐漸適應(yīng)這種模塊化團(tuán)隊(duì)構(gòu)建的工作方式時(shí),你會(huì)愛上它!而當(dāng)你的團(tuán)隊(duì)高效地完成每個(gè)工作的時(shí)候,人們也會(huì)愛上你的團(tuán)隊(duì)!
(微博UDC原創(chuàng)博文,歡迎轉(zhuǎn)載并注明出處,歡迎訂閱 )
文章編輯: 365webcall客服系統(tǒng)(www.365webcall.com)
我的評(píng)論
| 登錄賬號(hào)： | 密碼： | 快速注冊(cè) | 找回密碼 |  |
