說起模塊化，也許我們首先想到的是編程中的模塊設計，以功能塊為單位進行程序設計，最后通過模塊的選擇和組合構成最終產品。把這種思想運用到頁面構建中，也已經(jīng)不是什么新鮮事。相信很大一部分頁面構建工程師都經(jīng)歷了這樣幾個階段：第一階段是在一個css文件中把多個頁面按自己的習慣順序從上往下編寫樣式，基本不考慮有無公用樣式，以完成設計呈現(xiàn)為首要目的;第二階段是提取不同頁面中的通用樣式，如公用顏色、圖標、按鈕等，實現(xiàn)一些基本元素的復用;第三階段是提取公用功能模塊，如導航、版權信息等，實現(xiàn)部分公用模塊的復用。
剛才描述的第三階段的方法已經(jīng)包含了模塊化思想，不少團隊也都有一套成熟的模塊化開發(fā)方案。而我第一次聽說模塊化構建方式，是三年前在一家韓國互聯(lián)網(wǎng)企業(yè)工作時，某些產品中要求使用一種稱為UIO方式，模塊化通用的功能模塊或組件，以達到最大程度的模塊獨立性與復用性，當時團隊中很多同事和我一樣，認為這種工作方式約束了編碼的自由性，過多的結構約束反而降低了工作效率，加之產品之間也存在不統(tǒng)一，最后并沒有運用到整個團隊。
那么，如果我們運用模塊化構建的方式，優(yōu)勢在哪呢?也許在開始嘗試之處，需要一個適應的過程，可能會使團隊成員出現(xiàn)之前類似我當時的想法，但當大家都適應并熟練這種工作方式之后，必定能極大地提供頁面構建的效率。
假設有這樣一個場景，團隊接到一個頁面非常多、工作量非常大的緊急項目，第一個團隊這么做：組長給每人分配幾個頁面，大家分頭做完各自的頁面，統(tǒng)一交付，對于不同頁面之間結構呈現(xiàn)相似的模塊，細心點的團隊可能會約定讓某個人寫好，再復制給每個需要用到的人，不太在意的，則讓每個人把各自頁面上的所有內容都寫一遍，已完成任務為重。第二個團隊事先根據(jù)所有的頁面劃分公用或重復模塊，再按模塊唯一性分配給每個人，有人負責搭建框架，有人制作模塊，最后合并框架和模塊，再按開發(fā)的工作計劃，順序交付頁面。對比的結果是，由于第二個團隊是多人共同制作一個頁面，他們能以最快的速度產出開發(fā)需要的第一頁面，而且越到后期越能發(fā)現(xiàn)頁面中可重用的模塊越多，最后整個工作時間也許能比第一個團隊縮減一半。模塊的復用不單是對本團隊的工作時間有很大影響，同樣，對于下游的開發(fā)者來說，意味著他們也不需要為相同的模塊重套代碼或重新開發(fā)。此外，代碼的冗余量、以及產品升級時兩種工作方式的代碼擴展性也體現(xiàn)出很大的差距。再者，如果你的團隊將要運用BIGPIPE或者LESS的開發(fā)方式，css的模塊化是最好的配合手段，或者說是必須的。
當決定使用模塊化構建的工作方式時，遵循某些原則對模塊化的順利推進有很大的幫助。
曾經(jīng)有一篇關于面向對象css的文章中指出，面向對象的css有兩個主要原則：separate the structure from the skin，separate the container from the content。第一個原則體現(xiàn)在模塊化思想可以理解為，模塊的設計制作和布局框架本身相分離，意味著你的模塊不能只為某個布局而編寫樣式，像微博這類存在換膚功能的產品更是如此，如果模塊在不同的皮膚樣式下需要另寫很多樣式甚至是修改結構的時候，這個模塊的制作就是失敗的;第二個原則說的布局與內容的分離，布局中某個位置不必只能放置某種內容，反過來可以理解為模塊的靈活性和復用性。
其次遵守團隊協(xié)作開發(fā)規(guī)范原則。這個規(guī)范可以包含文件目錄結構、文件和樣式命名規(guī)范、圖片sprite規(guī)范、模塊劃分和調用規(guī)范等，例如我們對文件目錄深度的規(guī)定、公用樣式使用規(guī)定、模塊的樣式名唯一性規(guī)定、模塊文件名和樣式名必須一致的規(guī)定等等，確保所有人產出的模塊是統(tǒng)一、規(guī)范的。
按結構呈現(xiàn)形式劃分模塊的原則。這一點和模塊化編程有較大的區(qū)別，通常在編程開發(fā)時是以模塊的功能來劃分的，而在頁面構建上，有時候不同功能的模塊呈現(xiàn)的樣式是一樣的，為達到模塊樣式最大程度的復用，就不能按功能來劃分模塊，簡單來說，哪些模塊外觀結構一樣，我們就可以把它們歸為一個模塊，以微博右側模塊舉例，“可能感興趣的人”和“推薦應用”模塊的外觀是一樣，都是左側一個圖片、右側文字和功能按鈕，那它們就是同一個樣式模塊。
模塊穩(wěn)固性原則。我經(jīng)常問新人一個問題，“你覺得怎樣體現(xiàn)你寫的代碼質量高，比一般人好?”，大多數(shù)人會回答遵守語義化，減小不必要的嵌套，代碼盡量精簡。語義化和代碼精簡固然是評價質量的一個重要方面，但是我認為，代碼是否考慮到數(shù)據(jù)遍歷的合理性，是否考慮到dom節(jié)點的可操作性，是否考慮到因擴展造成的抗破壞行，更能體現(xiàn)一個頁面構建工程師的水平。
模塊自適應性原則。指的是任何一個模塊，都盡可能實現(xiàn)寬度和高度的自適應，非特殊情況不要設置模塊的寬高，采取這種原則制作出的模塊具有很好的即插即用功能，是高效完成頁面拼合工作的重要前提。試想如果每個模塊都定義了寬度，那么在不同的布局上你就必須重新定義每個模塊的寬高或邊距等屬性來適應當前布局。
Margin-bottom原則。一般情況下，網(wǎng)頁的布局都是從上到下的流式布局(多欄結構也可以看成各欄內的流式布局)，所以，我們可以為每個模塊統(tǒng)一預設margin-bottom，達到統(tǒng)一間距的目的，避免出現(xiàn)有些模塊設置上邊距、有些模塊設置下邊距的情況發(fā)生。(左右間距通常是由布局框架的樣式設置)
在制訂好團隊的合作規(guī)范、遵守的原則后，并不代表你就可以完全按你的思路啟動工作，團隊配合是多向的，除了團隊內部，其他團隊的支持也是不可或缺的，所以還需要以下兩個前置條件：
設計必須嚴格遵循柵格化。模塊是獨立的，但最終模塊還是嵌套在布局中，因為我們的最終產出物是完整的靜態(tài)頁面，如何將分離的模塊在最短的時間內，拼成一個符合設計師意圖和產品要求的頁面?柵格化是快捷的保障，在一個嚴格按照柵格化設計的布局框架中，工程師只需要設置好布局框架樣式和分欄的內外間距，后續(xù)的工作只需要把該頁面所使用的模塊嵌套進來，再調用對應模塊的樣式，由于模塊的自適應性，在所有模塊準備充分的情況下，通常一個頁面的拼合只需要幾分鐘的時間。
推薦閱讀
現(xiàn)在很多企業(yè)都意識到微博推廣的重要性了，相繼開設了企業(yè)微博，希望能在這個新工具的帶動下提高自己企業(yè)的營銷效果。于是馬上組織團隊，配備相關人員，讓微博上線，筆者瀏覽了很多企業(yè)的官方微博，除了一些憑借口碑>>>詳細閱讀
本文標題：<b>網(wǎng)站設計分析：模塊化——高效重構</b>
地址：http://www.xglongwei.com/a/22/20120620/69736.html
網(wǎng)友點評
精彩導讀
科技快報
品牌展示