Dijit、ExtJS、jQuery UI 异同浅析（3）
|
- UID
- 1066743
|
Dijit、ExtJS、jQuery UI 异同浅析（3）
jQuery UI 篇：jQuery UI 控件的使用方式秉承了 jQuery 一贯简洁的风格。它并不提供类似于 dojo.parser 这样的工具类来扫描页面并根据 HTML 标签自动生成控件实例，也不像传统的面向对象语言那样使用 new 关键字来创建控件，而是通过 jQuery 插件常用的链式书写方式来创建控件。
清单 12. jQuery UI 创建 Button 控件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<script type="text/javascript">
$(function){
$("#buttonNode").button({
label: "button"
});
});
</script>
</head>
<body>
<div>
<button id="buttonNode"></button>
</div>
</body>
</html>
|
上述代码首先使用 jQuery 核心方法 $() 获取页面中所有符合查询条件的 HTML DOM 节点（本例中只有一个 id 为 buttonNode 的 DOM 节点符合条件），并将返回的 DOM 节点数组包装成一个 jQuery 对象。之后调用 $.ui.button 插件为 jQuery 对象提供的 button 方法根据传入的散列参数表为这些节点创建 $.ui.button 控件。
控件操作Dijit 篇：在创建 Dijit 控件之后，用户可以通过 dijit.byId、dijit.findWidgets、dijit.byNode、dijit.getEnclosingWidget 等方法获取控件实例。
清单 13. 获取 Dijit 控件对象1
2
3
4
5
6
7
8
| // 获取 widget id 为 programmatic 的控件
var widget = dijit.byId("programmatic");
// 获取 body 标签下的所有控件
var widgets = dijit.findWidgets(dojo.body());
// 获取 DOM 树根节点为以 node 的控件
var widget = dijit.byNode(node);
// 获取 DOM 树中包含 node 节点的控件
var widget = dijit.getEnclosingWidget(node);
|
获取控件实例之后可以像使用 Java 类那样调用控件方法。并使用 get、set 方法来获取/设置控件的属性。
清单 14. Dijit 控件属性获取/设置及方法调用1
2
3
4
5
6
| // 调用控件方法
widget.someMethod();
// 使用 get 获取控件属性
var value = widget.get(attributeName);
// 使用 set 设置控件属性
widget.set(attributeName, value);
|
ExtJS 篇：ExtJS 并没有像 Dijit 一样提供了通过 DOM 节点查找控件的方法，而是只提供通过控件 id 号获取控件对象的方法。
清单 15. 获取 ExtJS 控件对象1
2
| // 获取控件对象
var button = Ext.getCmp("button");
|
Ext.getCmp 方法返回的就是一个完整的 ExtJS 的控件对象，包含了控件对象的所有变量及方法。与 Dijit 不同的是，ExtJS 的成员变量大多是通过使用变量名去获取/设置的，仅对部分属性提供了对应的 get/set 方法（其原因和内容将在后文的“属性获取/配置方法”章节中具体阐述）, 而 ExtJS 的控件方法调用还是与 Java 的方法调用类似的。
清单 16. ExtJS 控件属性属性获取 / 设置及方法调用1
2
3
4
5
6
| // 获取控件成员变量，直接访问成员变量
var buttonText = button.text;
//button 控件为 width 属性添加了 setWidth 方法，以便 width 属性改变后，对 DOM 节点进行处理。
button.setWidth(100);
// 调用控件成员函数，类似 Java 的对象方法调用方式
button.focus();
|
jQuery UI 篇：操作 jQuery UI 控件的方式与创建 jQuery UI 控件的方式非常相似。
清单 17. jQuery UI 控件方法调用1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<script type="text/javascript">
$(function){
// 为 button 标签创建 Button 控件
$("#buttonNode").button({
label: "button"
})；
// 调用 Button 控件的 disable 方法
$("#buttonNode").button("disable");
});
</script>
</head>
<body>
<div>
<button id="buttonNode"></button>
</div>
</body>
</html>
|
上述代码中，先后调用了两次 button 方法，但其含义完全不同。第一次调用 button 方法时，传入了一个散列参数表，为对应节点创建了 $.ui.button 控件。第二次调用 button 方法时，参数为一个字符串，此时 jQuery 调用了与字符串同名的控件成员方法。
jQuery UI 并没有为控件属性提供默认的 get/set 方法，但用户可以通过如下方式获取/设置控件属性：
清单 18. jQuery UI 控件属性获取 / 设置1
2
3
4
5
6
| // 调用 option 方法获取 $.ui.button 控件的属性表
var options = $("#buttonNode").button("option");
// 设置 buttonNode 节点对应的 $.ui.button 控件的 label 属性
$("#buttonNode").button({
label: "changed label"
})；
|
上述代码中第二次调用 button 方法时虽然传入的是一个散列参数表，但由于之前已经为 id 号为 buttonNode 的 DOM 节点创建过 $.ui.button 控件，因此不会再次创建控件对象，而是取出已创建的控件对象，并设置其对应的属性。 |
|
|
|
|
|
