深入理解Widgetbase

Dijit包的基础架构，以及创建自定义widget的能力，在很大程度上依赖于一个定义在dijit/_WidgetBase模块的基类。

虽然还有另一些常用的模块在开发基于Dojo的web应用时很有价值（例如Dojo parser和Dijit模板系统），但这个_WidgetBase是创建任何自定义widget时都要用到的。

在本文中，您将学习到这个widget基础设施是如何工作的。

注意：如果您具有早期Dojo版本的使用经验，可能对dijit/_Widget模块比较熟悉。

虽然目前dijit/_Widet仍然存在，并且继承了dijit/_WidgetBase，但在撰写您自己的widget时最好还是直接继承djit/_WidgetBase。

dijit/_Widget将很有可能从Dojo2.0中移除。

要理解Dijit系统，最重要的一点就是理解一个widget的生命周期。

这个生命周期主要是关于widget的初始化过程。

也就是说，从一个widget的创建，到完全可被您的应用所使用，再到销毁该widget及其所涉及的DOM结点。

注意：Widget和WidgetBase之前之所以加上了下划线"_"，是因为它们不应该被直接实例化，而应通过dojo的declare机制来继承。

_WidgetBase中的方法可分为两条主线：一组在创建过程中顺序调用的方法，以及一套在使用widget的过程中以最小的数据绑定来获取/设置属性的方法。

现在让我们来研究一下widget的创建过程。

Dijit生命周期任何一个以_WidgetBase为基类的widget在其初始化的过程中都会依次调用几个特定的函数。

下面以调用顺序列出这些函数：∙constructor （所有原型通用，初始化时被调用）∙postscript （由declare声明的所有原型通用）∙ create∙postMixInProperties∙buildRendering∙postCreate∙startup查看示例这些方法用于处理以下事情：∙何时定义初始值∙如何创建初始值的可视化表示∙这些可视化表示何时连入DOM树∙何时执行依赖于连入DOM树的DOM结点的代码postCreate()在创建自定义widget时，目前最需要记住的一个方法就是postCreate。

当widget的所有属性都已定义，且代表该widget的DOM结构已被创建（但在连入主DOM树之前）时，这个方法被调用。

这个方法之所以重要，是因为这是开发人员，也就是您，有机会在widget最终呈现给用户之前做最后的调整的主要场所。

这些调整包括设置任何自定义的属性，等等。

在开发一个自定义widget时，大多数（如果不是所有的话）的定制都会出现在这个函数中。

startup()可能Dijit生命周期中的第二重要函数就是startup了。

这个方法在widget的DOM结构被连入主DOM树之后被调用。

在该函数之前，这个widget的所有子widget都已被创建并启动了。

这个函数对于复合widget（例如布局widget）是非常有用的。

注意：当使用编程方式初始化一个widget时，务必调用startup方法，且必须在将该widget 放置到文档DOM树中以后再调用。

创建好widget之后忘记调用startup方法是一个很常见的错误，让您因为搞不懂为何widget不正常显示而抓狂。

销毁方法除了初始化方法之外，dijit/_WidgetBase还定义了一些销毁方法（以调用顺序列出）：∙destroyRecursive∙ destroyDescendants∙ destroy∙uninitialize∙destroyRendering在创建您自己的widget时，任何必要的自定义销毁行为都应该定义在destroy方法中（别忘了调用this.inherited(arguments)）。

Dijit自带的destroy方法已经能够自动处理DOM结点和大多数对象，因此您大可不必从头开始编写这些逻辑。

注意：虽然destroy是销毁widget的核心方法，但在显式销毁一个widget时最好调用destroyRecursive。

这个方法能保证该widget的所有子widget也被销毁。

DOM结点引用一个widget通常是某种用户界面，因此大都具有某种DOM结构。

_WidgetBase定义了一个表中属性，叫做domNode，它是囊括整个widget的DOM结点的引用。

如果您需要对widget的DOM树做某些操作（例如将整个widget移动到DOM树的另一个位置），您随时可以获取这个结点的引用。

而且这个引用在postCreate被调用的时候就已经存在了。

除了domNode属性之外，某些widget还定义了containerNode属性。

这是对widget的一个内部结点的引用，这个结点里包含了一些HTML内容甚至是其他widget，它们往往是在您的widget声明之外定义的，例如一个通过声明方式创建的子widget。

注意：我们将在另一篇教程中讨论containerNode属性的重要性。

目前只要知道这个属性存在于某些widget中即可（尤其要注意它存在于所有继承自dijit/_Container的widget）。

Getter和Setter除了关于初始化和销毁的方法，_WidgetBase还预定义了许多所有widget都需要的属性，以及一整套为属性定义getter和setter的机制，这套机制通过标准的get和set方法起作用，这两个方法在所有widget中都有定义。

您可以在代码中添加含有如下签名模式的私有方法来利用这套机制：[javascript]view plaincopyprint?1.// 您的widget的“foo”属性:2.3.// 自定义getter4._getFooAttr: function(){ /* do something and return a value */ },5.6.// 自定义setter7._setFooAttr: function(value){ /* do something to set a value */ }一旦用这种方法声明了这些方法对，您就可以通过_WidgetBase的标准的get和set方法来访问您的自定义属性了。

例如在上面的例子中，您可以这么写：[javascript]view plaincopyprint?1.// 假设widget实例名为myWidget:2.3.// 获取"foo"属性的值:4.var value = myWidget.get("foo");5.6.// 设置"foo"属性的值:7.myWidget.set("foo", someValue);这个标准允许其他widget或控制逻辑能够通过统一的方式与一个widget交互，并且在一个属性被访问时提供给您执行一些自定义逻辑的能力（例如对一个DOM片段的修改，等等），或者调用其他的方法（例如触发一个事件或通知）。

假设您的widget有一个自定义属性value，您希望在value值被改变时通知其他人（可能通过您定义的一个onChange方法）：[javascript]view plaincopyprint?1.// 假设我们的属性称为"value":2.3._setValueAttr: function(value){4. this.onChange(this.value, value);5. this._set("value", value);6.},7.8.// 一个用于dojo/on的函数9.onChange: function(oldValue, newValue){ }如您所见，这套机制使得定制getter和setter的行为变得非常方便。

注意：在撰写您自己的widget时，对于任何需要特殊逻辑来实现自定义属性的获取和修改的情况，您都应该创建对应的getter和setter方法。

而在使用您自己的widget时，也必须总是通过get()和set()方法来访问属性。

只有这样才能正确地调用自定义的getter和setter 逻辑。

另外，在创建自定义的setter方法时，您应当总是使用内部的_set方法来更新内部值，从而使dojo/Stateful的watch方法能正常工作。

这个dojo/Stateful也是所有widget 都继承的基类。

监听事件和主题最后，_WidgetBase为Dojo的两个最重要的事件机制on()和subscribe()提供了封装。

这些方法主要是为了方便，其次是为了便于准确地初始化和销毁widget。

您不需要自己来定义这些方法，它们都是直接可用的。

使用.on()和.subscribe()都是很容易的：[javascript]view plaincopyprint?1.// assume we have a button widget called "btn",2.// and we want the button to listen to the "bar" event on foo:3.4.btn.on(foo, "bar", function(){5. // 注意"bar"在btn的上下文内执行!6. this.set("something", somethingFromFoo);7.});主题的订阅（通过Dojo的pub/sub系统）也可用类似的方法实现。

在widget的基础设施中定义on和subscribe的好处是，widget能够跟踪它的所有事件和主题订阅，保证它们在widget被销毁时被正确地取消绑定（或取消订阅），从而避免内存泄露。

预定义的属性和方法最后，_WidgetBase提供了一组预定义的属性，以及对应的getter和setter（如果需要的话）：∙id: 用于标识该widget的唯一字符串∙lang: 一个很少用到的字符串属性，用于覆盖默认的Dojo locale∙dir: 有Bidi需求时很有用∙class: widget的domNode的HTML class属性∙style: widget的domNode的HTML style属性∙title: 通常是指原生的工具提示HTML title属性∙baseClass: widget的根CSS class∙srcNodeRef: 在widget被“控件化”之前存在的DOM结点（如果有的话）。