google closure 笔记-UI Component

goo.ui.Component

Component主要提供了一个功能：定义了一个ui组件的生命周期

1，生命周期：

Component定义了一个ui组件的基本生命周期如下图所示：

创建一个组件有两种方法：render 和 decorate

区别在于：使用render方法，dom结构由rendeer方法负责创建（也就是用js来创建dom）；decrote方法不会创建dom结构，而是在模板中已经输出了。

2,树形结构

三个对应的树形结构：Dom，Component，EventTarget。

Dom结构显然是一个树形结构，没什么可讲的，一般子组件的this.element_是父组件的this.element_的孩子

Component 组件应该也是一个树形的结构，和其依赖的dom结构应该是相同的。

Component内置了对子组件的操作，当在组件A中创建了一个子组件B时，要调用AddChild方法来注册这个孩子，这样，当父组件进行某些操作时，会子总调用子组件的相关方法，从下面的源码概要中可以看到，比如父组件enterDocument和exiteDocument时会同时调用所有子组件的相关方法（当然，因为创建销毁子组件时其实也会自动调用这些方法，所以父组件在调用时会先检查一下）。

component.js源码概要:

EventType： 预定义的组件事件模型。这里不提供对这些事件的支持，只能通过dispatch来触发。在其子类Control中提供了对这些事件的完整支持。

Error:

State:

indocument_/isInDocument()/:此组件是否已经添加到document中。

id/getId()/setid():获取/设置this.id_

dom_/getDomHelper(): goog.dom.DomHelper DomHelper解释见"DOM操作"

element_/getElement()/setElementInternal:此组件的根元素

model_/getModel()/setModel()://此组件的model_, model_存在的意义是存储此组件依赖的数据（MVC中的M）以及封装数据相关的逻辑。

parent/setParent()/getParent():

children{Array}://这里保存了所有的子组件

rightToLeft_/getter/setter:

getElementByClass()/getElementsByClass(); 包装后的goog.dom.getElement(s)ByClass(classname, this.element_)，实际就是在this.element_中查找而已;

getHandler():不要直接用goog.events.listen来注册，而用getHandler().listener，因为getHandler.listen会自动将回调函数的this绑定为当前this。

createDom():默认创建一个空的div：this.element_ = this.dom_.createDom("div");

render(parnet): call render_(parent);

renderBefore(sibling):call render_(sibling.parentNode, sibling);

render_(parent,sibling):     //调用createdom来创建dom，然后追加到parent上（或者sibling之前）

     if this.inDocument_,throw error;

     if(!this.element_): this.createDom();创建domtree

     xxxx;插入this.element_;

     if(!thisparent_!!this.parent_.isInDocument()) this.enterDocument();

decorate(element)://

     if(this.inDocument_,throw error；

     this.decorateInternal();

     this.enterDocument();

decorateInternal(element)://默认 this.element_ = element;

enterDocument(): 

     this.inDocument = true;

     for each children:child.enterDocument(): //调用孩子的enterDocument方法

exitD