EXT3中按照模組載入JS,提高應用程式的載入速度 。

來源:互聯網
上載者:User
說明:

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

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.