模塊化概念

　　模塊化就是為了減少循環(huán)依賴，減少耦合，提高設計的效率。為了做到這一點，我們需要有一個設計規(guī)則，所有的模塊都在這個規(guī)則下進行設計。良好的設計規(guī)則，會把耦合密集的設計參數(shù)進行歸類作為一個模塊，并以此劃分工作任務。而模塊之間彼此通過一個固定的接口（所謂的可見參數(shù)）進行交互，除此之外的內(nèi)部實現(xiàn)（所謂的隱參數(shù)）則由模塊的開發(fā)團隊進行自由發(fā)揮。

　　程序模塊化的目的：

1. 減少循環(huán)依賴
2. 減少耦合
3. 提高設計效率

　　程序模塊化的實施：

1. 把耦合密集的歸為一個模塊
2. 模塊間通過固定的接口交互
3. 模塊內(nèi)部實現(xiàn)自由發(fā)揮

　　HTML CSS Images的模塊化設計

　　頁面模塊化的實施，這里指的是針對除去JavaScript部分的頁面代碼進行模塊化實施。通過html css 圖片進行模塊化。

　　頁面模塊化的實施思路是高度耦合的頁面片段封裝，模塊布局作為公開接口，高度耦合的頁面進行封裝，使用獨立的css文件，高度耦合的圖片進行封裝，給某類相關(guān)性強的圖片建立文件夾。

　　頁面模塊化的目的是，實現(xiàn)多人協(xié)同開發(fā)頁面，提高頁面研發(fā)速度和降低維護難度。研發(fā)速度的提升體現(xiàn)在多人協(xié)同并行開發(fā)， 維護難度體現(xiàn)在減少版本的混亂，根據(jù)模塊區(qū)分版本降低版本間代碼沖突和文件錯誤覆蓋。 

　　拆分頁面模塊，從小到大的分解

　　1. 拆分頁面模塊

　　一個頁面有很多個小單元模塊組成，他來自有原始需求文檔，比如logo，導航，內(nèi)容1，內(nèi)容2，內(nèi)容3，內(nèi)容4，尾部導 航，版權(quán)信息等等。根據(jù)他們就可以拆分出基本的模塊。

　　2. 拆分網(wǎng)站模塊

　　將整個網(wǎng)站安排頻道或者分類進行拆分，比如首頁，內(nèi)容頁，文字列表頁，圖片列表頁，頻道1頁面，頻道2頁面，分類1頁面，分類2頁面，后臺管理頁面，等等。

　　3. 每個網(wǎng)站作為一個模塊。比如商城站，支付站，論壇，三個站獨立為三個大模塊。

　　模塊化實現(xiàn)

　　1. 高度耦合提取為一個模塊，用模塊代碼作用域進行控制

　　代碼1. 非繼承模塊，通過后代選擇符方式控制作用域

<div class="mod">
<h3 class="title">title</h3>
<div class="con">
        con
    </div>
 
    <a class="more">more</a>
</div>        

        

        
        
      
        
it知識庫：前端模塊化設計思路，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。