当前位置: 首页 > 工具软件 > Dijit > 使用案例 >

dijit/_WidgetBase

郎慎之
2023-12-01

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

转载于:https://www.cnblogs.com/wlzjdm/p/4666126.html

 类似资料:

相关阅读

相关文章

相关问答