EXTJS编程思想

这个标题比较唬人,但是希望你能看下去.

从学到用,EXTJS这个工具已经在手上转了半年多了.从一开始的迷茫,到后来的抓狂,到现在的心静如水,确实走过一段难熬的学习路程.

EXTJS的效率一直都被关注着,效率问题也是所有web开发者面临的最大的难题.面对着EXTJS3.0超过600KB的体积,被无数人指责,唾弃.我觉得这些人根本就没有从问题的本质出发去看待这个工具.

我一直把EXTJS作为一个工具来看待,哪个工具好,我就用哪个.如果根据系统情况Jquery或者Prototype能有更好的表现,我是很乐意去使用这些AJAX框架的.一个工具的推出,必然有它的优点和缺点,只是要看你怎么取舍.EXTJS的效率慢,我承认,确实不如其他的一些AJAX框架.但是这个慢,是建立在其丰富的UI组件,统一的界面风格上的(当然,看多了也腻).就好比Hibernate,你能说Hibernate不好吗?但是,Hibernate的效率肯定不如JDBC直连.

或许很多人会说,我就是不用EXTJS,我看见它就不喜欢.说这种话的人实在太不负责任,自己没有时间去学,或者直接就是害怕去学它,也不愿意别人去学..我在此强烈谴责这些说话不负责任的人.这类人应该从思想素质上去提高.这是人性的问题,已经超出技术范围了,这种人发展到最后也就是孔子的那句话:”老而不新,视为贼也”.

关于EXTJS的效率提升.现在很多人在学习EXTJS,每个人的写法各不相同,我只是将我自己的一些经验说一下.

首先是面向对象的思想建立,EXTJS虽然是基于Javascript的,但是在对象上,写法确实跟Javascript不太一样.现在写EXTJS的有很多人没有按照正确的面向对象的思想去写,就例如一个简单的对象,有很多人是这样写:

Ext.ns(“Ext.ux.Panel”);

Ext.ux.Panel=function(){

return new Ext.Panel();

}

这不奇怪,我刚开始写的时候也是这样.并且EXTJS的很多底层也是这种方式来写的例如:

EXTUTIL.Observable = function(){

var me = this, e = me.events;

if(me.listeners){

me.on(me.listeners);

delete me.listeners;

}

me.events = e || {};

};

EXTUTIL.Observable.prototype = function(){

var filterOptRe = /^(?:scope|delay|buffer|single)$/, toLower = function(s){

return s.toLowerCase();

};

return {

//省略若干

}

}

但是,我们需要的不是底层写法,如果只是用底层写法,我感觉是浪费了作者的一片苦心,作者的用意是希望大家多使用继承,而不是自己去写一个对象.而通过查看它的源码可以很轻松的就发现,哦.原来EXTJS的对象是这样子出来的:

Ext.ns(“Ext.ux.Panel”);

Ext.ux.Panel=Ext.extend(Ext.Panel,{

});

是用的继承的方式在实现的.

了解了这一点,我们就开始寻思一下我们自己的对象应该怎么来写,就例如我们要写一个带Tree的ComboBox,我们可以这么来写:

Ext.ns(“Ext.ux.ComboTree”);

Ext.ux.ComboTree.Tree=Ext.extend(Ext.tree.TreePanel,{

initComponent:function(){

Ext.ux.ComboTree.Tree.superclass.initComponent.call(this,arguments);

//…

}

});

Ext.ux.ComboTree.ComboBox=Ext.extend(Ext.form.ComboBox,{

initComponent:function(){

Ext.ux.ComboTree.ComboBox.superclass.initComponent.call(this,arguments);

//…addevents and add plugin

}

});

Ext.onReady(function(){

new Ext.ux.ComboTree.ComboBox({

//properties

});

});

这样写的好处,可以自己去体会一下,这里不是在教大家怎么写代码,介绍这些,只是简单的打个过场而已.

通过上面的介绍,这就扯出一种概念:组件化编程.

那么好,什么是组件化编程?简单介绍就是,你现在在搭积木,里面每一块积木都是一个组件,这个组件被更新或者替换了之后,整个积木搭出来的东西不会变形,不会坍塌,因为每一块积木都是单独的一个个体.我们所要做的就是将这些个体组装起来而已.通过上面的继承,我们可以很方便的就写出一个个体.组件化编程是一个思想,而不是一门技术,这个思想可以用在任何地方.

好了,组件化的问题我们解决了.下一步就是如何来组装这些个体.我们应该通过什么方式来组装这些个体?

例如我们现在有一个应用,使用的是viewport做主界面,中间那块最大的区域是主工作区,通常是tabPanel或者是Panel,那么好,我点击菜单,应该在这个区域内出现我想要的那个页面,我们应该通过什么方式来加载页面?有人会说是Iframe,有人会说load,嗯这两种方式应该是用的最多的.首先看看Iframe

Iframe 内嵌框架,就是在你的页面里内嵌了一个页面,两个页面没有太大的关系,造成了一个什么困扰?对,主页面和内嵌页面的对象共享问题.当然,你可以说,我用window.iframe来获取内嵌框架的对象,通过iframe.parent来获得主页面的对象,但是如果是改变整体样式呢?很麻烦是不是?其实这些都不是重点,重点在,当主页面加载了一遍EXTJS库文件,样式表一堆乱七八糟的东西,当打开一个iframe的时候,我们为了界面风格统一,不得不又一次的去加载这些东西,效率没了,而且会在浏览器底部出现刷新的痕迹.我们需要的是无刷新.这显然不符合我们的要求.

OK,EXTJS为我们提供了一个load的函数,可以简单的通过

panel.load({

url:”other.html”,

scripts:true

});

在other.html里面我们可以这么写:

<div id=”renderMe” />

<javascript src=”……” />

来加载一个页面,这样做解决了IFrame最大的弊病,并且做到的无刷新,但是随之而来的一个问题又出现在了我们的面前,在被load上来的那个页面里,只有两个HTML标签,有必要新建一个页面吗?(还有一个BUG,就是会出现不报错,但是页面就是加载不上来的情况)当一个系统比较庞大的时候,你会发现,工程目录下充斥着大量的这种html.(我甚至还见过全部是JSP的).我们应该想办法去掉这些鸡肋载体.

那么好,我们在返回来看上面的组件化编程,在看看一开始介绍的继承,我们可以发现,既然EXTJS写对象这么简单,为何不把这些要加载的页面也做成对象呢?

有了这个想法,我们就来实现它.

首先,我们先建立一个模块,类似上面的ComboTree例子,每个页面都是继承自Panel的一个个体,当我们需要的时候就可以这样子来做:

当点击菜单的时候,触发事件,在事件里这么写:

//先获得菜单里的属性,根据这个属性来确定要加载那个对象

//这个属性可以自定义

Panel.removeAll();

Panel.add(new MyPage_1());

Panel.dolayout();

是不是很简单呢?但是,可能会有人说,如果我两个对象直接要做数据传输或者调用怎么办?这个问题好解决,你可以再写一个对象专门用于对象间的数据传输.具体写法按照自己的想法去写即可.在这里不是教大家写代码,而是想给大家一个思路而已.

Extjs为我们封装了很多东西,因此你Javascript基础即使不扎实,也能写出好的EXTJS程序出来,当然,EXTJS是基于Javascript来做的,你Javascript基础扎实了,这些东西很好理解,EXTJS的威力才能真正的得到发挥.

在后台上,我们应该尽量的与后台少交互.我曾经写过一个Tree,上峰交代说Tree的效率低下,两千个节点居然花费了两分钟的时间.我写了一个tree用递归的方式类似分页去加载数据,效率上却是得到了提高,但是,每一个Tree都要通过多次请求才能加载上来所有的节点,这显然不符合我们的要求.于是我就用Firebug测试了一下,发现,其实时间并不是浪费在于后台数据交互上,而是浪费在了每个节点的渲染上.于是我就写了段很简单的代码,思路就是一次性加载上来所有的节点,在appendNode的时候,我是一个一个append的,每次append之后,我都让程序暂停20毫秒,这样,就会出现一个不断在增加节点的tree,虽说两千个节点还是花费了不少时间,但是,这种做法使得用户能看到节点在不断的增加,而且加载上来的节点都可以使用,不至于像原始的那种,全部加载的时候就跟死机一样.

现在很多人在想,究竟是学EXTJS好还是学Flex或Silverlight好?我还是那句话,这些东西只是工具而已,不是说你学会了EXTJS就学不会Flex了,你可以结合他们的优点来做,就比如Flex的报表很漂亮,并且提供了与Javascript交互的方法,我们完全可以结合两者的优点来完成我们的应用.我最近打算用Flex结合Extjs做一个监控,使用FMS媒体服务器,感觉两者结合应该不是大问题.

最后,希望大家多努力.EXTJS只是我们人生经历中经过的一段路而已.没必要抱着它死磕.当你觉得你可以摆脱Google和百度的时候,应该适当接触一点其他的知识,RIA的路还很长,EXTJS只是一个起步.我们的目光不会仅仅局限于某一个工具.

www.dojochina.com 有很多的EXTJS的高手(还有很多其他技术方面的),遇到问题想问人,请阐述清楚你的错误原因,并且在问问题之前先问一下自己:我Google了吗?我看API了吗?我真的认真去思考了吗?当这些都得不到答案后,我们很乐意接受你的提问.毕竟,回答问题也是自我提升的一种方式.希望当你成为某方面的专家后,也能共享出你的学习经验.祖国的IT业不靠马云,不靠丁磊.他们只是商人,祖国的IT业最终要靠你,我来实现.印度阿三,我们势必要超越.我相信我们能行.

 

来自:www.dojochina.com

评论

1 楼 hyhai7 2011-11-29  

时至今日，我想说，你给的域名挂了。... ...