您好,歡迎來到樂享投融!

資訊動態

首頁> 咨訊動態> 央行動態

前端模塊化設計思路



模塊化概念
  模塊化就是為了減少循環依賴,減少耦合,提高設計的效率。為了做到這一點,我們需要有一個設計規則,所有的模塊都在這個規則下進行設計。良好的設計規則,會把耦合密集的設計參數進行歸類作為一個模塊,并以此劃分工作任務。而模塊之間彼此通過一個固定的接口(所謂的可見參數)進行交互,除此之外的內部實現(所謂的隱參數)則由模塊的開發團隊進行自由發揮。
  程序模塊化的目的:
減少循環依賴
減少耦合
提高設計效率
  程序模塊化的實施:
把耦合密集的歸為一個模塊
模塊間通過固定的接口交互
模塊內部實現自由發揮
  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名。
  規劃整站模塊
  上文提到的基本的原理,真正實施起來還是存在很多問題,模塊粒度問題,公共模塊與普通模塊的區分,繼承模塊是否值得繼承等等,頁面模塊如何劃分。
  首先,了解你的項目,通過畫網站樹狀圖了解你網站的總體結構和頁面模塊。
  其次,理清結構邏輯和視覺邏輯,結構邏輯就是看你的頁面由那些模塊組成,視覺邏輯了解可繼承模塊,布局邏輯(網格布局或者非網格布局)
 

Copyright ? 2015 樂享投融(北京)網絡科技有限公司 京ICP備14062166號-3
铁拳擂台APP