Ext组件渲染render的全过程详述
来源:互联网 发布:日系泳衣 知乎 编辑:程序博客网 时间:2024/05/17 10:55
模板模式是设计模式中很重要的一个知识点,我在模式总结——模板方法这篇文章中已有总结,在面向对象设计中有着举足轻重的地位。
在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方法”,一层层递归下去了,呵呵
- 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组件集成后重新渲染的解决方法记录
- [原创]react native 注意事项
- 上下文ServletContext的使用,记录网站的登录人数统计
- ubutnu14 安装gtx1080
- 使用Genymotion遇到的trouble
- CATIA中关于“定位草图”的宏问题
- Ext组件渲染render的全过程详述
- abstract class和interface有什么区别?
- 给定一颗二叉树,以及其中的两个node(地址均非空),要求给出这两个node的一个公共父节点,使得这个父节点与两个节点的路径之和最小。
- ads LineCalc中基板参数
- 多线程在项目中的使用
- c语言开源项目之模拟键盘
- jquery中each的返回false问题
- 快速排序-Java
- android6.0 Activity(五) Activity的测量(Measure)、布局(Layout)和绘制(Draw)