Ext组件渲染render的全过程详述

古城微笑少年丶 2022-07-18 01:55 220阅读 0赞

模板模式是设计模式中很重要的一个知识点，我在模式总结——模板方法这篇文章中已有总结，在面向对象设计中有着举足轻重的地位。   
  
在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方法”，一层层递归下去了，呵呵