Ext组件渲染render的全过程详述
模板模式是设计模式中很重要的一个知识点,我在模式总结——模板方法这篇文章中已有总结,在面向对象设计中有着举足轻重的地位。
在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的全过程详述相关推荐
- 把Fusioncharts封装成Ext组件的思路 及实现
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里 然 ...
- 把Fusioncharts封装成Ext组件的思路
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里 然 ...
- extlink.php,ExtJs 学习笔记基础篇 Ext组件的使用_extjs
昨天刚接触到Extjs,简单写了篇学习笔记,今天继续. 天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要 ...
- 不挂载 组件渲染_让你的 React 组件性能跑得再快一点「实践」
作者:天泽 转发链接:https://www.zoo.team/article/react-render 性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配 ...
- react避免子组件渲染_如何与React一起使用正确的方法来避免一些常见的陷阱
react避免子组件渲染 One thing I hear quite often is "Let's go for Redux" in our new React app. It ...
- React memo使用解决高频组件渲染问题
问题:添加一个新的元素,导致所有子组件重复渲染问题. 期望:子组件不要频繁的渲染,只渲染新增或发生变化数据的子组件. 解决方案:使用memo包囊子组件. 代码: 子组件Cat.js: import R ...
- vue渲染大量数据如何优化_加速vue组件渲染之性能优化
背景 平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { da ...
- [react] 自定义组件时render是可选的吗?为什么?
[react] 自定义组件时render是可选的吗?为什么? 根据文档描述,class组件的render函数是必选的:The render() method is the only required ...
- Windows系统使用minGW+msys 编译ffmpeg 0.5的全过程详述
一.环境配置 1.下载并安装 MinGW-5.1.4.exe (http://jaist.dl.sourceforge.net/sourcef - -5.1.4.exe),安装时选中 g++, min ...
- iView中Table组件通过render属性渲染自定义组件
// render函数的参数h代表creatElement函数,参数o代表三个属性值,具体查看iView文档 render(h,o) { // h函数的第一个参数代表要渲染的元素,可以是标签名称也可以 ...
最新文章
- 030_jQuery Ajax的get方法
- c语言或者cpp中位运算的技巧
- Git与Github操作指南(入门)
- CUDA下在Host端分配的几种内存模式
- 计算机视觉--GIST特征及其MATLAB代码实现
- 互联网1分钟 |1109
- 深入学习jQuery的三种常见动画效果
- VUE第三篇 入门后续
- 为什么你没有选择xamarin?
- java回显怎么实现_Java实现简单的server/client回显功能
- 做业务千万不要把鸡蛋放在一个篮子里
- 百度网盘图片直链的php解析代码
- 解决办法:E: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)
- word多级标题下一级和上一级没有关联上
- 原生Js从0开始实现一个链家网地图画圈找房功能
- 应用树莓派GPIO完成智能红绿灯系统
- uni-app,文本实现展开、收起全文
- 限制input 输入框只能输入纯数字/数字/中文/英文
- 前端进阶(12) - css 的弱化与 js 的强化
- 验证码机制之验证码重复使用