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

EXTJS组件化(四)---减少你的代码

阅读更多
代码量,BUG和维护成本是水涨船高的关系,这点应该不能被否认的,因此如何的减少代码的编写量成了很多人努力的一个方向.当然,这肯定不是为了偷懒

减少代码量的编写自然是对象的重复利用,以前所写的组件化,它确实是一个独立的对象,可以拿来重用,但是,写到最后会发现,这些组件往往只是使用了一次而已,而且根据需求的不同会发现这个组件根本就无法被重新使用了(定制性太强)

于是,我们就需要拆分这个组件,看看这些组件中都有哪些东西是经常被用到的.

比如导航栏,一排导航十多个按钮,他们都是按钮,但是他们的handler虽然都是切换显示页面,但是每个按钮所负责的页面却是不同的,曾经有人问过,我是不是要为每一个按钮都编写一个handler处理函数?

Ext.onReady(function(){
	var panel = new Ext.Panel({
		renderTo:Ext.getBody(),
		border:false,
		tbar: [{
		    xtype: 'buttongroup',
		    columns: 6,
		    title: '客户管理',
//		    defaults:{xtype:"xmenubutton"},
		    items: [{
		        text: '客户信息',
		        scale: 'large',
		        rowspan: 2, 
		        handler:function(){
		        	//TODO 处理
		        },
		        iconCls: 'menuDefault_32',
		        iconAlign: 'top'
		    },{
		        text: '新增客户',
		        scale: 'large',
		        rowspan: 2, 
		        handler:function(){
		        	//TODO 处理
		        },
		        iconCls: 'menuDefault_32',
		        iconAlign: 'top'
		    },{
		        text: '客户通讯录',
		        scale: 'large',
		        rowspan: 2, 
		        handler:function(){
		        	//TODO 处理
		        },
		        iconCls: 'menuDefault_32',
		        iconAlign: 'top'
		    }]
		}]
	});
});

这样写起来,一旦导航多了,就比较麻烦了,代码显得很乱,不好维护,怎么办?
也许有人会这么去写它:
Ext.onReady(function(){
	function onBtnClickHandler(btn){
		switch (btn.text){
			case "客户信息":
				//TODO
				alert("aaa");
				break;
			case "新增客户":
				//TODO
				break;
			case "客户通讯录":
				//TODO
				break;
		}
	}
	var panel = new Ext.Panel({
		renderTo:Ext.getBody(),
		border:false,
		tbar: [{
		    xtype: 'buttongroup',
		    columns: 6,
		    title: '客户管理',
		    items: [{
		        text: '客户信息',
		        scale: 'large',
		        rowspan: 2, 
		        handler:onBtnClickHandler,
		        iconCls: 'menuDefault_32',
		        iconAlign: 'top'
		    },{
		        text: '新增客户',
		        scale: 'large',
		        rowspan: 2, 
		        handler:onBtnClickHandler,
		        iconCls: 'menuDefault_32',
		        iconAlign: 'top'
		    },{
		        text: '客户通讯录',
		        scale: 'large',
		        rowspan: 2, 
		        handler:onBtnClickHandler,
		        iconCls: 'menuDefault_32',
		        iconAlign: 'top'
		    }]
		}]
	});
});

这样看起来就好很多,实现了业务与现实的分离,但是按钮多了,还是很郁闷,要写很多switch/case,

如何省去这些步骤呢?
我们发现他们的handler有一个共同点就是,都是负责切换显示页面的(也可能是弹出Window).
那么有这点相同就可以了,我直接就贴上来我的处理方法吧:
先写一个全局的对象,用于处理这些按钮如下:



Ext.namespace("Crm.Control.ConstEvent");
/**
 * 核心控制器
 * @type 
 */
Crm.Control.ConstEvent = {
	isInit:false,
	//初始化,主要是为该对象提供一个可以切换的容器,相当于Iframe
	init:function(panel){
		this.panel = panel;//当做IFrame来使
		this.isInit = true;
	},
	/**
	 * 切换主容器显示的内容函数(就是初始化传递进来的Panel)
	 * @param {} obj 一个字符串(具体是什么字符串请看下面的例子)
	 */
	changePanel:function(obj){
		//如果已经初始化
		if (this.isInit) {
			//由于时间关系,我这里就不判断是否已经存在相同的对象了,按理来讲应该判断一下传递进来的obj是否与
			//当前显示的obj是一个东西,如果是一个东西则return,至于如何判断,还是等下次再说吧
			try{
				this.panel.removeAll();//先移除先前加载进来的Panel(注意释放内存,此处省略)
			}catch(e){
				//EXTJS自带报表切换时会出现异常,具体原因不明,仅在IE下会出现此异常
			}finally{
				this.panel.add(eval(obj));//eval menuButton传递进来的对象(实际是个字符串具体看下面的例子)
				this.panel.doLayout();//调用布局函数,这样才会显示你刚刚添加进来的组件
			}
		}
	},
	/**
	 * 如果按钮指向的对象是window则使用此函数
	 * @param {} obj 一个字符串
	 */
	showWindow:function(obj){
		if (Ext.getCmp(obj.id)) {
			Ext.getCmp(obj.id).show();
			return;
		}
		if (this.isInit) {
			if(Ext.getCmp(obj.substring(4,obj.length-2))){
				Ext.getCmp(obj.substring(4,obj.length-2)).show();
				return;
			}
			eval(obj).show();
		}
	}
};


下面是所有MenuButton的父类:
Ext.namespace("Ext.ux.MenuButton.Button","Ext.ux.MenuButton.SplitButton");
Ext.ux.MenuButton.Button = Ext.extend(Ext.Button,{
	pageObject:"",//此按钮将要指向的那个模块(例如"new AAA.bbb.ccc()")
	isWindow:false,//此按钮指向的那个模块是否是一个window
	handler:function(btn){
		if (btn.isWindow) {
			Crm.Control.ConstEvent.showWindow(btn.pageObject);//如果按钮所包含的实体类是个window,则调用window展示函数
			return;
		}
		if (this.pageObject!="") {
			Crm.Control.ConstEvent.changePanel(btn.pageObject);//如果按钮所包含的实体类是个页面,则调用展示Panel的函数
		}
	}
});
Ext.reg("xmenubutton",Ext.ux.MenuButton.Button);
Ext.ux.MenuButton.SplitButton = Ext.extend(Ext.SplitButton,{
	pageObject:"",
	handler:function(btn){
		if (btn.isWindow) {
			Crm.Control.ConstEvent.showWindow(btn.pageObject);
			return;
		}
		if (this.pageObject!="") {
			Crm.Control.ConstEvent.changePanel(btn.pageObject);
		}
	}
});
Ext.reg("xsplitbutton",Ext.ux.MenuButton.SplitButton);

那么我们最上面的Menu就可以这么去写它
var panel = new Ext.Panel({
		renderTo:Ext.getBody(),
		border:false,
		tbar: [{
		    xtype: 'buttongroup',
		    columns: 6,
		    defaults:{xtype:"xmenubutton"},
		    title: '客户管理',
		    items: [{
                text: '客户信息',
                scale: 'large',
                rowspan: 2, 
                pageObject:"new Crm.Module.Client.BaseInfo()",//一个对象,用于传递给所谓的"核心控制器",就是上面的全局变量
                iconCls: 'menuDefault_32',
                iconAlign: 'top'
            },{
                text: '新增客户',
                scale: 'large',
                rowspan: 2, 
                isWindow:true,
                pageObject:"new Crm.Module.Client.NewClient()",
                iconCls: 'menuDefault_32',
                iconAlign: 'top'
            },{
                text: '客户通讯录',
                scale: 'large',
                rowspan: 2, 
                pageObject:"new Crm.Module.Client.AddList()",
                iconCls: 'menuDefault_32',
                iconAlign: 'top'
            }]
		}]
	});

这样一来,我们就可以少写很多代码了.

最近很忙,没时间来JE逛,所写的东西基本上是代码多,话少,写的比较乱....没办法...为了能好好的过年...老命豁出去了,对不住了.

2009年11月11日2:14:20 北京
3
0
分享到:
评论
3 楼 andy_ghg 2009-11-29  
cqhydz 写道
实话,后面哪个全局对象处理还不如第二种简结明了

嗯,有点,不过全局对象来处理的话弹性比较大
2 楼 cqhydz 2009-11-29  
实话,后面哪个全局对象处理还不如第二种简结明了
1 楼 energykey 2009-11-13  
朋友你QQ多少,我的QQ304275958验证:javaeye民工

我也是培训出来的,08年开始工作的。

我们经历很相似,加一个互相学习互相勉励。

我现在也在搞EXT,还没写过自己的组件水平。

相关推荐

    extJs2.0+spket-1.6.11.zip

    5. **模板和样本**:IDE可能提供了一些预定义的模板和代码样本,方便开发者快速创建常见的ExtJS组件或布局。 **配合使用** 将Spket 1.6.11与ExtJS 2.0结合,开发者可以在一个集成的环境中高效地编写和测试ExtJS应用...

    ExtJS实用开发手册-快速入门

    ##### 4.5 ExtJS组件的事件处理 - **事件管理**:事件统一由`Ext.EventManager`对象管理,与浏览器W3C标准事件对象`Event`相对应,Ext封装了一个`Ext.EventObject`事件对象。 - **事件绑定**:Ext支持多种方式来...

    ExtJs代码自动生成

    它提供了一整套组件化的用户界面元素,并支持丰富的数据绑定和交互模式。在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行...

    ExtJS 组件扩展

    综上所述,正确理解和运用ExtJS组件扩展的两个层次,不仅能够帮助开发者构建高效稳定的Web应用,还能显著提升开发效率和代码质量。通过避免常见的错误,合理规划组件扩展的层次,并遵循最佳实践,可以有效促进项目的...

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    EXTJS是一种基于JavaScript的前端框架,它提供了丰富的组件库,用于构建富客户端应用程序。这个压缩包文件的内容看起来是一个完整的EXTJS项目,包含了数据库交互、动态树结构和菜单功能,并且集成了SpringMVC后端...

    EXTJS Javascript HTML 代码格式化 工具

    在编写EXTJS代码的过程中,保持代码的整洁和规范是至关重要的,这有助于提高代码可读性,减少错误,并便于团队协作。因此,有一个良好的代码格式化工具对于EXTJS开发者来说是必不可少的。 在JavaScript和HTML开发中...

    extjs6.2 admin-dashboard模板

    - 数据展示:提供了各种图表组件,如饼图、柱状图、线图等,用于数据可视化。 - 表格操作:具有排序、筛选、分页等功能,支持远程数据加载。 - 表单元素:包含了多种表单输入控件,如文本框、下拉框、日期选择器...

    extjs-620-docs.rar完全离线版

    ExtJS 的核心特性包括组件化设计、数据绑定、丰富的UI组件、强大的表单处理、灵活的布局管理以及响应式设计。在6.2.0 版本中,这些方面可能有所增强和完善: 1. **组件系统**:ExtJS 采用组件化开发模式,允许...

    extjs 3.1 组件 使用

    这些工具能提高开发效率,减少手动编写代码的时间。 总之,掌握ExtJS 3.1组件的使用,不仅需要熟悉其组件模型、样式系统和JavaScript API,还需要理解如何与后端(如JSP)进行数据交互,以及利用源码和工具提升开发...

    Extjs代码编辑工具

    通过使用这样一个定制化的ExtJS代码编辑工具,开发者可以更高效地进行ExtJS应用的开发,减少出错率,提升开发体验。记得按照提供的安装说明进行操作,确保工具能够正确地安装和运行。在使用过程中,如果遇到任何问题...

    EXTJS可视化网页编译器

    1. **可视化设计**:该编译器提供了拖放功能,用户可以直接在界面上选择和放置EXTJS组件,如按钮、表格、面板等,无需编写任何HTML或JavaScript代码。这种设计方式使得非程序员也能快速搭建网页界面。 2. **组件库*...

    ExtJS-Chinese-docunment

    8. **图表组件**:ExtJS的图表组件功能强大,可以创建各种复杂的图表,如柱状图、折线图、饼图等,适合数据可视化需求。 9. **社区支持**:作为一款成熟的开源框架,ExtJS拥有庞大的开发者社区,这意味着丰富的插件...

    Struts2 Spring2.5 Hiberante3.3.2 +ExtJS(Struts2-json)做的CRUD

    开发者可以通过这个DEMO学习到如何在实际项目中运用Struts2的Action和Result,Spring的依赖注入和事务管理,Hibernate的ORM机制,以及ExtJS的组件和数据绑定。同时,它也揭示了现代Web开发中前后端分离的趋势,通过...

    ExtJs-3.2.0.rar

    ExtJS强调组件化开发,每个UI元素都可以看作一个独立的组件,可以组合使用构建复杂的用户界面。这种模块化的设计思路使得代码复用性高,减少了工作量。 8. **数据绑定** 数据绑定是ExtJS的一个强大特性,它允许...

    extjs可视化设计器

    该设计工具提供了直观的拖放界面,用户可以通过选择不同的EXTJS组件(如面板、表格、按钮等)并调整它们的属性来设计页面布局。这种设计方式极大地简化了EXTJS应用的开发流程,尤其是对于那些不熟悉EXTJS底层代码...

    extjs-4.1.1完整压缩包

    1. **组件化开发**:EXTJS 4.1.1 强调组件化编程,允许开发者通过组合各种UI组件(如表格、面板、按钮等)来构建复杂的用户界面。这些组件具有自包含的样式和行为,易于重用和维护。 2. **布局管理**:EXTJS 提供了...

    Extjs教材-完整版

    #### 四、ExtJS与其他JavaScript库的兼容性 - **适配器(Adapters)**:ExtJS提供了适配器机制,使得它可以与其他JavaScript库(如jQuery)无缝协作。这对于希望同时利用多个库优势的开发者来说非常有用。 #### 五...

    extjs 可视化设计器 汉化版

    设计师可以快速创建复杂的表格、表单、树形结构和其他EXTJS组件,而无需手动编写大量的HTML和JavaScript代码。此外,这款工具还支持代码与设计视图之间的无缝切换,便于高级开发者对生成的代码进行微调。 免安装版...

    ExtJS 可视化开发工具大全

    GuiDesigner提供了直观的拖放界面,支持创建、编辑和预览ExtJS组件,使开发者能够快速构建用户界面。它包括了对多种组件的支持,如表格、面板、按钮等,并能自定义布局和样式。 3. **GuiDesigner版本** - Gui...

    extjs代码提示

    通过这些配置,开发者可以更快地学习和掌握ExtJS的API,减少编写代码时的错误,提高开发速度。同时,对于团队协作和代码一致性也有积极的促进作用。在实际开发过程中,配合Spket的其他功能,如代码格式化和错误检查...

Global site tag (gtag.js) - Google Analytics