英文地址: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教程
参考
PS:初次翻译,如有问题欢迎交流。