前端子產品化設計思路

子產品化就是為了減少循環依賴，減少耦合，提高設計的效率。為了做到這一點，我們需要有一個設計規則，所有的子產品都在這個規則下進 行設計。良好的設計規則，會把耦合密集的設計參數進行歸類作為一個子產品，并以此劃分工作任務。而子產品之間彼此通過一個固定的接口（所謂的可見參數）進行互動，除此之外的内部實作（所謂的隐參數）則由子產品的開發團隊進行自由發揮。

程式子產品化的目的：

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/

【關注百度技術沙龍】