转自:http://blog.sina.com.cn/s/blog_4d3d00180100rf4l.html
模板模式是设计模式中很重要的一个知识点,在面向对象设计中有着举足轻重的地位。
在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在起着重要作用了
比如我们来看如下代码
显示代码打印
1 Ext.Panel.superclass.onRender.call(this, ct, position);
什么意思?this就是panel的意思,Ext.Panel.superclass就是Ext.Container,这句代码的意思就是“panel,你给我去执行container里面的onRender方法”
那么在Ext.Container的onRender方法有存在着
显示代码打印
1 Ext.Container.superclass.onRender.call(this, ct, position);
这样的代码,这里的this还是指panel,不懂看上图,这里所有的this统统指panel对象,记住!意思是“panel,你再给我执行container父类里面的onRender方法”
接着又会出现“panel,你再给我执行container父类的父类里面的onRender方法”,一层层递归下去了
转自:http://blog.sina.com.cn/s/blog_4d3d00180100rf4l.html
分享到:
相关推荐
WPF渲染Render范例C#代码 WPF渲染Render范例C#代码 WPF渲染Render范例C#代码
主要介绍了element-ui table组件如何使用render属性的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
React渲染时间React钩子检查渲染所需的时间演示版安装yarn add react-render-time用法import React from "react"import useRenderTime from "react-render-time"const App = ( ) => { useRenderTime ( "App" ) ...
一个渲染框架render frame 正在完善当中。
OctaneRender 4渲染器是世界上第一个GPU-accelerated最快、无偏差、物理渲染器。这意味着Octane使用你的电脑的显卡来渲染真实感图像,而且超级快速。Octane的并行计算能力,您可以创建令人惊叹的效果。OctaneRender 4...
使用vue的render函数实现组件之间动态嵌套功能。文章链接:https://blog.csdn.net/qq_35134375/article/details/109159574
一个React的YouTube播放器组件,遵循render props模式
将json数据渲染成界面的vue组件库,是根据, 以及相关项目开发的vue3版本 详细参考 特性 将json数据渲染成界面 基于vue3开发 支持任何html组件和vue项目中引用的组件进行渲染,支持组件任何属性 支持将json数据特殊...
h 有3个参数,分别是:要渲染的元素 或 组件,可以是一个 html标签、 组件选项 或 一个函数(不常用),该参数为必填项。2. 对应属性的数据对象,比如组件
下面小编就为大家分享一篇基于vue2.0动态组件及render详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
Unity 渲染调试工具 renderDoc,安装成unity插件,通过unity直接调用, 查询渲染状态, 帮助优化渲染性能, 方便快捷。
先说明几点注意事项: 1、完成本教程需要的软件:建模Solidworks2006、渲染Maxwell Render 1.0Final、Maxwell的SW插件swMaxwell2006.dll、降噪处理Neat image 5.2 Plus。SW想必大家都有,Maxwell插件在那个介绍贴发...
vue+render 实现 动态加载组件 后面会用来做运营活动模板组件
将JSX和组件渲染为HTML字符串。 可在Node和浏览器中使用,使其可用于通用/同构渲染。 >>(@ CodePen) << 将JSX / VDOM渲染为HTML import render from 'preact-render-to-string' ; import { h } from '...
在react中,父组件的重新render会引发子组件的重新render,但是一些情况下我们会觉得这样做有些多余,比如: 父组件并未传递props给子组件 新传递的props渲染结果不变 class A extends React.Component { render...
twilight render v1.12黎明渲染器,破解版
这里主要介绍了ExtJS常用组件的样式修改,包括工具栏样式修改、菜单样式修改、树形菜单样式修改、表格样式修改、按钮样式修改等。
render-prop助手来渲染任何东西(函数,组件,元素等) 问题 您希望您的组件支持具有不同类型值的,例如 , (组件注入)或仅是简单的react元素。 这个解决方案 react-render-callback使您无需检测组件正在处理的...
speed_render, 浏览器渲染性能的案例
ol-ext (ol)的很酷的扩展。 是一组用于Openlayers的扩展,控件,交互,弹出窗口。 或。 关键字:故事图,时间轴控件,CSS弹出窗口,真棒字体,统计图图表(饼图/栏),图层切换器,控制栏,维基百科图层,图例...