Ext源码分析之模板模式解说——Ext组件渲染render的全过程详述

xiaoxiao2026-03-16  9

模板模式是设计模式中很重要的一个知识点,我在模式总结——模板方法这篇文章中已有总结,在面向对象设计中有着举足轻重的地位。 在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 下面把流程图展示出来(配合上onRender和afterRender) 我们来看下图 那么在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方法”,一层层递归下去了,呵呵 仔细的朋友去看container的时候会发现没有onRender方法,不错,代码里确实没有,但是执行起来之后就有了,不懂?看我的 Ext源码分析源码分析之Ext的继承模式解说
转载请注明原文地址: https://www.6miu.com/read-5045991.html

最新回复(0)