dojo: 使用declarative语法_data-dojo-props-优快云博客

使用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>