前端模塊化設計思路

模塊化就是爲了減小循環依賴，減小耦合，提升設計的效率。爲了作到這一點，咱們須要有一個設計規則，全部的模塊都在這個規則下進 行設計。良好的設計規則，會把耦合密集的設計參數進行歸類做爲一個模塊，並以此劃分工做任務。而模塊之間彼此經過一個固定的接口（所謂的可見參數）進行交互，除此以外的內部實現（所謂的隱參數）則由模塊的開發團隊進行自由發揮。

程序模塊化的目的：

1. 減 少循環依賴
2. 減小耦合
3. 提升設計效率

程序模塊化的實施：

1. 把耦合密集 的歸爲一個模塊
2. 模塊間經過固定的接×××互
3. 模塊內部實現自由發揮

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>

.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>

.footer {} .footer ul {} .footer p {}

代碼2.繼承模塊，提取衆多模塊中公共部分，具體模塊經過優先級進行處理。繼承模塊方面整站某些模塊的批量修改處理，也提升複用性，下降代碼重複。

.mod {} .mod .title {} .mod .con {} .mod .more {}  .note {} .note .title {} .note .con {} .note .more {}

<div class="mod note"> <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/%e5%89%8d%e7%ab%af%e6%a8%a1%e5%9d%97%e5%8c%96%e8%ae%be%e8%ae%a1%e6%80%9d%e8%b7%af/

【 關注百度技術沙龍】