前端模塊化設(shè)計(jì)思路
模塊化概念
模塊化就是為了減少循環(huán)依賴(lài)，減少耦合，提高設(shè)計(jì)的效率。為了做到這一點(diǎn)，我們需要有一個(gè)設(shè)計(jì)規(guī)則，所有的模塊都在這個(gè)規(guī)則下進(jìn) 行設(shè)計(jì)。良好的設(shè)計(jì)規(guī)則，會(huì)把耦合密集的設(shè)計(jì)參數(shù)進(jìn)行歸類(lèi)作為一個(gè)模塊，并以此劃分工作任務(wù)。而模塊之間彼此通過(guò)一個(gè)固定的接口（所謂的可見(jiàn)參數(shù)）進(jìn)行交 互，除此之外的內(nèi)部實(shí)現(xiàn)（所謂的隱參數(shù)）則由模塊的開(kāi)發(fā)團(tuán)隊(duì)進(jìn)行自由發(fā)揮。
程序模塊化的目的：
- 減少循環(huán)依賴(lài)
- 減少耦合
- 提高設(shè)計(jì)效率
程序模塊化的實(shí)施：
- 把耦合密集 的歸為一個(gè)模塊
- 模塊間通過(guò)固定的接口交互
- 模塊內(nèi)部實(shí)現(xiàn)自由發(fā)揮
HTML CSS Images的模塊化設(shè)計(jì)
頁(yè)面模塊化的實(shí)施，這里指的是針對(duì)除去JavaScript部分的頁(yè)面代碼進(jìn)行模塊化實(shí)施。通過(guò)html css 圖片進(jìn)行模塊化。
頁(yè)面模塊化的實(shí)施思路是高度耦合的頁(yè)面片段封裝，模塊布局作為公開(kāi)接口，高度耦合的頁(yè)面進(jìn)行封裝，使用獨(dú)立的css文件，高度耦合的圖片進(jìn)行封裝，給某類(lèi)相關(guān)性強(qiáng)的圖片建立文件夾。
頁(yè)面模塊化的目的是，實(shí)現(xiàn)多人協(xié)同開(kāi)發(fā)頁(yè)面，提高頁(yè)面研發(fā)速度和降低維護(hù)難度。研發(fā)速度的提升體現(xiàn)在多人協(xié)同并行開(kāi)發(fā)， 維護(hù)難度體現(xiàn)在減少版本的混亂，根據(jù)模塊區(qū)分版本降低版本間代碼沖突和文件錯(cuò)誤覆蓋。
拆分頁(yè)面模塊，從小到大的分解
1. 拆分頁(yè)面模塊
一個(gè)頁(yè)面有很多個(gè)小單元模塊組成，他來(lái)自有原始需求文檔，比如：
logo，導(dǎo)航，內(nèi)容1，內(nèi)容2，內(nèi)容3，內(nèi)容4，尾部導(dǎo) 航，版權(quán)信息等等。
根據(jù)他們就可以拆分出基本的模塊。
2. 拆分網(wǎng)站模塊
將整個(gè)網(wǎng)站安排頻道或者分類(lèi)進(jìn)行拆分，比如：
首頁(yè)，內(nèi)容頁(yè)，文字列表頁(yè)，圖片列表頁(yè)，頻道1頁(yè)面，頻道2頁(yè)面，分類(lèi)1頁(yè)面，分類(lèi)2頁(yè)面，后臺(tái)管理頁(yè)面，等等
3. 每個(gè)網(wǎng)站作為一個(gè)模塊。比如：
商城站，支付站，論壇，三個(gè)站獨(dú)立為三個(gè)大模塊。
模塊化實(shí)現(xiàn)
1. 高度耦合提取為一個(gè)模塊，將模塊代碼作用域進(jìn)行控制
代碼1.非繼承模塊，通過(guò)后代選擇符方式控制作用域
- <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="">關(guān)于</a></li>
- <li><a href="" title="">合作</a></li>
- <li><a href="" title="">招聘</a></li>
- </ul>
- Copyright © 2009 某公司 版權(quán)所有
- </div>
代碼2.繼承模塊，提取眾多模塊中公共部分，具體模塊通過(guò)優(yōu)先級(jí)進(jìn)行處理。繼承模塊方面整站某些模塊的批量修改處理，也提高復(fù)用性，降低代碼重復(fù)。
- <div class="mod note">
- <h3 class="title">title</h3>
- <div class="con">
- con
- </div>
- <a class="more">more</a>
- </div>
- .mod {}
- .mod .title {}
- .mod .con {}
- .mod .more {}
- .note {}
- .note .title {}
- .note .con {}
- .note .more {}
2. 頁(yè)面模塊
頁(yè)面模塊代碼作用域的控制通過(guò)css文件來(lái)控制。某類(lèi)具有高度耦合的頁(yè)面使用自身的css文件。
3. 模塊間的公開(kāi)接口
上面是模塊的封裝，公開(kāi)的接口在頁(yè)面中表現(xiàn)為什么？
首先是reset，base，可繼承模塊，這些代碼是開(kāi)放接口，必須根據(jù)這些代碼進(jìn)行頁(yè)面代碼開(kāi)發(fā)，也就是你的頁(yè)面代碼必須在以上代碼基礎(chǔ)上開(kāi)發(fā)。
其次是css文件，css文件名稱(chēng)和他作用于那些頁(yè)面。
再次是布局、模塊class，id命名，模塊在頁(yè)面的哪個(gè)位置。在CSS中的表現(xiàn)就是定位，布局，和部分盒模型。float、position、 width、height等等。布局通常使用css作為接口實(shí)現(xiàn)，如果布局具有高度的邏輯性，完全可以通過(guò)html和css組合進(jìn)行，比如960 Grid System，或者采用YUI grid.css。模塊class和id的命名用于區(qū)分模塊，不能在一個(gè)頁(yè)面的所有css中出現(xiàn)不同模塊同用一個(gè)class和id名。
規(guī)劃整站模塊
上文提到的基本的原理，真正實(shí)施起來(lái)還是存在很多問(wèn)題，模塊粒度問(wèn)題，公共模塊與普通模塊的區(qū)分，繼承模塊是否值得繼承等等，頁(yè)面模塊如何劃分。
首先，了解你的項(xiàng)目，通過(guò)畫(huà)網(wǎng)站樹(shù)狀圖了解你網(wǎng)站的總體結(jié)構(gòu)和頁(yè)面模塊
其次，理清結(jié)構(gòu)邏輯和視覺(jué)邏輯，結(jié)構(gòu)邏輯就是看你的頁(yè)面由那些模塊組成，視覺(jué)邏輯了解可繼承模塊，布局邏輯（網(wǎng)格布局或者非網(wǎng)格布局）
