如何完成EXT3中的JS后加载，提高应用程序的加载速度

EXT的应用程序是基于WEB 2.0上构建的，也即One Application One Page，即一个应用程序只有一个页面，当我们开发的功能比较多的时候，也即需要在那个页面中加入很多我们写的js，如
如我们在index.jsp中大量加入不同的应用程序模块的 js:

       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/AppUserView.js"></script>
       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/AppUserForm.js"></script>
       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/DepartmentView.js"></script>
       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/DepartmentForm.js"></script>
       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/CompanyView.js"></script>
       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/FileAttachView.js"></script>
       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/FileAttachForm.js"></script>
       <script type="text/javascript" src="<%=request.getContextPath()%>/js/system/FileAttachDetail.js"></script>

 

这将导致我们的开发程序需要引入的js越来越多，也即我们第一次进入这个程序的时候，需要等待加载所有这些js后才能完成我们的功能操作。这将使得程序越来越慢。
因为浏览器每次都需要解释这么多的js.


我们可以把js先不引入，当用户点击某块功能时，才把该功能对应的所需要的js导入。并且加载完成后，在本次操作过程中（如没有刷新浏览器的前提下），该次加载的js已经完成，后面相同功能功能模块的操作不再加载该模块的js.

功能模块对应的js则需要在App.import.js中定义，如下所示：

/**
 * 系统导入的模块js，主要用于后加载方式，需要使用某些js时，需要在此指定加载哪一些。
 */

 Ext.ns("App");
 App.importJs = {
    AppRoleView : [
           __ctxPath + '/js/system/AppRoleView.js',
           __ctxPath + '/js/system/AppRoleForm.js'],
    PersonalDocumentView : [
           __ctxPath + '/js/document/PersonalDocumentView.js',
           __ctxPath + '/js/document/DocumentView.js',
           __ctxPath + '/js/document/DocumentForm.js',
           __ctxPath + '/js/document/DocumentSharedForm.js',
           __ctxPath + '/js/document/DocFolderForm.js']
};

 

　
如角色模块，当点击角色模块时，即加载/js/system/AppRoleView.js, /js/system/AppRoleForm.js两个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);
                  }
              });
    }
}

 

 

评论

2 楼 man1900 2009-09-23  

按我的理解，这种写法可能有些问题，如url是否为类似的jsp，还是单独的js。tab能否动态加载某个js？你的js加载后如何完成其他操作？如创建类似的js对象，或创建一个Panel?

1 楼 nickevin 2009-09-23  

我的项目是 传统ui 也就是 左边是 tree 右边是tab

所以 点击 tree 的个子模块链接会载入相应的页面 页面里面包含 js 

tabPanel.add({
    id: 'tab' + node.id, // be careful! can't number as id
    title: node.text,
    closable: true,
    autoLoad: {
        url: url,
        scripts: true
    }
})

这样既可

不知道我的意思理解有无偏颇 讨教中