使用dojo的两种方式:
- prigrammatic:编程方式;
- declarativ:声明方式。
编程方式指使用javascript来初始化对象,代码的所有行为都用javascript来实现。声明方式指使用dojo/parser来读取DOM,并解析出需要使用特定属性修饰的节点,包括解析某些用于扩展部件功能的<script>标签。
每种方式都有它们的优势和不足,根据自己的需要进行权衡吧。这里主要对声明方式的用法进行解释,如果要使用声明方式就需要考虑以下几方面因素:
- 声明方式很简单,不需要知道太多的javascript知识,当然使用范围有所限制;
- 由于它的工作方式,在性能上不如编程方式,因为dojo/parser需要解析DOM来查找它要处理的节点;
- 它对原型UI来说是很快捷的,但对程序各种产品的管理来说有些不足。
初始化对象
经常使用声明方式来初始化小部件。方法是在标签上添加data-dojo-type属性,然后使用dojo/parser读取DOM并初始化小部件。例如:
<button type="button" data-dojo-type="dijit/form/Button">
<span>Click Me!</span>
</button>
如果在后面需要对这个Button做些处理,就要持有一个对这个部件的引用。对于Dijit基本部件,当它们被初始化时,它们就会查找它们要替代的节点,如果找到了”id“属性,就会将它们自己在dijit/registry中注册,这样我们就获得了一个对这些小部件的引用。因此,可以这样修改下代码:
<button type="button" id="myButton" data-dojo-type="dijit/form/Button">
<span>Click Me!</span>
</button>
在选择指定的标签作为dijit的占位符时,应该使用本地的HTML标签(距离使用的小部件最相似的标签)。在这个例子中,dijit/form/Button是一个按钮,因此,我们使用<button>标签。这样就比较好了,并且避免一些浏览器在替换节点时出现的一些问题。当然,最好还是为button添加一个type属性。
下面我们要做的就是触发dojo/parser。在dojo1.7采用AMD前,可以使用parseOnLoad:true来配置。现在,最好在javascript内部触发parser。因此,为了正确地执行解析,还需要做下面的事情:
<script type="text/javascript" src="lib/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],
function(parser){
parser.parse();
});
</script>
配置对象
使用dojo/parser初始化对象的确很方便,但是不能配置小部件。因此,需要一种机制:在初始化时传递一些配置项。声明data-dojo-props属性来包含任何需要传递给初始化动作的配置选项。
如果要创建一个TabContainer,包含一个tab,这个tab包含一个button。如果使用编程的方式,代码如下:
require([
"dijit/form/Button",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(Button, TabContainer, ContentPane){
var tc = new TabContainer({
style: {
height: "200px",
width: "400px"
},
id: "tc"
}),
atab = new ContentPane({
title: "A Tab",
closable: false,
id: "atab"
}),
myButton = new Button({
label: "Click Me!",
id: "myButton"
});
atab.addChild(myButton);
tc.addChild(atab);
tc.startup();
});
使用声明方式代码如下:
<div id="tc" data-dojo-type="dijit/layout/TabContainer"
data-dojo-props="style: { height: '200px', width: '400px' }">
<div id="atab" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title: 'A Tab', closable: false">
<button type="button" id="myButton"
data-dojo-type="dijit/form/Button">
<span>Click Me!</span>
</button>
</div>
</div>
data-dojo-pros属性的值是一个javascript对象常量,没有{}。
Non-Widgets
dojo/parser不仅可以用于初始化可见的标签元素,它还可以用于初始化不可见的对象。dojo/parser假定有一个使用了配置项的参数(作为第一个参数),将对节点的引用作为第二个参数。这对基于dojo/_base/declare的不可见对象很有用。但是,普通对象没有不能像小部件一样去注册,因此为了在初始化之后引用这些普通对象,需要在全局作用域中创建对它们的引用。dojo/parser通过查找data-dojo-id属性来实现对它们的引用。具体的值需要在全局作用域中设置。例如,要创建一个内存片段,可以这样做:
<div data-dojo-id="myStore" data-dojo-type="dojo/store/Memory"></div>
这个例子中,我们要创建一个内存片段来满足下拉列表的需要,在标签中我们可以这样做:
<div data-dojo-id="myStore" data-dojo-type="dojo/store/Memory"
data-dojo-props="data: [
{ name: 'Alabama', id: 'AL' },
{ name: 'Alaska', id: 'AK' },
{ name: 'Arizona', id: 'AZ' },
{ name: 'California', id: 'CA' },
{ name: 'Colorado', id: 'CO' },
{ name: 'Connecticut', id: 'CT' },
{ name: 'New York', id: 'NY' }
]"></div>
<select id="mySelect" name="state" value="CA"
data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="searchAttr: 'name', store: myStore"></select>
需要注意的是,由于没有为这些不可见的对象注册,全局作用域中使用了对它们的引用,即使创建这些对象的DOM节点从内存中消失,垃圾回收不会发生,在大的应用程序中,可能会造成内存泄露。因此,当不再需要它们时,要在全局作用域中删除这些变量。
Modifying Behavior
为了修改小部件的行为,当事件发生时需要写些代码来执行这些操作。如,当按钮被点击时,展示对话框:require(["dijit/form/Button", "dijit/Dialog"], function(Button, Dialog){
var myButton = new Button({
label: "Click Me!",
id: "myButton"
}, "myButton"),
someDialog = new Dialog({
title: "Hello World!",
content: "<p>I am a dialog. That makes me happy.</p>"
}, "someDialog");
myButton.on("click", function(){
someDialog.show();
});
myButton.startup();
someDialog.startup();
});
在标签中完成上述操作,需要使用“声明式脚本”,它们允许dojo/parser使用内联代码的片段来初始化对象。
<div id="someDialog" data-dojo-type="dijit/Dialog"
data-dojo-props="title: 'Hello World!'">
<p>I am a dialog. That makes me happy.</p>
</div>
<button type="button" id="myButton" data-dojo-type="dijit/form/Button">
<span>Click Me!</span>
<script type="dojo/on" data-dojo-event="click">
var registry = require("dijit/registry");
registry.byId("someDialog").show();
</script>
</button>