說明:
Ext是一個強大的js類庫,它提供了豐富的,非常漂亮的外觀體驗,成為眾多介面層開發人員的追捧!其核心的組件基本覆蓋了我們構建富用戶端的常用的組件。
在B/C架構出來的都是基於web2.0,也即是One Application One Page (一個應用一個頁面),這樣如果你Web程式功能性過大,在載入JS的時候,會導致頁面載入非常的慢,特別是的IE,Chrome和Firefox相對好點。以前在華為的時候,做一個小的專案管理系統,一開始沒有考慮到很多東西,接到功能的時候就做,在初入系統的時候直接載入所有的JS(其中包括一些Ajax請求資料),一次的Seesion中也存了很多的資料,這個導致載入很慢。特別在資料超過1000條(一次性訪問)或者用IE訪問,需要4s的時間才能載入,初始載入7-8S左右。因為瀏覽器每次都需要解釋這麼多的js.
如何解決這個問題?
如下:
Ext.ns("App");App.importJs = { MenuView: [__ctxPath + "/js/system/MenuView.js", __ctxPath + "/js/system/MenuForm.js", __ctxPath + "/js/system/MenuFunctionForm.js", __ctxPath + "/js/system/MenuUrlForm.js", __ctxPath + "/js/system/IconSelector.js"], UserJobView: [__ctxPath + "/js/system/UserJobView.js", __ctxPath + "/js/system/UserJobForm.js", __ctxPath + "/js/system/RelativeJobView.js", __ctxPath + "/js/system/RelativeJobForm.js", __ctxPath + "/js/system/RelativeUserView.js", __ctxPath + "/js/system/RelativeUserForm.js", __ctxPath + "/js/system/DepartmentForm.js", __ctxPath + "/js/system/UserJobDetailForm.js", __ctxPath + "/js/system/JobForm.js", __ctxPath + "/js/selector/UserSelector.js", __ctxPath + "/js/selector/JobSelector.js", __ctxPath + "/js/selector/DepSelector.js"], };
代碼說明:在使用哪個模組時就調用哪個模組。
點擊左邊的菜單時,會根據其對應的Id來進行載入js.
以下為AppUtil.js中定義的按模組載入js,並且建立那個模組的對象/** * Import Js * @return {} */function $ImportJs(viewName,callback) { var b = document.getElementById(viewName+'-hiden'); if (b != null) { var view = eval('new ' + viewName + '()'); callback.call(this, view); } else { var jsArr = eval('App.importJs.' + viewName); ScriptMgr.load({ scripts : jsArr, callback : function() { Ext.DomHelper .append( document.body, "<div id='" + viewName + "-hiden' style='display:none'></div>"); var view = eval('new ' + viewName + '()'); callback.call(this, view); } }); }}
學習於man1900