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);
}
});
}
}
分享到:
相关推荐
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
JavaScript表格组件加载速度测试 ● Dojo grid ● jqGrid ● Ext JS grid ● dhtmlxGrid
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。
书中详细讲述了EXT的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具等内容,每个知识点都配有相应的示例,可操作性极强,同时补充了两个功能强大的实例,并加入...
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
Ext项目Ext的插件都斗劲大,对于网页的浏览速度也是很是不容乐观的,于是就须要对所加载的js文件进行优化,此中一个办法就是对于较大的js文件可以进行紧缩。紧缩成gzjs格局,然则gzjs后缀名的文件又不克不及被浏览器...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
在您的 ext 包文件中: var gardrExt = require ( 'gardr-ext' ) ; var fastload = require ( 'gardr-plugin-ext-fastload' ) ; gardrExt . plugin ( fastload ) ; module . exports = gardrExt ;
Extjs 本身是一个加载慢的JS框架,这个需要程序员的多去优化,之前说过了JS的打包的优化 这次来写写怎么减少冗余代码,也是提高运行速度,包含了1、删除代码通用2、提交表单通用3、初始化Gird通用化 本次只写 删除...
这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件,提高了加载速度和用户等待时间。 requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录,然后在需要用到对应js文件的时候...
1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度。 2、三种皮肤主题:经典、灰色和海王星,支持多浏览器和多分辨率。 3、...
- 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - zip压缩没有权限 提示红色,false 统一查找 - 登录...