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);
}
});
}
}