<html>
<head>
<title>Hello World</title>
<!-- 首先引入Dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制-->
<script type="text/javascript" src="https://www.jb51.net/article/Dojo/Dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}">
</script><script type="text/javascript">
Dojo.require("Dojo.parser");
Dojo.require("hello.world");
</script></head><body>
<div DojoType="hello.world" yourName="jinxfei"></div>
</body>
</html>
大家注意到，我们在标签上增加了“yourName”属性，在控件中如何使用该属性呢？可以在construtctor方法中接收此属性的值，将值赋给控件类自身的变量，然后在postCreate中使用，JavaScript代码如下：
复制代码 代码如下:
Dojo.provide("hello.world");
Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{ yourName:'world',
constructor:function(params,node)
{
this.yourName=params.yourName;
},
postCreate:function()
{
this.domNode.innerHTML="hellow "+this.yourName;
}
}
);
接下来，我们将进一步增加控件进的复杂性，增加一个输入框，在这个输入框中输入文本的同时，动态更新hello XXX，这就要用到Dojo的事件绑定机制，最常用的模式为：Dojo.connect(node,event,obj,method);表示将obj的method方法作为domNode的event事件处理函数，例如：
复制代码 代码如下:
Dojo.connect(inputText,"onkey",this,"updateHello");
这次先改控件，在postCreate的时候，动态增加一个输入框，并为输入框动态绑定事件：
复制代码 代码如下:
Dojo.provide("hello.world");
Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
{ yourName:'world',
typeIn:null,
echoDiv:null,
constructor:function(params,node)
{ this.yourName=params.yourName;
},
postCreate:function(){
this.typeIn=document.createElement("input");
this.typeIn.type="text";
this.domNode.appendChild(this.typeIn);
this.echoDiv=document.createElement("div");
this.domNode.appendChild(this.echoDiv);
Dojo.connect(this.typeIn,"onkeyup",this,"updateHello");//动态绑定事件
this.updateHello();//调用方法初始化一下，先显示一个空的hello
} ,
updateHello:function()
{
this.echoDiv.innerHTML="hello "+this.typeIn.value;
}
}
);
而HTML文件中对控件的引用，不用做任何改变(严格来讲，你需要删除yourName="jinxfei"这个属性）。从这个稍微有一点点复杂的控件，我们已经可以看出Dojo的优势：真正的面向对象！控件管理范畴内的DOM元素，都可以放在类中作为属性来使用（直接用this.xxx引用)，这样，避免了document.getElementByID()满天飞，控件是内聚的。响应事件的方法也是类的方法，免得在页面中声明大量的离散function，不好管理。
您可能感兴趣的文章: