Dojo Widget 传入参数处理机制讨论

前端之家收集整理的这篇文章主要介绍了Dojo Widget 传入参数处理机制讨论前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前一阵子被Dojo Widget的参数处理机制搞得头大,最近终于腾出手来好好整理了下。

熟悉Dojo的人,都非常喜欢用Dijit组件模型进行开发。不仅可以通过异常简便的方式在网页上创建具有特殊功能页面元素,也可以很方便地对这些元素进行重构。下面就是一个自定义dijit.layout.ContentPane的例子(Dojo 1.5.0,Firefox 3.6.15,Firebug 1.5.4):

dojo.require("dijit.layout.ContentPane");
dojo.declare("Test",[ dijit.layout.ContentPane ],{
	tagattr1: "",constructor: function(){
		console.log("=============constructor=============");
		console.log("this.title: ",this.title);
		console.log("this.tagattr1: ",this.tagattr1);
		console.log("arguments[0].title: ",arguments[0].title);
		console.log("arguments[0].tagattr1: ",arguments[0].tagattr1);
	},postCreate: function(){
		console.log("=============postCreate=============");
		console.log("this.title: ",this.tagattr1);
	},startup: function(){
		console.log("=============startup=============");
		console.log("this.title: ",this.tagattr1);
	}
});

其中的几个方法都是dijit本身的生命周期方法调用顺序为constructor、postCreate、startup。通过观察firebug console中的输出,可以检测Test对不同参数的处理方式。

Dojo为了方便开发人员,提供了两种构建 Dijit的方式[1,2]:声明式(Declaratively)和编程式(Programmatically)。下面就分别介绍一下两种情况下Dijit是如何处理参数的。

声明式(Declaratively)

<div dojoType="Test" title="Space" tagattr1="tag gogo">This is a customized content pane.</div>

当上面的div被解析时,所有的属性会被当做Test的参数传入。运行后的console输出如下:

=============constructor=============
this.title:
this.tagattr1:
arguments[0].title: Space
arguments[0].tagattr1: tag gogo
=============postCreate=============
this.title: Space
this.tagattr1: tag gogo
=============startup=============
this.title: Space
this.tagattr1: tag gogo

观察结果:

(1)constructor中,参数的值还没有被赋到this中,但参数本身已经存在(是空字符串); 到postCreate中,参数的值就被赋到this中了。

(2)如果想在constructor中就拿到参数的值,可以通过arguments[0]得到。

如果将Test中的 tagattr1: "",声明去掉,将会得到不同的console输出

=============constructor=============
this.title:
this.tagattr1: undefined
arguments[0].title: Space
arguments[0].tagattr1: undefined
=============postCreate=============
this.title: Space
this.tagattr1: undefined
=============startup=============
this.title: Space
this.tagattr1: undefined

观察结果:

(1)虽然在div中定义了属性tagattr1,但在Test的所有生命周期函数中,tagattr1还是被当做是未定义的,包括在constructor的arguments[0]中。

其实Test的参数可以被分成两类:固有参数,自定义参数。固有参数包括:id,class,style,title,href [3]等,基本上涵盖了div标签的标准属性 。这些参数在dijit.layout.ContentPane及其祖先中已经被定义好了,因此在Test中可以直接使用。但自定义参数不仅需要先在html tag中添加,而且在Test中也需要进行预定义。

编程式(Programmatically)

再来看看编程式创建Test实例的方法

dojo.ready(function(){
	var test = new Test({
		title: "Space",tagattr1: "js gogo"
	},dojo.byId("container"));
	test.startup();
});

注意这儿test.startup();必须有,否则Test的startup方法将不会被触发。

console输出如下。和上面声明式得到的结果一样。

=============constructor=============
this.title:
this.tagattr1:
arguments[0].title: Space
arguments[0].tagattr1: js gogo
=============postCreate=============
this.title: Space
this.tagattr1: js gogo
=============startup=============
this.title: Space
this.tagattr1: js gogo

有趣的来了:如果将Test中的 tagattr1: "",声明去掉,则console输出为:

=============constructor=============
this.title:
this.tagattr1: undefined
arguments[0].title: Space
arguments[0].tagattr1: js gogo
=============postCreate=============
this.title: Space
this.tagattr1: js gogo
=============startup=============
this.title: Space
this.tagattr1: js gogo

观察结果:

(1)虽然在constructor中,this.tagattr1是未定义的,但到了postCreate中,它就被定义并赋值了。

(2)在Test中,虽然tagattr1没有定义,但在constructor的arguments[0]中却已存在。

在实际应用中,创建一个自定义dijit如Test,一般都会创建多个实体,也不拘通过声明式还是编程式。因此在处理参数时,最好确保在两种方式下得到的结果都一样。从上面的讨论,可以总结出几条需要注意的地方:

(1)在constructor中,不要通过this访问传入的参数的值,而要通过arguments[0]。

(2)从postCreate开始,可以通过this访问传入的参数的值。包括在它后面的startup、onDownloadEnd(当设置href属性时,该方法会在内容加载完成后触发)。

(3)如果要使用自定义的参数,除了在声明的时候声明它并赋值,还必须在dijit的定义主体中定义该属性

(4)如果不确定外部声明的时候是否会传入某个参数,可以在constructor中事先定义其初始值。如果声明的时候未声明该参数的值,则初始值一直都会存在;如果声明的时候声明了该参数的值,则从postCreate开始,该参数的值都变成了声明中定义的值。

参考文献:

[1] 使用Dijit实现界面组件化开发,http://www.jb51.cc/article/p-kisphvgd-zq.html

[2] Creating Dojo Widgets Programmatically orDeclaratively,http://davidwalsh.name/dojo-widget

[3] Dojo toolkit,http://dojotoolkit.org/api/1.6/dijit/layout/ContentPane

原文链接:https://www.f2er.com/dojo/291678.html

猜你在找的Dojo相关文章