Dojo框架学习笔记<二>

一、dojo/dom
    该模块定义了Dojo Dom API，主要有以下几种用法：
    1、dom.byId();(相当于document.getElementById())
    ①最直接的用法:
    require(["dojo/dom"], function(dom){
        var node = dom.byId("someNode");
    });
    ②它是domNode，可以继续操作属性(也就是可以直接后面"."xxx.xxx...)
    dom.byId("someNode").innerHTML = "Hello World";
    ③如果引用dom.byId();像这样:
    var node = dom.byId("someNode");
        var other = dom.byId(node);
        console.log(node == other);//true
    ④require(["dojo/dom", "dojo/dom-style"], function(dom, domStyle){
      domStyle.set(dom.byId("foo"), "opacity", 0.5);
    //等同于(当然下面这种写法更好)
      domStyle.set("foo", "opacity", 0.5);
    });
    举个例子：(dojo/on,dojo/_base/fx,dojo/domReady!我们不难看出它们是什么，后面继续学习)
    require(["dojo/dom", "dojo/on", "dojo/_base/fx", "dojo/domReady!"],
    function(dom, on, baseFx){
       var node = dom.byId("findMe");
       on(dom.byId("buttonOne"), "click", function(){
           baseFx.fadeOut({ node: node, duration: 300 }).play();
       });
       on(dom.byId("buttonTwo"), "click", function(){
           baseFx.fadeIn({ node: node, duration: 300 }).play();
       })
    });
    <button id="buttonOne">隐藏</button> <button id="buttonTwo">显示</button>
    <div id="findMe">Hi！</div>
    2、isDescendant()
    判断该节点是否是另外一个节点的子节点(后代节点)
    require(["dojo/dom"], function(dom){
        dom.isDescendant("child", "ancestor");
    })
    举个例子：
    require(["dojo/dom", "dojo/domReady!"], function(dom){
        var output = "";
        if (dom.isDescendant("child", "ancestor")){
            output += "'child' is a descendant of 'ancestor'</br>";
        }else{
            output += "'child' is not a descendant of 'ancestor'</br>";
        }
        if (dom.isDescendant("loner", "ancestor")){
            output += "'loner' is a descendant of 'ancestor'</br>";
        }else{
            output += "'loner' is not a descendant of 'ancestor'</br>";
       }
        dom.byId("output").innerHTML = output;
    });
    <div id="ancestor">
         <div id="child">I'm a child!</div>
    </div>
    <div id="loner">I'm not a child!</div>
    <div id="output"></div>
    3、setSelectable()
    启用或禁用一个节点上的选择
    举个例子：
    require(["dojo/dom", "dojo/on", "dojo/domReady!"], function(dom, on){
        on(dom.byId("button1"), "click", function(){
            dom.setSelectable("model", true);
        });
        on(dom.byId("button2"), "click", function(){
           dom.setSelectable("model", false);
        });
    });
    <div id="model">Am I selectable?</div>
    <button id="button1">setSelectable True</button>
    <button id="button2">setSelectable False</button>
  4、dojo/dom-attr该模块定义了Dojo DOM attributes API，属性有：
    has()，get()，set()，remove()，getNodeProp()  对node属性的增删改查...
       require(["dojo/dom-attr"], function(domAttr){
          result = domAttr.has/get...("myNode", "someAttr");
       })
    5、dojo/dom-class
    contains()，add()，remove()，replace()，toggle()对node className的增删改查...
    6、dojo/dom-construct
    toDom()实例化一个HTML片段返回相应的DOM
    place()在已有的DOM树添加或者更改HTML片段
    create()创建DOM简化DOM操作
    empty()删除子元素
    destroy()删除DOM，包括自身
    7、dojo/dom-form 该模块定义了表单处理功能
    fieldToObject()接收表单id返回它的值，跳过禁用表单控件和没选择的radio和checkbox，如果是select返回一个values的字符串数组
    toObject()接收表单id返回{"name":"value"，"name":"value"...}对象，跳过禁用表单控件和没选择的radio和checkbox
    toQuery()将输入表单的数据转换为URL
    toJson()将输入表单的数据转换为JSON对象
    8、dojo/dom-geometry 该模块定义了dojo DOM几何API，返回DOM节点的边框，大小，位置以及坐标等...
    dojo/dom-geometry::position()
    dojo/dom-geometry::getMarginBox()
    dojo/dom-geometry::setMarginBox()
    dojo/dom-geometry::getContentBox()
    dojo/dom-geometry::setContentSize()
    dojo/dom-geometry::getPadExtents()
    dojo/dom-geometry::getBorderExtents()
    dojo/dom-geometry::getPadBorderExtents()
    dojo/dom-geometry::getMarginExtents()
    dojo/dom-geometry::isBodyLtr()
    dojo/dom-geometry::normalizeEvent()
    dojo/dom-geometry::docScroll()
    dojo/dom-geometry::fixIeBiDiScrollLeft()
    dojo/dom-geometry::getMarginSize()
    9、dojo/dom-prop 该模块是获取或设置DOM的各种类型属性,dojo/dom-style获取或设置DOM节点的Style
    get(),set()
    10、dojo/domReady! AMD加载插件，等到DOM加载完成后
二、dojo/query
    1、该模块提供了DOM查询功能，输出一个函数，可以用来查询DOM节点的CSS选择器。
    比如：require(["dojo/query!sizzle"], function(query){
            query("div")...
        （Sizzle是一个纯javascript CSS选择器引擎）
    2、如果你想用CSS3伪类选择器，可以这样：
        require(["dojo/query!css3"], function(query){
            query('#t > h3:nth-child(odd)')...
        3、query(selector,context)第一个参数是CSS选择器(String)，第二个参数是可选的上下文来限制搜索范围(String|DomNode)
    比如：require(["dojo/query", "dojo/dom"], function(query, dom){
          var nl = query(".someClass", "someId");
          // or
          var node = dom.byId("someId");
                 nl = query(".someClass", node);
          });
    4、dojo/query()返回的是一个NodeList类数组对象，(判断是否是数组的最简单也是最有效的方法：
                            function isArray(arr) {
                                           return Object.prototype.toString.call(arr) ==="[object Array]";
                                    })
       NodeList可以直接使用数组的方法，最常见的几种方法：
        ①at(),返回一个新的NodeList，数字参数(可以是多个)支持负数参数(原来的NodeList下标)指定新的NodeList下标0开始，比如：
        require(["dojo/query"], function(query){
                    var nodelist = query("ul > li").at(0,-1);
                    console.log(nodelist);
            });
        <ul><li id="l1"></li>
                <li id="l2"></li>
                <li id="l3"></li>
                <li id="l4"></li>
                <li id="l5"></li></ul>
        ②concat()返回一个新的NodeList，和数组的拼接一样，如：
         require(["dojo/query"], function(query){
                    var nodelist = query("h1").concat(query("h2"));
                    console.log(nodelist);
                });
        ③end()该方法没有参数，用在超链接中，回到之前的NodeList，如：
         require(["dojo/query", "dojo/NodeList-dom"], function(query){
                   query("a")
                    .filter(".disabled")
                    .style("color", "grey")
                    .end()
                    .style("fontSize", "50px");
                });
        ④every()、some()该方法是数组的迭代方法;
        其中every()如果NodeList中每个node都返回true，它才返回true;
            some()如果NodeList中每个node都返回false，它才返回false，
            every()、some()就像逻辑中的&、||比如：
        require(["dojo/query"], function(query){
             if(query(".someclass").every/some(function(node){
                return node.innerHTML == "hello";
             })){
                // function is true for every node (every)
            // function is true for at least one node (some)
             }else{
                // function is not true for every node
             }
        });
        ⑤forEach()遍历每个节点，如：
        require(["dojo/query"], function(query){
             query(".someclass").forEach(function(node){
                 // node will be each node in the list.
            });
        });
        ⑥indexOf()、lastIndexOf()查找指定参数首次(找到一个就不在继续往下找了)出现的位置，找到返回下标，找不到返回-1;
        indexOf()从左向右开始找，lastIndexOf()从右向左找 如：
        require(["dojo/query", "dojo/dom"], function(query, dom){
              var node = dom.byId("someId");
              var idx = query(".someClass").indexOf/lastIndexOf(node);
              // if idx >= 0 then node has a class of someClass
              // if idx = -1 then node doesn't have class of someClass
        });
        ⑦instantiate()类的实例化，将可选配置对象传递给构造函数，如：
        require(["dojo/query", "dijit/form/Button"], function(query, Button){
              // Converts all button nodes to dijit/form/Buttons
              query("button").instantiate(Button, {
                showLabel: true
              });
        });
        ⑧map()将NodeList中的所有node传给回调函数，返回新的NodeList  如：
        require(["dojo/query"], function(query){
              var nodelist = query("h1").map(function(node){
                return node.parentNode;
              });
          // nodelist contains all the parent nodes of every heading level 1 node
        });
        ⑨on()给NodeList中所有/指定node绑定监听事件,我们到dojo/on中继续学习  如：
        require("dojo/query", function(query){
             query("button").on("click", function(e){
                console.log("click!");
             });
            // Every button will log "click!" to the console when clicked
        });
        require("dojo/query", function(query){
             query("#mylist").on("li:click", function(e){
                console.log("click!");
             });
             // Listens for onclick events on list items in the list with an ID of "myList"
        });
        require("dojo/query", function(query){
             query("#mylist").on("li button:mouseover, li:click", function(e){
                console.log("hello!");
            });
        });
        ⑩其它像slice()，splice()，push()，pop(), shift()，unshift()等等就不在细说了，都是数组的方法。
    dojo/NodeList-data 该模块通过简单的data API扩展了NodeList，可以将data数据绑定到单独的node节点，从而可以通过查询该节点来获取数据。
       通常结合dojo/query一起用：
        require(["dojo/query", "dojo/NodeList-data"], function(query){
              query("#aNode").data("someKey", "someValue");
        });
 
       扩展了两个方法：data()，removeData()
        ①data()添加或获取NodeList中的任何数据;传两个参数(data("key","value"))时,函数会把这些数据data设置在NodeList的每个node中;
        传一个参数(data("key"))时，它会作为一个getter返回一个数组arr(arr[0]指定key的值)。如：
        require("dojo/query", "dojo/NodeList-data", function(query){
              query("#foo").data("bar", "baz");
              var values = query("#foo").data("bar");
              if(values[0] == "baz"){
                  // do something
              }
        });
        当data()作为setter时，它返回的是实例化NodeList的操作，所以可以继续操作  如：
        require("dojo/query", "dojo/NodeList-data", function(query){
              query(".someClass")
                 .data("bar", "baz")
                 .data("qat", "qut");
        });
        data()也可以接收一个对象，然后将数据混合到该节点：
        require("dojo/query", "dojo/NodeList-data", function(query){
              query("#foo").data({
                   a: "bar",
                   b: "baz",
                   c: [0, 1, 3]
              });

var a = query("#foo").data("a")[0];
              // a == "bar"
              var b = query("#foo").data("b")[0];
              // b == "baz"
              var c = query("#foo").data("c")[0];
              // c == [0, 1, 3]
        });
        当data()调用没有参数时，它返回一个包含所有的数据值的数组：
        require(["dojo/query", "dojo/NodeList-data"], function(query){
              query("#foo").data("a", "bar")
                  .data("b", "baz")
                  .data("c", [0, 1, 3]);

var values = query("#foo").data()[0];
               // values == { a: "bar", b: "baz", "c": [0, 1, 3] }
        });

②removeData()删除数据，指定参数key时，删除指定key的属性;没有参数则删除所有数据：
        require(["dojo/query", "dojo/NodeList-data"], function(query){
              query("#foo").removeData(); // add data removed
              query("#foo").removeData("bar"); // only "bar" removed
        });
        当DOM改变时，有些节点不存在时可以手动删除不存在的节点的数据：
        require(["dojo/_base/kernel", "dojo/NodeList-data"], function(kernel){
              kernel._gcNodeData();
        });