您的位置:首页 > Web前端

组件的生存周期Component Life Cycle

2008-04-23 18:09 429 查看
组件的生存周期Component Life Cycle

一般来说,组件的对象架构满足了“能运行(Just Works)”这一基本要求。架构在设计上已是调控好了大多数组件是怎样处理的,而且对最终开发者是透明的。不过,若对组件对象扩展,或是有些需要制定的地方,就要利用一定的时间去实现。深入理解组件对象的生存周期会是非常好的帮助。下面的内容就是对基于组件的每个类,一个周期内各个重要阶段作出解释:

初始化Initialization

1. 配置项对象生效了
The config object is applied.
组件对象的构造器会把全部的配置项传入到其子类中去,并且进行下列所有的步骤。
2. 组件的底层事件创建了
The base Component events are created
这些事件由组件对象负责触发。事件有enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy (参阅Component API文档完整的内容)。
3. 组件在组件管理器里登记了
The component is registered in ComponentMgr
initComponent 这方法总是使用在子类中,就其本身而论,该方法是一个模板方法(template method),用于每个子类去现实任何所需的构造器逻辑(any needed constructor logic)。首先会创建类,然后组件对象各层次里面的每个类都应该调用superclass.initComponent。通过该方法,就可方便地实现(implement),或重写(Override)任意一层构造器的逻辑。
4. 状态感知进行初始化(如果有的话)
State is initialized (if applicable)
如果组件是状态感知的,其状态会进行刷新。
5. 加载好插件(如果有的话)
Plugins are loaded (if applicable)
如果该组件有指定任何插件,这时便会初始化。
6. 渲染好插件(如果有的话)
The component is rendered (if applicable)
如果指定了组件的renderTo 或 applyTo配置属性,那么渲染工作就会立即开始,否则会延时渲染,即等待到显式控制显示,或是其容器告知其显示的命令。

渲染过程 Rendering

1. 触发beforerender事件 The beforerender event is fired
这是个可取消的事件,指定的handler可阻止组件进行渲染
2. 设置好容器 The container is set
如果没有指定一个容器,那么将使用位于DOM元素中组件的父节点作为容器。
3. 调用onRender方法 he onRender method is called
这是子类渲染最重要的一个步骤,由于该方法是一个模板方法(template method),用于每个子类去现实任何所需的渲染逻辑(any needed render logic)。首先会创建类,然后组件对象各层次里面的每个类都应调用superclass.onRender。通过该方法,就可方便地实现(implement),或重写(Override)任意一层渲染的逻辑。

4. 组件是“隐藏”状态的 The Component is "unhidden"
默认下,许多组件是在CSS样式类如"x-hidden"设置隐藏的。如果 autoShow所配置的值为true,这时就不会有这个"hide"样式类作用在该组件上
5. 自定义的类、样式生效了 Custom class and/or style applied
一切组件的子类都支持cls和style 两种特殊的配置属性,分别用于指定用户自定义的CSS样式类和CSS规则。推荐指定cls的方法来制定组件及其各部分的可视化设置。由于该样式类会套用在组件makeup最外的一层元素,所以标准CSS规则会继承到组件下任何子元素的身上。
6. 触发render事件 The render event is fired
这是组件通知成功渲染的一个步骤。这时,你可肯定认为组件的DOM元素已经是可用的了。如果尝试在组件之前访问组件,会报告一个不可用的错误。

7. 调用了afterRender方法 The afterRender method is called
这是另外一个实现或重写特定所需的“后渲染”逻辑的模板方法。每个子类应调用superclass.afterRender.
8. 组件被隐藏或禁用(如果有的话) The Component is hidden and/or disabled (if applicable)
配置项hidden和disabled到这步生效
9. 所有状态感知的事件初始化(如果有的话) Any state-specific events are initialized (if applicable)
状态感知的组件可由事件声明特殊加载和保存状态。如支持,加入此类的事件。

销毁过程 Destruction

1. 触发beforedesroy事件 The beforedestroy event is fired
这是个可取消的事件,指定的handler可阻止组件被销毁。
2. 调用了beforeDestroy方法 The beforeDestroy method is called
这是另外一个实现或重写预定销毁逻辑的模板方法。每个子类应调用superclass.beforeDestroy。
3. 元素及其侦听器被移除 Element and its listeners are removed
若组件是渲染好的,所属的元素的事件侦听器会被移除和元素本身会从DOM那里移除。
4. 调用了onDestroy方法 The onDestroy method is called
这是另外一个实现或重写特定所需的“后销毁”逻辑的模板方法。每个子类应调用superclass.onDestroy。注意容器类(Container class,和一切容器的子类)提供了一个默认的onDestroy实现,自动遍历其items集合里的每一项,分别地执行子组件身上的destroy方法。
5. 在组件管理器中撤销组件对象的登记 Component is unregistered from ComponentMgr
I使得不能再从Ext.getCmp获取组件对象
6. 触发destroy事件 The destroy event is fired
这是组件成功销毁的一个简单通知。此时组件已经DOM中已是没有的了
7. 组件上的事件侦听器被移除 Event listeners on the Component are removed
组件本身可允许从所属的元素得到事件侦听器。如有的话,连同删除。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: