前端模組化設計思路

模組化概念

模組化就是為了減少迴圈依賴，減少耦合，提高設計的效率。 為了做到這一點，我們需要有一個設計規則，所有的模組都在這個規則下進行設計。 良好的設計規則，會把耦合密集的設計參數進行歸類作為一個模組，並以此劃分工作任務。 而模組之間彼此通過一個固定的介面（所謂的可見參數）進行交互，除此之外的內部實現（所謂的隱參數）則由模組的HTTP://www.aliyun.com/zixun/aggregation/7434.html"> 開發團隊進行自由發揮。

程式模組化的目的：

減 少迴圈依賴減少耦合提高設計效率

程式模組化的實施：

把耦合密集 的歸為一個模組模組間通過固定的介面交互模組內部實現自由發揮HTML CSS Images的模組化設計

頁面模組化的實施，這裡指的是針對除去JavaScript部分的頁面代碼進行模組化實施。 通過html css 圖片進行模組化。
頁面模組化的實施思路是高度耦合的頁面片段封裝，模組佈局作為公開介面，高度耦合的頁面進行封裝，使用獨立的css檔，高度耦合的圖片進行封裝，給某類相關性強的圖片建立資料夾。
頁面模組化的目的是，實現多人協同開發頁面，提高頁面研發速度和降低維護難度。 研發速度的提升體現在多人協同並行開發， 維護難度體現在減少版本的混亂，根據模組區分版本降低版本間代碼衝突和檔錯誤覆蓋。

拆分頁面模組，從小到大的分解
1. 拆分頁面模組
一個頁面有很多個小單元模組組成，他來自有原始需求文檔，比如
logo，導航，內容1，內容2，內容3，內容4，尾部導 航，版權資訊等等。
根據他們就可以拆分出基本的模組。
2. 拆分網站模組
將整個網站安排頻道或者分類進行拆分，比如
首頁，內容頁，文字清單頁，圖片清單頁，頻道1頁面，頻道2頁面，分類1頁面，分類2頁面，後臺管理頁面，等等
3. 每個網站作為一個模組。 比如
商城站，支付站，論壇，三個站獨立為三個大模組。

模組化實現
1. 高度耦合提取為一個模組，將模組代碼作用域進行控制
代碼1.非繼承模組，通過後代選擇符方式控制作用域

<div class="mod"><h3 class="title">title</h3><div class="con">        con    </div>    <a  class="more">more</a></div>.footer {}.footer ul {}.footer p {}.mod {}.mod .title {}.mod .con {}.mod .more {}<div class="footer"><ul><li><a href="" title="">關於</a></li><li><a href="" title="">合作</a></li><li><a href="" title="">招聘</a></li></ul> Copyright © 2009 某公司 版權所有</div>

代碼2.繼承模組，提取眾多模組中公共部分，具體模組通過優先順序進行處理。 繼承模組方面整站某些模組的批量修改處理，也提高複用性，降低代碼重複。

.mod {}.mod .title {}.mod .con {}.mod .more {}.note {}.note .title {}.note .con {}.note .more {}<div class="mod note"&g t;<h3 class="title">title</h3><div class="con">        con    </div>    <a class="more">more </a></div>

2. 頁面模組
頁面模組代碼作用域的控制通過css檔來控制。 某類具有高度耦合的頁面使用自身的css檔。
3. 模組間的公開介面
上面是模組的封裝，公開的介面在頁面中表現為什麼？
首先是reset，base，可繼承模組，這些代碼是開放介面，必須根據這些代碼進行頁面代碼開發，也就是你的頁面代碼必須在以上代碼基礎上開發。
其次是css檔，css檔案名稱和他作用於那些頁面。
再次是佈局、模組class，id命名，模組在頁面的哪個位置。 在CSS中的表現就是定位，佈局，和部分盒模型。 float、position、 width、height等等。 佈局通常使用css作為介面實現，如果佈局具有高度的邏輯性，完全可以通過html和css組合進行，比如960 Grid System，或者採用YUI grid.css。 模組class和id的命名用於區分模組，不能在一個頁面的所有css中出現不同模組同用一個class和id名。

規劃整站模組

上文提到的基本的原理，真正實施起來還是存在很多問題，模組細微性問題，公共模組與普通模組的區分，繼承模組是否值得繼承等等，頁面模組如何劃分。
首先，瞭解你的專案，通過畫網站樹狀圖瞭解你網站的總體結構和頁面模組
其次，理清結構邏輯和視覺邏輯，結構邏輯就是看你的頁面由那些模組組成，視覺邏輯瞭解可繼承模組，佈局邏輯（網格佈局或者非網格佈局）

附圖：

來源：HTTP://www.baiduux.com/blog/2010/02/24/前端模組化設計思路/