最近被“模塊化”纏身，又是文章又是PPT的，被逼著想了很多相關的東西。整理下我這段時間對于“模塊化”的思考，大多都是我自己從事頁面重構這份工作的經驗和理解，在一定程度上存在局限性，也希望自己能溫故而知新。

“模塊化”只是我們對于過去一直使用的技術、方法的一個新潮的稱謂，就像“Ajax”。不過做為頁面重構發展的一種趨勢，越來越被大家重視，不自覺也滿口的“模塊化”，只是你真的理解什么是“模塊化”嗎？

什么是模塊化？
對“模塊化”的解釋，在 CNKI 中就有28種。可見“模塊化”思維使用的廣泛。最接近頁面重構中的“模塊化”，現有的解釋應該就是軟件開發中的解釋了。

先看一下百度詞條是怎么解釋“ ”的：

模 塊化是指解決一個復雜問題時自頂向下逐層把軟件系統劃分成若干模塊的過程。每個模塊完成一個特定的子功能，所有的模塊按某種方法組裝起來，成為一個整體， 完成整個系統所要求的功能。模塊具有以下幾種基本屬性：接口、功能、邏輯、狀態，功能、狀態與接口反映模塊的外部特性，邏輯反映它的內部特性。在軟件的體 系結構中，模塊是可組合、分解和更換的單元。

相關的書籍也蠻多的，有興趣的同學可以搜一下。需要強調一點，我們所借鑒的是一種思維的方式。

頁面制作為什么需要模塊化？
站點內容越來越多、代碼越來越臃腫，漸漸影響到了客戶端的體驗（主要是打開速度），影響到了維護的效率。有什么方法可以解決這些問題呢？

我 們很容易就想到：減少代碼冗余、提高代碼重用率、圖片壓縮等等，而這些要如何實現呢？模塊化思維可以解決，即可以有效減少代碼冗余、提高代碼重用率，更重 要是可以支持到多人維護，降低維護成本。CSS寫法較為靈活，容易產生代碼的耦合，使用模塊化也可以在一定程度上降低耦合度，對于BUG的定位也有幫助。 所以，我們更應該在站點前期就重視并使用“模塊化的思維”編寫站點。

我們之前經常提到的站點性能優化，有相當一部分也是“模塊化”的內容，比如提高代碼重用，提高開發效率等等，“模塊化”的優點還有很多，我大概列了一下：

提高代碼重用率 
提高開發效率、減少溝通成本 
降低耦合 
降低發布風險 
減少Bug定位時間和Fix成本 
提高頁面容錯 
更好的實現快速迭代 
更好的支持灰度發布 
其中最重要的一點，我認為是“提高代碼重用率”，這也是模塊化最重要的特點之一。

如何實現“模塊化”？
這里的主要問題是HTML與CSS的“模塊化”，我們可以看下換膚的實現方法：

同一類名，換文件（JS） 
同一文件，換類名（JS） 
由此可知HTML與CSS的接口實現：

CSS引入的三種方式 
類名 
為 了更好的實現這種接口，需要有相關的（交互、設計、頁面、開發）約定、規則、規范，比如：所有當前狀態都使用同一個類名“nonce”，所有變灰的表現都 使用原類名后加“_n”，Tab的實現方式等等。有了這些約定、規則、規范后，HTML代碼就很容易可以實現模板化，統一接口規范。

有兩個誤區需要先認清下：

模塊化后并不是就能被使用在任何位置（模塊化后的代碼段也是有適用的范圍限制，需要一個提供接口規則的環境） 
模塊化后并不是就不能再變更（模塊化后的代碼段可根據實際需要做修改） 
完 全獨立的模塊放在同一項目中，由于項目有自己的表現、交互統一性，所以各模塊間必定出現類似的部分，這些部分可以被提出來做為公共的定義，減少冗余，這時 就會出現耦合的問題，完全不耦合是不可能的，因此模塊化中很重要一點就是“適度的耦合”。有了公共定義，就得調整模塊樣式的實現方式了，而這種調整也會影 響到“接口”的實現方式。

網站想要提升用戶體驗有很多方法，人機交互內容就是其中之一。在前些年，由于一些技術的限制，導致這一內容的添加具有很大的困難，但現在隨著各項技術的興起，人機交互的設計已經不存在很大的障礙，很多網站的人機交互方面做的非常完善且的題，這可以為網站的營銷帶來極大的幫助。但值得注意的是，人機交互并不是一個只有正面作用的事情，事實上，如果處理不當，很可能會帶來一些負面的影響。我們認為，人機交互既然作為一項提升用戶體驗的設計，那么就一定要基于用戶體驗來設計。

一、人機交互在設計時應注意交互效果不是越多越好

很多人在進行一項操作時往往會簡單的選擇大量的堆砌，如SEO優化過程中對于關鍵詞的堆砌。在交互設計時，也往往會出現這一現象。一些交互人員可能由于主觀的認為，更加絢麗的鮮果就可以讓網站給用戶帶來良好的觀感，所以會將交互效果制作的十分復雜，或者說是效果的簡單堆砌。但其實對于用戶而言，這樣的設計并不一定能夠帶來良好的體驗，雖然可能大部分用戶對于密密麻麻的大段文字不感興趣，但這并不意味著他們能夠接受過多或是過于炫技的美術效果。

交互設計的初衷是讓用戶獲得更好的觀感，也可以讓頁面顯得更加生動，但如果美術效果過多，就會在很大程度上影響用戶的視線，甚至會造成眼花繚亂的效果，同時也會讓用戶無法集中注意力于網站的中心內容上，如果交互設計做成這樣，那么很難說這是一個成功的設計。

二、頁面交互應與營銷相配合

提升用戶體驗的直接目的其實就是為了提高網站的轉化率，所以在交互的設計時也應該與營銷相配合以達到提高轉化率的目的。如果能夠將網站上的重點內容做好交互，無疑就可以讓用戶更加關注這些你想讓他們看到的東西。比如在線客服等功能，就可以通過一些精巧的設計引起用戶的關注，來引導他們點擊。

另外，如產品展示環節，也可以通過精美的交互設計來吸引用戶的注意力，讓他們對你的產品產生濃厚的興趣，這也可以給用戶留下非常深刻的印象。總而言之，單純的交互設計的作用并不明顯，一個優秀的交互設計應該達到的效果是有效的提高網站的轉化率。只有讓用戶更加關注網站中的核心內容，才能夠顯示出交互設計的意義。

三、保證加載速度不會太慢

當然，人機交互設計的再好，也難以避免的一個缺陷就是會使網站的加載速度變慢。因為基于B/S技術的網站，是必須要通過預加載到客戶端計算機才可以運行。所以網站上的每一個元素都要通過客戶端瀏覽器的解釋之后才能夠顯示。

所以我們可以得出，越復雜的交互設計，無疑就會給網站的加載速度帶來越多的負擔，如果人機交互效果設計的過于復雜，在這些內容呈獻給用戶之前，首先讓用戶感到的是網站加載時的遲緩，這是網站的一個非常嚴重的減分項。所以，在設計人機交互時，應該盡量合并JavaScript代碼和CSS樣式代碼等以避免資源的堵塞。而在圖片方面，也要在保證清晰度的情況下盡量的縮減大小，這樣才能夠盡可能的讓網站的加載速度不會受到太大的影響。

人機交互出現的目的就是為了讓用戶體驗更進一步，所以在進行交互的設計時，也一定要以用戶體驗出發，只有這樣，才能讓交互效果真正的給網站帶來正面的能量。

網站關鍵詞：網站建設  網站設計  網站制作  上海網站建設  上海網站設計  上海網站制作  上海網絡公司  網站建設上海  上海做網站  上海建設網站  上海做網站公司  上海建網站公司  上海高端網站建設  上海手機網站建設  怎么建設網站  如何建設網站  營銷網站建設  品牌網站建設  網站建設方案  響應式網站建設  外貿網站建設  公司網站建設  建設網站  網站建設服務  高端網站建設  網站優化服務  上海網站公司  企業網站設計  官網制作  官網建設  官網設計  網站建設公司  網站設計公司  網站制作公司