最開始的實現方式是,在服務端一次性獲取當前頁面的布局結構,當前頁面的所有功能模塊,同時通過循環檢索某一功能模塊屬於哪個容器並合理放置,最後獲取具體功能模塊的實際內容,一次性輸出完成頁面的顯示。
雖然解決了問題,但這種方式導致了單次請求返回數據的急劇增大,特別是在頁面布局復雜、功能模塊繁多時,尤其明顯。
經過多方驗證,我決定采取將布局構建和內容獲取進行隔離、分批次獲取內容的方式,以達到減小單次請求數據量的目的。具體步驟如下:
第一步:采用常規方式,返回頁面布局Html結構,同時也JSon方式,返回當前頁面的所有功能模塊基本信息
布局Html結構示例
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
var __widgets = [
{"widgetId":64,"title":"靜態文本","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,將功能模塊准確放置如對應的布局容器中
我在布局容器Html結構中,增加了columnindex屬性,在功能模塊的JSON配置中對應了columnIndex屬性,因此利用此屬性,輔以jQuery的強大選擇功能,可以非常方便的將功能模塊放置入對應容器,同時JSON配置中的sortIndex屬性可以確定同一容器中的先後順序。
第三步:利用jQuery的AJax方法,分批次異步加載具體功能模塊的實際內容
我們可以看到,在功能模塊的JSON配置中,每一個功能模塊都具有:widgetName 和 key 2個屬性,widgetName屬性可以確定當前功能模塊的實際類型,如上例中的"statichtml"表示靜態Html文本模塊,而key屬性,則對應於當前模塊在系統業務邏輯中所對應的唯一關鍵值,這個關鍵值需要配合功能模塊的具體類型進行綜合應用,以實現從數據庫或XML配置文件獲取內容的目的。
在異步獲取功能模塊的實際內容環節,我采取了分批次加載的方式,如果同時發出內容獲取的AJax連接超過10個,那麼後續的請求進入等待隊列,等待前面的10個請求。當前10個請求返回一個時,則立即從等待隊列中提出一個進行連接。這樣,始終以比較平緩的數據請求量連接服務器,而頁面內容也始終以比較緩和的方式呈現。
這種方式還值得完善的地方就是,最好能夠靈活設定,哪個功能模塊的加載具有高優先級就更好了。呵呵呵,慢慢再完善了。