Dijit简介

        从架构层次上来说，dijit位于dojo之上，“是Dojo中界面控件的总称，他们使用灵活而且易于理解。每个Dijit控件都是由Dojo类以及控件中使用的图片，CSS等资源文件共同组成。通过Dijit架构，可以方便的创建灵活、可扩展、可定制外观的控件”。（引用认识Dojo中的界面控件：Dijit ）

        dijit基本用法

        dijit的用法有两种：一种是声明式（在HTML标签中使用特定的属性声明），另外一种是编程方式（利用javascript），当然两者可以混合着用。使用声明方式要包含dojo/parser，将dojoConfig:aprseOnLoad设为true或在创建部件时调用parser.parse()。

需要注意的是：dijit有一种特别的访问方法dijit.byId()，它与dojo.byId不同。Dijit将所有当前（应用程序）可用的部件存储在dijit/registry中，使用id作为这些部件的唯一标识符。registry.byId()通过id参数返回一个部件的实例，这样就可以访问这个部件中所有的方法和属性了。如：

<script>
    require(["dojo/parser", "dijit/registry", "dojo/dom", "dojo/domReady!"], function(parser, registry, dom){
        parser.parse();
        // dom.byId("foobar") would only be a normal domNode.
        var myDialog = registry.byId("foobar");
        myDialog.set("content", "<p>I've been replaced!</p>");
        myDialog.show();
    });
</script>
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!">
   <p>I am some content</p>
</div>

        如果要获取对用于展示部件的真实dom节点的引用，由于dijit将这个引用当作一个属性存储在部件的.domNode中，因此可以使用部件示例的.domNode属性获取这个引用。可以使用.domNode这个属性来设置节点的样式、位置及其它dom操作。

require(["dijit/registry", "dojo/dom-construct", "dojo/_base/window"], function(registry, domConstruct, win){
     var thinger = registry.byId("foobar");
     domConstruct.place(thinger.domNode, win.body(), "last");
     // functionally equivalent to:
     // win.body().appendChild(thinger.domNode);
});

        在以编程方式创建部件时，要传递一个id参数：

require(["dijit/Dialog", "dijit/registry"], function(Dialog, registry){
    var myDialog = new Dialog({
        id: "myDialog",
        title: "Programmatic"
    });
    myDialog.startup();
    // compare them:
    console.log(registry.byId("myDialog") == myDialog);
});

否则，dijit会自动生成一个标识符ID。

require(["dijit/Dialog", "dijit/registry"], function(Dialog, registry){
    var myDialog = new Dialog({ title:"No ID" })
    console.log(myDialog.get("id"));
});

       所有的dijit都遵循相同的编程惯例。使用javascript的new函数创建一个实例，以哈希的方式传递属性和方法，提供源节点的引用（可选）。

require(["dijit/Dialog", "dojo/dom"], function(Dialog, dom){
    var node = dom.byId("makeADialog");
    var myDialog = new Dialog({ title:"From Source Node" }, node);
    myDialog.show();
});

属性

       部件具有与dom节点类似的属性。以编程方式与部件交互有两种主要的接口，属性就是其中一种，另外一种是以事件处理函数的方式，如onClick()。

set()与get()

       属性通常可以在部件初始化时设置，在部件创建后修改。但是，有些（const类型的）属性如id、type，只能在初始化时设置。其它（readonly）属性，如focused，只能读取，不能修改。

// set title
myTitlePane.set('title', 'hello world');

// find out if button is disabled
var dis = myButton.get('disabled');

// set to the current date
myDateTextBox.set('value', new Date());

Set() 也支持类似dojo/dom-style样式的哈希表，一次设置多个属性。

watch()

可以监视属性的变化。

myTitlePane.watch("open", function(attr, oldVal, newVal){
   console.log("pane is now " + (newVal ? "opened" : "closed"));
});

dijit通用属性

• domNode：位于部件的顶层。所有的部件都有一个与其绑定的dom 节点（绑定方式：在初始化时通过srcNodeRef，或以编程方式创建部件结构）。这是一个真实的dom节点，如果想要展示或隐藏部件，可以修改.domNode的css属性的display；

require(["dojo/dom-style", "dijit/registry"], function(domStyle, registry){
        // hide a widget with id="myThinger"
        domStyle.set(registry.byId("myThinger").domNode, "display", "none");
});

• containerNode：如果一个部件使用模板创建复杂标签（还有内部标签与这个部件一起展示：标签嵌套），containerNode成员是一个对包含部件内容的dom节点的引用；
• declaredClass：一个字符串，表示部件类的全称。

require(["dijit/Dialog"], function(Dialog){
    var myDialog = new Dialog({ title:"foo" }, "bar");
    myDialog.declaredClass == "dijit/Dialog" // true
});

事件

       与部件交互的另外一种方式是事件处理函数。如：

require(["dijit/form/Button"], function(Button){
    new Button({
        label: 'Click me!',
        onClick: function(evt){ console.log("clicked!"); }
    });
});

       事件处理函数可以采用编程的方式（像上面），也可以使用声明的方式，如下：

<div data-dojo-type="dijit/form/Button">
   <script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
         console.log("clicked, event object is ", evt);
   </script>
   Click me!
</div>

Themes

       dijit有4种主题：Claro(dojo1.5+)、Tundra、Soria和Nihilo（1.0+)。Themes是图片（图标、背景图片）、css的集合，为所有部件提供一个通用的可视化样式和颜色主题。可以通容器或部件重写theme。

Dijit i18n/a11y

       dijit中的尼克服东西都被设计为全局可访问的（考虑到不同的用户语言和文化的问题）。

Locating Widgets

       主要有三种方式访问一个部件。

       最简单的是dijit.byId。如果用于创建部件的节点有dom id属性，那么 这个id成为dijit.registry中部件的id。

<div id="myDialog" data-dojo-type="dijit/Dialog" title="A Dialog"><p class="innerContent">Content</p>/div>

registry.byId("myDialog").show(); // show my dialog instance

       如果没有id，使用registy.getEnclosingWidget函数传递任何一个对子dom节点的引用，会返回对部件的引用。

require(["dojo/query", "dijit/registry"], function(query, registry){
    var node = query("p.innerContent")[0]; // a domNode found by query
    var w = registry.getEnclosingWidget(node); // find the widget this node is in
    w.show();
});

       最后一种方法，也是最常用的方法，与getEnclosingWidget类似，但是只有当被传递的节点是部件的domNode的成员时才可用。

Behavioral widgets

       通常，部件创建自己的DOM结构。如：

require(["dijit/form/Button"], function(Button){
    var myButton = new Button({label: "press me"});
});

       上面的代码创建了一个部件，在html文档中myButton.domNode相应的位置。当以声明的方式初始化时，如下：

<button data-dojo-type="dijit/form/Button">press me</button>

       当查看 节点的属性设置和innerHTML后，原始的button节点会被删除，新建的DOM自动替换旧的button节点。

       还存在另外一种部件-”behavioral widget“行为性部件，只是修改原始节点（srcNodeRef）。使用behavioral部件时，需要指定要操作的dom源节点。如：

require(["dojox/widget/FishEyeLite"], function(FishEyeLite){
    new FishEyeLite({...}, "mySourceDom");
});

       dijit没有任何behavioral 部件。