dijit/_WidgetBase

英文地址：http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html

介绍

dijit/_WidgetBase是Dijit包中所有组件的基类，也是Dojo中所有组件的一个基类。通常一个组件也会继承一些属性融合的工具类，例如：dijit._TemplatedMixin。

注意：_WidgetBase名字中的下划线表示它是一个基类，不可直接使用，而不是表示它是一个私有的类。

用法

Dojo中所有的组件通过调用dojo.declare()继承_WidgetBase：

dojo.declare("MyWidget", dijit._WidgetBase, { ... });

然后根据组件的生命周期定义大量的方法。

生命周期

组件的生命周期就是用来描述组件从创建到销毁的中间过程，以及阐述每个阶段完成的内容。无论你通过dojo/method或者是重新定义构造函数实现新的组件，生命周期中的一些方法都可以作为你自定义组件的一个切入点，重新实现自己的组件。

组件都是通过dojo.declare()创建的一个类。所有的组件都需要继承dijit._WidgetBase，并且绝大多数组件还需要获取模板融合类（_Templated mixin），它可以帮助你扩展或重写父类相关的方法：

• constructor（构造方法）

在根据传入参数初始化组件之前，构造方法就会被调用。所以说，在构造方法中你可以进行数组初始化等操作。

• parameters are mixed into the widget instance（读取组件属性）

这个过程是将你通过HTML标签设定的组件属性（例如<button iconClass=...>）或者通过构造方法传入的属性（例如：new dijit.form.Button({label: “hi”})）应用到组件上。这个过程是不可重写的。

• postMixInProperties（混淆属性）

如果你重写了postMixInProperties方法，它会组件渲染之前以及DOM节点创建之前被调用，如果你需要增加或者修改组件对象的属性，这里就是处理时机。

API中描述：这个方法在组件的参数读取之后，但是组件模板实例化之前会被调用，这个对于有组件模板引用的组件十分适用。

• buildRendering（渲染组件）

dijit._TemplatedMixin提供buildRendering实现你想要实现的组件。此方法执行后，模板会被加载、节点会被创建、事件也会被绑定，最终的结果就是完成节点的展示。如果你没有混入类dijit._TemplateMinxin（通常OOTB dijit会去做），而且希望自己去渲染组件（例如：简化一个组件，或者更换系统模板），你就可以在这个方法中实现。

API中描述：构造组件的UI，并应用到this.domNode。大多数需要重写这个方法的组件都需要继承类dijit._TemplateMinxin。

• setters are called（执行setXXX方法）

类中定义的_setXXX方法会在此时被执行，不管在构造函数中或者为non-null non-blank non-zero类型数据设定默认值，这个方法都会执行。

• postCreate（创建组件）

这个方法是一个组件创建成功的关键步骤，这个组件已经被渲染（注意：如果是容器，那么容器内的组件还未被渲染），并且此组件还未依附到一个DOM节点上，所以在这个方法中你不能进行任何布局相关的计算。

API描述：在组件片创建之后执行，但是不一定已经添加到HTML文档中（通过placeAt()指定依附节点），这个方法不包括管理大小和位置的任何计算。

• startup

如果你确认所有的子组件已经完成解析、创建，你就可以调用startup()方法。这个方法通常用于布局相关的的组件，例如：BorderContainer。如果组件需要通过JS进行布局计算，那么就可以在startup()中调用resize()方法进行布局处理。

API描述：在组件片已经添加到文档之后执行，并且所有相关的组件已经执行完postCreate()方法。注意：startup()方法可能在组件隐藏的时候被调用，例如：一个隐藏状态的对话框dijit/Dialog，或者一个隐藏状态的Tab页dijit/layout/TabContainer，对于这些组件，如果你想重新布局，最好将相关代码放到resize()方法中，并且继承dijit/layout/_LayoutWidget，当组件显示的时候，resize()方法就会被调用。

• destroy

此方法可以进行数据销毁，一般父类都会自动的调用此方法销毁对象。销毁对象的方法：

var widget = new dijit.form.TextBox({name: "firstname"}, "inputId");

widget.destroy();
dijit.byId("dijitId").destroy();

其他方法

• resize

所有需要通过JS设定大小的组件都有一个叫resize()的方法，它用来重新设定组件的大小。它在执行startup()方法中被调用，或者被父组件调用，例如：dijit.layout.ContentPane

• this.inherited()

当你继承一个类，并且重写它的方法是，父类可能进行有一些重要的处理。那么就可以通过执行这个方法形成一个继承链，会去执行父类的方法。这个方法在开始你的自定义处理前要被调用，例如：

postCreate: function(){
   // do my stuff, then...
   this.inherited(arguments);
}

var A = declare(null, {
m1: function(){
console.log("A.m1");
},
m2: function(){
console.log("A.m2");
}
});
var B = declare(A, {
m1: function(){
this.inherited(arguments);
console.log("B.m1");
}
});
B.extend({
m2: function(){
this.inherited(arguments);
console.log("B.m2");
}
});
var x = new B();
dojo.safeMixin(x, {
m1: function(){
this.inherited(arguments);
console.log("X.m1");
},
m2: function(){
this.inherited(arguments);
console.log("X.m2");
}
});
x.m2();
// prints:
// A.m1
// B.m1
// X.m1

属性

或许_WidgetBase最重要的特点就是在组件初始化的时候有自动初始化属性值得能力，或者在组件的整个生命周期中修改属性的值。_WidgetBase通过实现set()方法来做到这一点，例如：为日期输入框设定日期值：

myDateTextBox.set('value', new Date())

同样，也会有一个get方法用来获取属性值，例如：获取TitlePane是打开还是关闭，可通过：

myTitlePane.get('open')

还提供watch()方法来监控属性值的变化：

myTitlePane.watch("open", function(attr, oldVal, newVal){
   console.log("pane is now " + (newVal ? "opened" : "closed"));
})

自定义setters/getters

get()/set()可以被用于自定义setters/getters，它可以用来将组建的属性与DOMNode节点属性形成对应关系，或者用来执行额外的操作。可以参考Writing Widgets QuickStart教程

参考

Writing Widgets

 

PS：初次翻译，如有问题欢迎交流。