- 浏览: 293362 次
- 性别:
- 来自: 扬州
文章分类
最新评论
-
wanglujiede:
幸亏看了这里,关于store的proxy的params问题顶一 ...
ExtJS 4.0 的改变(仅发表我发现的) -
freddie:
现在都extjs5了,感觉extjs3-extjs4变化挺大的 ...
ExtJS 4.0 的改变--较为完整的介绍。 -
jiangzi100:
写的真的很好,输入EXT这个工具很烂
EXTJS组件化(一)----建立你的思想 -
我飞我是飞飞:
StringHttpMessageConverter,我是3. ...
StringHttpMessageConverter乱码问题的解决(Spring 3.2) -
restmad:
999
EXTJS组件化(一)----建立你的思想
首先感谢朱治生朋友转载了我的帖子,由于种种不可抗的原因导致Dojochina资料遗失,损失惨重.
前言
组件化编程:是将各种小部件组装成一个对象,并提供相应的事件和函数,供别人方便的调用.
本文基于EXTJS 3.0.0,在其他版本中(特别是EXTJS2.0)会有所不同请注意!!
正文
EXTJS的效率一直都被关注着,效率问题也是所有web开发者面临的最大的难题.面对着EXTJS3.0超过600KB的体积,被无数人指责,唾弃.我觉得这些人根本就没有从问题的本质出发去看待这个工具.
我一直把EXTJS作为一个工具来看待,哪个工具好,我就用哪个.如果根据系统情况Jquery或者Prototype能有更好的表现,我是很乐意 去使用这些AJAX框架的.一个工具的推出,必然有它的优点和缺点,只是要看你怎么取舍.EXTJS的效率慢,我承认,确实不如其他的一些AJAX框架. 但是这个慢,是建立在其丰富的UI组件,统一的界面风格上的(当然,看多了也腻).就好比Hibernate,你能说Hibernate不好吗?但是,Hibernate的效率肯定不如JDBC直连.
或许很多人会说,我就是不用EXTJS,我看见它就不喜欢.说这种话的人实在太不负责任,自己没有时间去学,或者直接就是害怕去学它,也不愿意别人 去学..我在此强烈谴责这些说话不负责任的人.这类人应该从思想素质上去提高.这是人性的问题,已经超出技术范围了,这种人发展到最后也就是孔子的那句话(改编):”老而不新(死),视为贼也”.
关于EXTJS的效率提升.现在很多人在学习EXTJS,每个人的写法各不相同,我只是将我自己的一些经验说一下.
首先是面向对象的思想建立,EXTJS虽然是基于Javascript的,但是在对象上,写法确实跟Javascript不太一样.EXTJS让Javascript的面向对象更接近强类型后台语言的写法,现在写EXTJS的有很多人没有按照正确的EXTJS式的面向对象的思想去写,例如一个简单的对象:
这样写是没有错误的,EXTJS底层很多也是这样写的例如基类Observable
这就是Javascript最常用的写法,但是在开发过程中我们能这样去写EXTJS对象吗?
在大多数情况下这显然是不可行的,当整个项目采用Extjs编写之后,这样的代码会让接手的人有一种无从下手的感觉(这个人可能就是两三个月后的你自己).
我们应该怎么样去写一个对象让代码看起来更简洁清晰呢?还是查看EXTJS的源码,UI组件Window最能说明问题:
Window是继承自Panel的,并为Panel添加了拖拽等功能,到这里,一切就真相大白了,Panel继承自BoxComponent,理论上来讲,我们自己的组件完全可以基于Panel来做,我们可以暂且将Panel作为我们所有组件的容器,我们所写的各种组件都可以被包在这个Panel里面去.
我们首先构建出自定义组件(这里以登陆为例)的轮廓:
运行之后就是一个很普通的Panel,不要着急,我们还要往里面添加东西,登陆需要一个表单,我们继续写下去为这个组件添加一个表单:
然后我们可以将这个Panel包含在一个Window里面去,让他更像一个登陆窗口:
OK,到此为止,我们已经将这个登陆组件的大框架已经搭建好了,我们现在开始为我们的登录组件添加一个公开的函数让外部去调用:
至此,我不会再继续写下去了,我也不会提供源码,你可以充分发挥你的想象力去改造它,去感受一下这种写法的好处与优点,以及他即将会引发什么样的困惑.思考之后你才能有更深刻的了解.(你可以直接继承Window而不是继承Panel来做这个登录组件)
(未完待续)
写的真的很好,输入EXT这个工具很烂
3.0有一个clear方法不知道你有没有注意到
我想说的只是一个现象,但解决仍未知。可能js就这样吧
我也一直在考虑效率的问题,至于内存泄露,恕我直言,我还没有遇到过.当然,这种现象是肯定存在的.比如经常被提起的闭包引起的内存泄露等等.
至于JavaScript的垃圾回收,确实是应该将不用的对象设置为null
我一般在写完一个组件或者对象后会重写一下组件的onDestroy函数,在这个函数里做一些清理工作.
还有,我发现在浏览器最小化再最大化的时候内存会减少很多.
我想说的只是一个现象,但解决仍未知。可能js就这样吧
这个是ext内存泄漏, 页面上的div没有及时清除. 即使手动也不能解决滴. 解决方法一个是每个功能页面单独刷新一次或者是根本不销毁对象
前言
组件化编程:是将各种小部件组装成一个对象,并提供相应的事件和函数,供别人方便的调用.
本文基于EXTJS 3.0.0,在其他版本中(特别是EXTJS2.0)会有所不同请注意!!
正文
EXTJS的效率一直都被关注着,效率问题也是所有web开发者面临的最大的难题.面对着EXTJS3.0超过600KB的体积,被无数人指责,唾弃.我觉得这些人根本就没有从问题的本质出发去看待这个工具.
我一直把EXTJS作为一个工具来看待,哪个工具好,我就用哪个.如果根据系统情况Jquery或者Prototype能有更好的表现,我是很乐意 去使用这些AJAX框架的.一个工具的推出,必然有它的优点和缺点,只是要看你怎么取舍.EXTJS的效率慢,我承认,确实不如其他的一些AJAX框架. 但是这个慢,是建立在其丰富的UI组件,统一的界面风格上的(当然,看多了也腻).就好比Hibernate,你能说Hibernate不好吗?但是,Hibernate的效率肯定不如JDBC直连.
或许很多人会说,我就是不用EXTJS,我看见它就不喜欢.说这种话的人实在太不负责任,自己没有时间去学,或者直接就是害怕去学它,也不愿意别人 去学..我在此强烈谴责这些说话不负责任的人.这类人应该从思想素质上去提高.这是人性的问题,已经超出技术范围了,这种人发展到最后也就是孔子的那句话(改编):”老而不新(死),视为贼也”.
关于EXTJS的效率提升.现在很多人在学习EXTJS,每个人的写法各不相同,我只是将我自己的一些经验说一下.
首先是面向对象的思想建立,EXTJS虽然是基于Javascript的,但是在对象上,写法确实跟Javascript不太一样.EXTJS让Javascript的面向对象更接近强类型后台语言的写法,现在写EXTJS的有很多人没有按照正确的EXTJS式的面向对象的思想去写,例如一个简单的对象:
Ext.ns(“Ext.ux.Panel”); Ext.ux.Panel=function(){ return new Ext.Panel(); }
这样写是没有错误的,EXTJS底层很多也是这样写的例如基类Observable
EXTUTIL.Observable.prototype = function(){ var filterOptRe = /^(?:scope|delay|buffer|single)$/, toLower = function(s){ return s.toLowerCase(); }; return { //省略若干代码 }
这就是Javascript最常用的写法,但是在开发过程中我们能这样去写EXTJS对象吗?
在大多数情况下这显然是不可行的,当整个项目采用Extjs编写之后,这样的代码会让接手的人有一种无从下手的感觉(这个人可能就是两三个月后的你自己).
我们应该怎么样去写一个对象让代码看起来更简洁清晰呢?还是查看EXTJS的源码,UI组件Window最能说明问题:
Ext.Window = Ext.extend(Ext.Panel, { //省略若干属性 baseCls : 'x-window', //.......省略若干属性 initComponent : function(){ Ext.Window.superclass.initComponent.call(this); //省略若干函数体 } //.......省略若干函数
Window是继承自Panel的,并为Panel添加了拖拽等功能,到这里,一切就真相大白了,Panel继承自BoxComponent,理论上来讲,我们自己的组件完全可以基于Panel来做,我们可以暂且将Panel作为我们所有组件的容器,我们所写的各种组件都可以被包在这个Panel里面去.
我们首先构建出自定义组件(这里以登陆为例)的轮廓:
Ext.namespace("Lesson1.FirstPanel"); /** * @author andy_ghg * @version 2009年9月24日23:22:09 * @description 第一个派生类 * @class Lesson1.FirstPanel * @extends Ext.Panel */ Lesson1.FirstPanel=Ext.extend(Ext.Panel,{ frame:true, //初始化函数 initComponent:function(){ //继承父类的initComponent函数 Lesson1.FirstPanel.superclass.initComponent.call(this,arguments); } }); //*测试 Ext.onReady(function(){ var panel=new Lesson1.FirstPanel({ title:"标题", height:300, width:400, renderTo:Ext.getBody() }); }); //*/
运行之后就是一个很普通的Panel,不要着急,我们还要往里面添加东西,登陆需要一个表单,我们继续写下去为这个组件添加一个表单:
Lesson1.FirstPanel=Ext.extend(Ext.Panel,{ frame:true, //初始化函数 initComponent:function(){ //继承父类的initComponent函数 Lesson1.FirstPanel.superclass.initComponent.call(this,arguments); //为该组件添加了一个FormPanel this.formPanel=new Ext.FormPanel({ defaults:{anchor:"95%",allowBlank:false}, labelWidth:55, defaultType:"textfield", items:[{ fieldLabel:"用户名", name:"username" },{ fieldLabel:"密码", inputType:"password", name:"password" }] }); //将表单列入到panel的items里去 this.add(this.formPanel); } });
然后我们可以将这个Panel包含在一个Window里面去,让他更像一个登陆窗口:
//*测试 Ext.onReady(function(){ var panel=new Lesson1.FirstPanel({ height:100, width:300, layout:"fit" }); new Ext.Window({ title:"登陆", items:[panel], buttons:[{ text:"确定" },{ text:"取消" }] }).show(); }); //*/
OK,到此为止,我们已经将这个登陆组件的大框架已经搭建好了,我们现在开始为我们的登录组件添加一个公开的函数让外部去调用:
Ext.namespace("Lesson1.FirstPanel"); /** * @author andy_ghg * @version 2009年9月24日23:22:09 * @description 第一个派生类 * @class Lesson1.FirstPanel * @extends Ext.Panel */ Lesson1.FirstPanel=Ext.extend(Ext.Panel,{ frame:true, //初始化函数 initComponent:function(){ //继承父类的initComponent函数 Lesson1.FirstPanel.superclass.initComponent.call(this,arguments); //为该组件添加了一个FormPanel this.formPanel=new Ext.FormPanel({ defaults:{anchor:"95%",allowBlank:false}, labelWidth:55, defaultType:"textfield", items:[{ fieldLabel:"用户名", name:"username" },{ fieldLabel:"密码", inputType:"password", name:"password" }] }); this.add(this.formPanel); }, // 提交表单的函数 submitForm:function(){ alert(this.formPanel); // this.formPanel.getForm().submit({ // url:"", // success:function(){}, // failure:function(){} // }) } }); //*测试 Ext.onReady(function(){ var panel=new Lesson1.FirstPanel({ height:100, width:300, layout:"fit" }); new Ext.Window({ title:"登陆", items:[panel], buttons:[{ text:"确定", handler:function(){ panel.submitForm(); } },{ text:"取消" }] }).show(); }); //*/
至此,我不会再继续写下去了,我也不会提供源码,你可以充分发挥你的想象力去改造它,去感受一下这种写法的好处与优点,以及他即将会引发什么样的困惑.思考之后你才能有更深刻的了解.(你可以直接继承Window而不是继承Panel来做这个登录组件)
(未完待续)
评论
9 楼
jiangzi100
2014-05-26
写的真的很好,输入EXT这个工具很烂
8 楼
restmad
2014-02-25
999
7 楼
yangjuanjava
2013-12-26
好强呀,大侠,能不能帮我看看这个问题。http://www.iteye.com/problems/99474
6 楼
andy_ghg
2009-11-29
cqhydz 写道
Lesson1.FirstPanel
这样的用户对像而非组件对像,你在使用后也会手动 Lesson1.FirstPanel=null来清理工作吗?怎么清理?
这样的用户对像而非组件对像,你在使用后也会手动 Lesson1.FirstPanel=null来清理工作吗?怎么清理?
3.0有一个clear方法不知道你有没有注意到
5 楼
cqhydz
2009-11-29
Lesson1.FirstPanel
这样的用户对像而非组件对像,你在使用后也会手动 Lesson1.FirstPanel=null来清理工作吗?怎么清理?
这样的用户对像而非组件对像,你在使用后也会手动 Lesson1.FirstPanel=null来清理工作吗?怎么清理?
4 楼
andy_ghg
2009-11-11
cqhydz 写道
cqhydz 写道
仔细看完了,我有两个有关效率的问题
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
我想说的只是一个现象,但解决仍未知。可能js就这样吧
我也一直在考虑效率的问题,至于内存泄露,恕我直言,我还没有遇到过.当然,这种现象是肯定存在的.比如经常被提起的闭包引起的内存泄露等等.
至于JavaScript的垃圾回收,确实是应该将不用的对象设置为null
我一般在写完一个组件或者对象后会重写一下组件的onDestroy函数,在这个函数里做一些清理工作.
还有,我发现在浏览器最小化再最大化的时候内存会减少很多.
3 楼
cqhydz
2009-11-04
cqhydz 写道
仔细看完了,我有两个有关效率的问题
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
我想说的只是一个现象,但解决仍未知。可能js就这样吧
2 楼
mr.a
2009-11-03
cqhydz 写道
仔细看完了,我有两个有关效率的问题
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
这个是ext内存泄漏, 页面上的div没有及时清除. 即使手动也不能解决滴. 解决方法一个是每个功能页面单独刷新一次或者是根本不销毁对象
1 楼
cqhydz
2009-11-01
仔细看完了,我有两个有关效率的问题
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
我将你Lesson1.FirstPane放在一个一个js文件中来调用。
1 Lesson1.FirstPanel 这个类吧,它在js加载时对它进行了变量化吧,,至少这是不全局变量吧。哪是否需要将它手动置为null以让内存回收
2 还有var panel=new Lesson1.FirstPanel 这也产生也一个对像哪是否需要将它手动置为null以让内存回收
当程序复杂时如常用的哪种tab页打开方式,我们要很频繁访问这个js文件。这种变量与new产生的对象会越来越来多,我用 Firefox 查看时发现每次载入js文件时页都会去生成一个文件
发表评论
-
StringHttpMessageConverter乱码问题的解决(Spring 3.2)
2013-02-03 23:05 18903特别标注了是Spring 3.2,在网上搜了半天,很多配置应该 ... -
Ext JS 4.x任意组件放入ComboBox的下拉框。例如tree、grid等。
2012-12-29 21:10 2267移步到http://www.uniorder.com/2013 ... -
Ext JS 4.1.1整合Kindeditor
2012-11-29 20:11 5402整合Kindeditor比CKEditor要简单许多许多(CK ... -
Ext JS 4.1.1整合CKEditor。
2012-11-28 23:44 2733Ext.define('GB.view.CKeditor' ... -
用Java反射写的生成ExtJS MVC model文件的类。
2012-10-24 22:11 3197如果你也在写Ext JS的MVC,恰好又遇到了类似下面的这个类 ... -
Error setting expression 'ext-gen1500' with value
2011-08-09 18:34 3670首先查看devMode是否设置为false,否则查看你提交的表 ... -
ExtJS 4.0 的改变--较为完整的介绍。
2011-07-26 22:14 37950惯例,看之前先看看我的很久很久以前的学习笔记(就是那个Word ... -
ExtJS 4.0.2a ActionColumn的使用
2011-07-10 23:50 9355ActionColumn是有问题的(不敢说是BUG),text ... -
Sencha SDK Tools 1.1的安装(Mac OS)
2011-06-08 21:06 4661安装其实十分简单,双击安装程序即可实现安装,底层貌似用到了Qt ... -
ExtJS 4.0 的改变(仅发表我发现的)
2011-05-25 17:23 10285最近写了一个较为完整版(有部分细节没说)的,去看看这里吧htt ... -
EXTJS配合Struts2的图片上传(可预览)例子代码
2009-12-23 20:56 8268最近一直在用Struts2,忽然心血来潮想做个图片上传并预览的 ... -
EXTJS3.0.3的本地资源包乱码的问题
2009-11-15 23:33 2328今天忽然看到首页上有3.0.3开放下载的消息,有点兴奋 ... -
EXTJS组件化(四)---减少你的代码
2009-11-11 02:14 4298代码量,BUG和维护成本是水涨船高的关系,这点应该不能被否认的 ... -
EXTJS组件化(三)----组件之间的暧昧关系
2009-10-17 01:52 6420我忽然发现,菜鸟更愿意与人分享他的学习成果. 在开发 ... -
EXTJS组件化(二)----简易的私有和公有
2009-09-25 21:03 3119我一直认为,凡是我已经了解的东西,国内必定已经有了一大 ...
相关推荐
- **概述**:Extjs 使用面向对象编程的思想,通过类来组织和管理代码。 - **编码和规范**:遵循 Extjs 的编码风格和规范,提高代码质量。 - **示例代码**:提供实际的例子帮助理解如何创建自定义类。 ##### 3.2 MVC...
你会了解到ExtJS是如何通过组件化的思想来构建页面,每个组件都有自己的生命周期、属性、方法和事件,这使得代码复用和维护变得简单。 接下来,"环境搭建"章节将指导你配置开发环境。这通常包括下载和安装ExtJS库,...
SSH+ExtJS框架是Web应用开发中的一个常见组合,它结合了Struts2、Hibernate和Spring三大主流Java EE框架,并引入了ExtJS作为前端展示层技术。这个框架的使用大大提高了开发效率,提供了灵活的数据管理和用户界面交互...
1. **组件化设计**:Ajax-ext继承了ExtJS的组件化思想,将页面元素封装成可复用的组件,如表格、表单、树形视图等,方便开发者快速构建UI。 2. **数据绑定**:Ajax-ext支持双向数据绑定,使得UI状态与后台数据同步...
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
轨道交通基坑智能化监测系统,简称智能监测系统,是基于计算机技术和数据库技术构建的一个软件系统,主要负责实时监测轨道交通基坑的变形情况,包括水平位移、竖向位移、支撑轴力和地表沉降等关键参数。该系统的架构...
JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页...
Spring 框架核心的思想就是建立一个 Java 对象的大工厂,用户只要给工厂一个指令,工厂就能将用户需要的对象根据配置文件组装好返还给用户。用户需要做的许多工作则可以写成简单的配置文件。JdbcTemplate 正是为了...
EXTJS是一个为开发富互联网应用(RIA)而设计的JavaScript框架,它提供了丰富的界面组件,并可与服务器端技术如PHP进行交互,从而构建出具有良好交互性和强大功能的前端界面。 8. RBAC基于角色的访问控制:在文章的...