GoogleClosureLibrary 中的Component 模型纪要

要高效使用google的这个库需要正确理解它的Component模型,总的说来Component是这个库中所有控件和组件的基础类,有点象asp.net中的control这个基类,它定义了一个组件的生命周期过程规范和一些可覆写的方法。

 

一个组件在生命周期中大致会经过如下几个阶段:

  1. 组件实例创建。
  2. 构造dom元素,这步又可以通过两种方式来实现:完全创建法和冒充法(decorate).
  3. 事件绑定。
  4. 页面关闭事件回调:取消事件绑定并进行变量清理。
constructor Component instance creation
createDom() Component DOM structure building
decorateInternal() (optional)
enterDocument() Post DOM-building initialization (such as attaching event listeners)
exitDocument() Post DOM-removal cleanup (such as detaching event listeners)
dispose() Component disposal
canDecorate() Indicates whether the component can use a pre-existing element

事件绑定在enterDocument方法中完成,因为直到此时dom元才存在于document中,并可以使用getElement方法来查找dom中的元素。

 

子元素创建应该在decorateInternal方法里面做,可以使用decorate 方式,或者创建法,这里需要该手动调用render()方法?

参考文档: Component组件模型介绍

 

2010.11.25 Update:

  • 如果组件含有其它的组件,一般应该在构造函数中创建子组件的实例。
  • createDom方法用于完全的js界面生成,如果是decorate则应根据已有dom结构在decorateInternal方法中创建缺失的元素。
  • enterDom方法除可用于事件绑定外,还可以调用子组件的render方法将子组件加载到文档结构中,如果是decorate则不必手动调用render方法。
  • 如果只需创建类似zippy一样的功能性组件,而不需要维护自己的dom结构,则不必从component类继承,可以选择EventTarget即可,使之可以使用dispatchEvent方法引发事件和成为其它组件的监听目标。
  • 元素事件类型:goog.events.EventType
  • 组件事件类型:goog.ui.Component.EventType

posted on 2010-10-14 11:09  沙加  阅读(788)  评论(0编辑  收藏  举报

导航