在項目中,有個這樣的需求:動態(tài)維護頁面的布局,以及動態(tài)載入布局容器中的具體模塊。最開始的實現(xiàn)方式是，在服務(wù)端一次性獲取當(dāng)前頁面的布局結(jié)構(gòu)，當(dāng)前頁面的所有功能模塊，同時通過循環(huán)檢索某一功能模塊屬于哪個容器并合理放置，最后獲取具體功能模塊的實際內(nèi)容，一次性輸出完成頁面的顯示。

　　雖然解決了問題，但這種方式導(dǎo)致了單次請求返回數(shù)據(jù)的急劇增大，特別是在頁面布局復(fù)雜、功能模塊繁多時，尤其明顯。

　　經(jīng)過多方驗證，我決定采取將布局構(gòu)建和內(nèi)容獲取進行隔離、分批次獲取內(nèi)容的方式，以達到減小單次請求數(shù)據(jù)量的目的。具體步驟如下：

　　第一步：采用常規(guī)方式，返回頁面布局HTML結(jié)構(gòu)，同時也json方式，返回當(dāng)前頁面的所有功能模塊基本信息

　　布局HTML結(jié)構(gòu)示例

Code
1 <div class="enjoosite_layout_container">
2   <div class="enjoosite_layout_item" columnindex="0"></div>  
3   <div class="enjoosite_layout_item" columnindex="1"></div>
4   <div class="enjoosite_layout_item" columnindex="2"></div>
5 </div>

　　同步加載的功能模塊JSON

Code
var __widgets = [
  {"widgetId":64,"title":"靜態(tài)文本","widgetName":"statichtml","key":"77","columnIndex":0,"sortIndex":1},
  {"widgetId":62,"title":"EnjooSite | 熙杰科技知識庫","widgetName":"statichtml","key":"76","columnIndex":1,"sortIndex":1},
  {"widgetId":66,"title":"本頁說明","widgetName":"statichtml","key":"82","columnIndex":1,"sortIndex":2}
];

　　第二步：在客戶端，利用js，將功能模塊準(zhǔn)確放置如對應(yīng)的布局容器中

　　我在布局容器HTML結(jié)構(gòu)中，增加了columnindex屬性，在功能模塊的JSON配置中對應(yīng)了columnIndex屬性，因此利用此屬性，輔以jQuery的強大選擇功能，可以非常方便的將功能模塊放置入對應(yīng)容器，同時JSON配置中的sortIndex屬性可以確定同一容器中的先后順序。

　　第三步：利用jQuery的ajax方法，分批次異步加載具體功能模塊的實際內(nèi)容

　　我們可以看到，在功能模塊的JSON配置中，每一個功能模塊都具有：widgetName 和 key 2個屬性，widgetName屬性可以確定當(dāng)前功能模塊的實際類型，如上例中的"statichtml"表示靜態(tài)HTML文本模塊，而key屬性，則對應(yīng)于當(dāng)前模塊在系統(tǒng)業(yè)務(wù)邏輯中所對應(yīng)的唯一關(guān)鍵值，這個關(guān)鍵值需要配合功能模塊的具體類型進行綜合應(yīng)用，以實現(xiàn)從數(shù)據(jù)庫或XML配置文件獲取內(nèi)容的目的。

　　在異步獲取功能模塊的實際內(nèi)容環(huán)節(jié)，我采取了分批次加載的方式，如果同時發(fā)出內(nèi)容獲取的ajax連接超過10個，那么后續(xù)的請求進入等待隊列，等待前面的10個請求。當(dāng)前10個請求返回一個時，則立即從等待隊列中提出一個進行連接。這樣，始終以比較平緩的數(shù)據(jù)請求量連接服務(wù)器，而頁面內(nèi)容也始終以比較緩和的方式呈現(xiàn)。

　　這種方式還值得完善的地方就是，最好能夠靈活設(shè)定，哪個功能模塊的加載具有高優(yōu)先級就更好了。呵呵呵，慢慢再完善了。

　?。ň唧w效果請瀏覽：http://vip.enjoosite.com，因為網(wǎng)站蹭的朋友VPS，所以速度體驗可能不如我文章所說那么明顯，僅提供我的實現(xiàn)思路而已，歡迎討論）

• JSON
• 布局