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来做这个登录组件)
    (未完待续)

评论

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