`
andy_ghg
  • 浏览: 293121 次
  • 性别: Icon_minigender_1
  • 来自: 扬州
社区版块
存档分类
最新评论

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式的面向对象的思想去写,例如一个简单的对象:
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来做这个登录组件)
    (未完待续)

10
2
分享到:
评论
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来清理工作吗?怎么清理?

3.0有一个clear方法不知道你有没有注意到
5 楼 cqhydz 2009-11-29  
Lesson1.FirstPanel
这样的用户对像而非组件对像,你在使用后也会手动 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文件时页都会去生成一个文件

我想说的只是一个现象,但解决仍未知。可能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文件时页都会去生成一个文件

我想说的只是一个现象,但解决仍未知。可能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文件时页都会去生成一个文件

这个是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文件时页都会去生成一个文件

相关推荐

    Extjs4-学习指南

    - **概述**:Extjs 使用面向对象编程的思想,通过类来组织和管理代码。 - **编码和规范**:遵循 Extjs 的编码风格和规范,提高代码质量。 - **示例代码**:提供实际的例子帮助理解如何创建自定义类。 ##### 3.2 MVC...

    ExtJs开始之旅

    你会了解到ExtJS是如何通过组件化的思想来构建页面,每个组件都有自己的生命周期、属性、方法和事件,这使得代码复用和维护变得简单。 接下来,"环境搭建"章节将指导你配置开发环境。这通常包括下载和安装ExtJS库,...

    SSH+Extjs框架

    SSH+ExtJS框架是Web应用开发中的一个常见组合,它结合了Struts2、Hibernate和Spring三大主流Java EE框架,并引入了ExtJS作为前端展示层技术。这个框架的使用大大提高了开发效率,提供了灵活的数据管理和用户界面交互...

    ajax-ext框架

    1. **组件化设计**:Ajax-ext继承了ExtJS的组件化思想,将页面元素封装成可复用的组件,如表格、表单、树形视图等,方便开发者快速构建UI。 2. **数据绑定**:Ajax-ext支持双向数据绑定,使得UI状态与后台数据同步...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...

    ExtAspNet_v2.3.2_dll

    -一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...

    轨道交通基坑智能化监测系统的架构设计.pdf

    轨道交通基坑智能化监测系统,简称智能监测系统,是基于计算机技术和数据库技术构建的一个软件系统,主要负责实时监测轨道交通基坑的变形情况,包括水平位移、竖向位移、支撑轴力和地表沉降等关键参数。该系统的架构...

    GoodProject Maven Webapp.zip

    JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页...

    生产调度管理信息系统解决方案.doc

    Spring 框架核心的思想就是建立一个 Java 对象的大工厂,用户只要给工厂一个指令,工厂就能将用户需要的对象根据配置文件组装好返还给用户。用户需要做的许多工作则可以写成简单的配置文件。JdbcTemplate 正是为了...

    php ajax网站浏览统计功能的简单实现第1/2页

    EXTJS是一个为开发富互联网应用(RIA)而设计的JavaScript框架,它提供了丰富的界面组件,并可与服务器端技术如PHP进行交互,从而构建出具有良好交互性和强大功能的前端界面。 8. RBAC基于角色的访问控制:在文章的...

Global site tag (gtag.js) - Google Analytics