Dojo框架學習筆記<二>

1、dojo/dom
    該模塊定義了Dojo Dom API，主要有如下幾種用法：
    一、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>
    二、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>
    三、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>
  四、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");
       })
    五、dojo/dom-class
    contains()，add()，remove()，replace()，toggle()對node className的增刪改查...
    六、dojo/dom-construct
    toDom()實例化一個HTML片斷返回相應的DOM
    place()在已有的DOM樹添加或者更改HTML片斷
    create()建立DOM簡化DOM操做
    empty()刪除子元素
    destroy()刪除DOM，包括自身
    七、dojo/dom-form 該模塊定義了表單處理功能
    fieldToObject()接收表單id返回它的值，跳過禁用表單控件和沒選擇的radio和checkbox，若是是select返回一個values的字符串數組
    toObject()接收表單id返回{"name":"value"，"name":"value"...}對象，跳過禁用表單控件和沒選擇的radio和checkbox
    toQuery()將輸入表單的數據轉換爲URL
    toJson()將輸入表單的數據轉換爲JSON對象
    八、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()
    九、dojo/dom-prop 該模塊是獲取或設置DOM的各類類型屬性,dojo/dom-style獲取或設置DOM節點的Style
    get(),set()
    十、dojo/domReady! AMD加載插件，等到DOM加載完成後
2、dojo/query
    一、該模塊提供了DOM查詢功能，輸出一個函數，能夠用來查詢DOM節點的CSS選擇器。
    好比：require(["dojo/query!sizzle"], function(query){
            query("div")...
        （Sizzle是一個純javascript CSS選擇器引擎）
    二、若是你想用CSS3僞類選擇器，能夠這樣：
        require(["dojo/query!css3"], function(query){
            query('#t > h3:nth-child(odd)')...
        三、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);
          });
    四、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();
        });