Ext组件渲染render的全过程详述
来源:互联网 发布:java游戏开发教程 编辑:程序博客网 时间:2024/05/02 17:30
模板模式是设计模式中很重要的一个知识点,我在模式总结——模板方法这篇文章中已有总结,在面向对象设计中有着举足轻重的地位。
在Ext中更是发挥的淋漓尽致,为什么这么说呢?Ext中的组件有着很深的继承关系,很多方法都有着重复,而且不仅
是代码上的重复,更多的是流程上的重复
比方说,Ext.Panel吧,将一个Panel显示在浏览器中,其过程叫做render(渲染)。有这么几道工序:
第一、触发”beforeRender”事件
第二、得到这个Panel的父节点(针对DOM来说),即容器,也就是供Panel入住的那个容器
第三、设置rendered=true
第四、调用onRender方法,这步是最重要的,也就是如何将组件显示在浏览器上,涉及到很多流程,一会详解
第五、设置这个panel的css
第六、触发”render”事件,指的是当render完成后,触发的事件
第七、调用aferRender,这步和第四步一样,是很重要的流程之一
第八、看看要不要将这个panel隐藏或者失效,如果用户设置了hidden或者disable
第九、设置这个panel的位置,也就是doLayout,布局
再来,Ext.Panel的子类,Ext.TabPanel,也有这么几道工序:
第一、触发”beforeRender”事件
第二、得到这个Panel的父节点(针对DOM来说),即容器,也就是供Panel入住的那个容器
第三、设置rendered=true
第四、调用onRender方法,这步是最重要的,也就是如何将组件显示在浏览器上,涉及到很多流程,一会详解
第五、设置这个panel的css
第六、触发”render”事件,指的是当render完成后,触发的事件
第七、调用aferRender,这步和第四步一样,是很重要的流程之一
第八、看看要不要将这个panel隐藏或者失效,如果用户设置了hidden或者disable
第九、设置这个panel的位置,也就是doLayout,布局
第十、设置activeTab,也就是激活哪个Tab面板
仅仅多了第十个步骤。
其他例子不举了,都是仅仅在最后几个步骤上不同而已,大家要说了,这个那是什么模板模式,不就是最简单的继承吗?
错了,继承指的是属性和方法的继承,但现在是一个流程,一个系列的工序”继承”,这就是模板模式了。
我们来看,应用了模板模式后的工序
Ext.TabPanel只有2道工序了
第一、完成Panel渲染的工序
第二、设置activeTab,也就是激活哪个Tab面板
Ext.Panel一道工序
第一、完成Ext.Container的渲染工序
Ext.Container有2道工序
第一、完成BoxComponent的渲染工序
第二、设置这个panel的位置,也就是doLayout,布局
Ext.BoxComponent一道工序
第一、完成Ext.Component的渲染工序
Ext.Component八道工序
第一、触发”beforeRender”事件
第二、得到这个Panel的父节点(针对DOM来说),即容器,也就是供Panel入住的那个容器
第三、设置rendered=true
第四、调用onRender方法,这步是最重要的,也就是如何将组件显示在浏览器上,涉及到很多流程,一会详解
第五、设置这个panel的css
第六、触发”render”事件,指的是当render完成后,触发的事件
第七、调用aferRender,这步和第四步一样,是很重要的流程之一
第八、看看要不要将这个panel隐藏或者失效,如果用户设置了hidden或者disable
那么在Ext是如何让这些流程在不同类之间自由跳转的呢?这就是大名鼎鼎的call和apply在起着重要作用了
比如我们来看如下代码
Ext.Panel.superclass.onRender.call(this, ct, position);
什么意思?this就是panel的意思,Ext.Panel.superclass就是Ext.Container,这句代码的意思就是“panel,你给我去执行container里面的onRender方法”
那么在Ext.Container的onRender方法有存在着
Ext.Container.superclass.onRender.call(this, ct, position);
这样的代码,这里的this还是指panel,不懂看上图,这里所有的this统统指panel对象,记住!意思是“panel,你再给我执行container父类里面的onRender方法”
接着又会出现“panel,你再给我执行container父类的父类里面的onRender方法”,一层层递归下去了,呵呵
文章出处:http://hwb198229.javaeye.com/blog/549946
- Ext组件渲染render的全过程详述
- Ext组件渲染render的全过程详述
- Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述
- Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述
- Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述
- Ext组件渲染render的全过程
- Ext组件渲染render的全过程
- Ext组件渲染render的全过程
- Ext组件渲染render的全
- EXT render 渲染过程
- EXT render 渲染过程
- 刷新组件RENDER(重新渲染)的三种方式详解
- RENDER渲染机制的局限:无法渲染动态添加的子组件
- vuejs的render渲染函数
- 【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解
- 【React Native】刷新组件RENDER(重新渲染)的三种方式详解
- Django的render(模板渲染)机制
- Fusioncharts与Ext组件集成后重新渲染的解决方法记录
- #pragma comment()扩展
- unetbootin usb 光盘启动 linux
- 改mdb为asp所带来的灾难
- POJ JOJ RAILS 栈的应用
- ERP项目文档--想到用时方恨少
- Ext组件渲染render的全过程详述
- 腾讯WebQQ聊天架构分析1
- 真正的程序员,请你站出来
- tar命令
- 对软件危机的看法
- webservice 调试中遇到的问题
- PhoenixII 手机脚本系统 (附带虚拟机源码, 使用教程和脚本完整例子)
- 男人。。。女人。。。经典语录
- 无聊的网站