Ext的组件模型印象

组件模型在Ext1.x中已经引入了,但在框架中并没有得到全面的整合。2.0以后组件得到了很大的提高和改进,成为了框架的里最基础的一个类。组件对象模型为组件的创建、渲染、事件处理、状态管理和销毁提供了统一的模型。Ext内置的组件都具备以上这些特征。

  1. 创建 组件会将一个基础构造器连同配置传入到子类中。函数initComponent用于提供制定的构造器逻辑,只要在继承链上的某一个子类实现便可,所有的组件都遵从这种方式。此时的子类就可在initComponent中对其设置相关的属性,实现具体的功能。
  2. 渲染 2.0中,每个组件都支持延时渲染(lazy rendering),又称按需渲染(on-demand rendering)。渲染的调控一般是为你自动设置完好的。即使如此,你亦可以通过的beforerender和render事件控制渲染发生、结束,达到最为灵活的自定义调控。
  3. 销毁 每一个组件具有destroy的函数,当组件不再需要时,Ext就负责组件的结束调控,如自动垃圾回收和摧毁组件元素。当然,销毁亦提供相应的事件,如beforedestroy和destroy可按照实际的情况作出逻辑处理。
  4. 状态管理 组件内建设置和获取状态(State)的功能,只要让全局对象StateManager和一个状态 Provider都初始化好,那么多数的组件都具有自动状态管理的能力。
  5. 常规行为统一接口 一般常规的行为如隐藏、显示和激活、禁用均是组件的基本特性。如需要,这些都可由子类去重写或制定。
  6. 可调用 Ext的每一个组件在创建的时候就会由组件管理器登记注册,即你可随时获取任何组件,只需调用Ext.getCmp('id')。
  7. 支持插件 现在任何的组件可以通过插件的形式来扩展了。插件实质是带有init方法的一种类。该方法会有一个单独的参数(类型为Ext.Component)传入到其中。插件可通过组件的plugins配置项指定。当组件创建时,如果有插件可用,组件就会调用每个插件上的init方法,将自身的引用作为参数传入。 每个插件运行之后可调用组件的方法或响应组件的事件以实现自身的功能。

组件模型的统一主要是基于OO对象模型的,OO模型提供了类型继承机制,使得从组件基类扩展的所有子类都能够拥有统一的特征(如事件订阅的能力)。而具体每一个特征都和所有公共的实用类不可分割,比如组件的可调配性是基于管理容器实现的,而容器的应用在整个框架中随处可见,再比如事件能力又和事件模型的定义不可分割,事件模型中事件对象和订阅对象的管理也要依赖于容器对象。其实在Javascript中最简单而基础的容器莫过于对象本身(可以认为数组也是对象的一种包装)。

组件生命周期

  1. 传入配置调用
  2. 底层事件创建
  3. 组件注册
  4. 状态感知
  5. 加载插件
  6. 渲染
    1. 触发beforerender事件 The beforerender event is fired。这是个可取消的事件,指定的句柄(handler)可阻止组件进行渲染
    2. 设置好容器 The container is set
    3. 如果没有指定一个容器,那么将使用位于DOM元素中组件的父节点作为容器。
  7. 销毁
    1. 继续

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

eclipse中断点调试debug

几乎没有用过debug模式,每次想要知道结果都是sysou一下。记得曾经问乱码问题,jfinal说打断点调试看在哪里出错。简单记下普通调试。 1.在需要查看的地...

3408
来自专栏xiaoxi666的专栏

【开源项目】将图片转换为字符画

请移步Github仓库:https://github.com/xiaoxi666/Img2AsciiVision

1411
来自专栏vue学习

24、商品列表页之数据渲染和传值

(1)data中定义一个list对象 (2)将res.data.goodslist赋值给list (3)我们将商品图片、文字描述、价格、折扣等等信息传给子组...

1541
来自专栏Android自学

给WordPress文章添加类似说说的状态样式

1863
来自专栏章鱼的慢慢技术路

Go语言实践_实现一(服务器端)对多(客户端)在线聊天室

运用Go语言中的goroutine和通道实现一个简单的一个服务器端对多个客户端的在线聊天

1793
来自专栏互联网杂技

JavaScript定时器:setTimeout与setInterval 定时器与异步循环数组

深入了解一下 关于JavaScript定时器的知识; setTimeout与setInterval简述 setTimeout与setInterval使用方法基...

3946
来自专栏林德熙的博客

C# 从零开始写 SharpDx 应用 初始化dx修改颜色

本文来告诉大家如何在上一篇博客创建的窗口里面使用 Sharpdx 初始化,然后设置窗口颜色。

2131
来自专栏数据库

基于关系型数据库的App Inventor网络应用(3)

第三节 初识Node-RED 开发环境简介 如图8所示,整个浏览器窗口被划分为四个部分: (1) 顶部黑色通栏,左侧显示Node-RED的LOGO,右侧显著位置...

3427
来自专栏Golang语言社区

Golang语言社区--golang 进度下载文件

大家好,我是Golang社区主编彬哥,本篇给大家转载一篇关于文件下载相关的文章。

5016
来自专栏前端下午茶

JS throttle与debounce的区别

一般在项目中我们会对input、scroll、resize等事件进行节流控制,防止事件过多触发,减少资源消耗;在vue的官网的例子中就有关于lodash的deb...

2013

扫码关注云+社区

领取腾讯云代金券