[easyui]单例模式封装组件,提高性能,按需使用
来源:互联网 发布:linux操作系统入门书籍 编辑:程序博客网 时间:2024/06/05 19:02
项目里面有个页面,包含一个tabs,共有六个tab标签,每个标签里面都有一个datagrid,除此之外,页面里面还有若干dialog。
发现弊端
这个页面加载非常慢,原因就是该页面会在所有组件全部渲染完成才显示,这样非常影响性能,因为有的组件完全可以在需要用的时候才去渲染。
单例模式封装组件
主要常用form,dialog,datagrid组件,如下简单进行封装(以datagrid举例)。
最简单的封装
function datagrid(selector,options){ // 原datagrid的引用 this.datagrid = null; this.init = function (){ if(null == this.datagrid){ // 初始化,大概代码如下 this.datagrid = $(selector).datagrid(options); } return this; }}datagrid.prototype.invoke = function (method,params){ // 确保已经初始化 this.init(); // 调用方法,如下写法为了方便链式调用 var result = this.datagrid.datagrid(method,params); if(result == this.datagrid){ return this; } return result;}
然后,项目里的代码就可以改成这样了
// 先声明一个datagridvar dg = new datagrid('#dg',{ // 这里是原本datagrid的参数 url:'', columns:[[]],});然后在 tabs 组件的 onSelect 事件里写如下代码onSelect:function(title,index) { // 根据标签index去调用对应datagrid的初始化方法 if(0 == index){ dg.init();// 这样保证在切换到该标签时才会去渲染对应的组件 }}
这样就保证了在一开始进入页面的时候不会去初始化一些暂时不需要的组件,提高了性能。
因为我没在官网上看到datagrid有添加行的事件,这就导致有个地方很蛋疼了。
比如我要在添加一条数据之前进行判断是否有已经存在的行跟要添加的行有若干字段是相等的, 如有则取消本次添加的操作。
你会说,那你就在调用 appendRow 之前判断咯。
当然,如果我只有一个地方调用 appendRow ,那确实没什么,但如果有超过一个地方会调用呢?而且这理论上应该是在事件里去检测的。
所以,上面的封装就体现了另一个好处了,可以添加事件!!!
封装前我要添加一行是这么写
var dg = $('#dg').datagrid({options});dg.datagrid('appendRow',row);
封装后呢
var dg = new datagrid('#dg',options);dg.invoke('appendRow',row);
我只要在invoke里对 method 参数进行判断,如果是 appendRow ,就去调用对应的我定义的 onAppendRow方法,如果返回false,我就不调用appendRow方法即可。
暂时更新到此,晚点再更新,我得出去吃饭了
0 0
- [easyui]单例模式封装组件,提高性能,按需使用
- 【iOS提高】单例模式在OC的使用
- 封装单例模式和拦截器的使用
- Android中正确使用单例模式及单例模式下的性能处理
- 高性能单例模式
- 单例模式(对象性能)
- EasyUI组件使用
- EasyUI组件使用
- 单例模式封装PDO链接数据库
- Okhttp的单例模式封装
- 封装好的单例模式
- JDBC连接数据库例子--一般,封装,单例模式封装
- easyUI组件datagrid的二次封装
- 改进的单例模式,解决并发生成多实例问题,并且提高调用时的性能
- 使用单例模式封装Intent(实现跳转与携带数据跳转,顺带发送广播)
- 单例设计模式 (应用场景,存储一些共享信息,每个对象都能访问修改.某类的创建非常消耗性能,设计成单例,提高性能)
- 单例的封装创建与使用
- 单例模式使用 懒汉模式和饿汉模式以及使用enum方式的性能测试
- LeetCode 148:Sort List
- OC为什么需要copy
- 使用Windbg解析dump文件
- 两标关联update
- 2016, 新的一年,新的起点
- [easyui]单例模式封装组件,提高性能,按需使用
- 机器学习(三):分类算法之决策树算法
- 20160103
- poj 1144 Network
- Android大牛博客
- 关于字符串匹配算法研究 http://www.cnblogs.com/Su-30MKK/archive/2012/09/17/2688122.html
- Lost executor on YARN
- mysql学习心得之二进制安装(4)
- 109_征兵问题 conscription (poj 3723)