20190320 Dojo經常使用方法總結

0. 使用環境

Dojo版本：1.14.2
這次總結以dojo的base爲主，即不須要手動引入組件

1. 經常使用不歸類方法

1.1. dojo.addOnLoad

在頁面加載完成而且dojo.require語句的請求也返回告終果以後執行

dojo.addOnLoad(function () {
    /* Any content that depends upon dojo.require statements goes here... */
});

1.2. dojo.isXXX

1.2.1. 檢測底層瀏覽器

用於檢測瀏覽器， 源代碼位於\dojo\_base\sniff.js，當前版本不推薦直接使用，而是使用dojo.sniff，可是直接使用很方便。
若是是，返回對應瀏覽器的版本號。

dojo.isIE
dojo.isFF       // 是否爲FireFox
dojo.isChrome
...

1.2.2. 檢測類型

代碼位於js/dojo/1.14.2/dojo/_base/lang.js

dojo.isString
dojo.isArray
dojo.isFunction
dojo.isObject
dojo.isArrayLike
dojo.isAlien        // 是內置函數或ActiveX組件之類的本地函數

1.3. 經過模塊管理源代碼

dojo.provide    // 
dojo.require    // 
dojo.declare    // 聲明構造函數

2. DOM操做

2.1. 查找節點

2.1.1. dojo.byId

替代document.getElementById的方法。

2.1.2. dojo.query

經過CSS3風格的語法實現快速查詢節點

dojo.query("d2");
dojo.query(".cc");
dojo.query("div#d3");
dojo.query("div.cc");
dojo.query("form[name='foo']");

2.2. 構造節點

dojo.toDom(("<tr><td>First!</td></tr>"));       // 字符串轉DOM
dojo.create("tr");      // 返回節點
dojo.empty("d1");       //清空節點內容
dojo.place("d2","d1");              // 將d2節點放在d1節點內，做爲最後一個子節點
dojo.place("d2","d1","before");     // 將d2節點放在d1節點以前，第三個參數的值域爲：before, after, replace, only, first, last

2.3. DOM實用功能

2.3.1. dojo.isDescendant

斷定祖先

dojo.isDescendant('s1','d4');       // true

2.3.2. dojo.setSelectable

設置可選擇性，是否能夠選中

dojo.setSelectable("d1");           // 設置不可選中
dojo.setSelectable("d1",true);       // 設置可選中

2.3.3. 爲節點添加樣式

2.3.3.1. dojo.style

dojo.style("d1", {
    height : "100px",
    width : "100px",
    border : "solid 3px red"
});

2.3.3.2 對節點的class屬性的操做

代碼位於/dojo/_base/html.js和/dojo/dom-class.js

dojo.hasClass("d4","ac");

// addClass，三種寫法
dojo.addClass("d1","d1c");
dojo.addClass(dojo.byId("d1"),"d2c");
dojo.query("d1").addClass("d1c");   // 這裏必須是 dojo/NodeList 才能夠執行此操做

// 三種寫法，同addClass
dojo.removeClass("d4","ac");

dojo.toggleClass("d4","ac")

dojo.replaceClass("d4","dc","ac");

2.3.4. 操做屬性

dojo.attr("d4","attr1");            // 得到d4節點的attr1屬性
dojo.attr("d4","attr1","dd");       // 設置d4節點的attr1屬性
dojo.hasAttr("d1","attr1");
dojo.removeAttr("d1","attr1")

3. 實用工具

3.1. 數組處理

// 查找元素位置
dojo.indexOf([1,2,3,4,3], 3);       // 2
dojo.lastIndexOf([1,2,3,4,3], 3);   // 4

// 根據條件測試元素
dojo.every([2,4,6], function (x) { return x % 2 == 0 });    // true
dojo.some([3,5,7], function f(x) { return x % 2 == 0 });    // false

// 迭代操做元素
dojo.forEach([1,2,3], function(x) {
  console.log(x);
});

// 轉換元素
var z = dojo.map([2,3,4], function(x) {
  return x + 1;
}); //returns [3,4,5]

dojo.filter([2,3,4], function(x) {
  return x % 2 == 0;
}); //returns [2,4]



// every，some，forEach，map，filter支持簡化的字符串式函數
// 以every爲例，其餘用法同樣
[2,4,6].every(function (x) { return x % 2 == 0 });

3.2. JavaScript對象實用程序

3.2.1. dojo.mixin、dojo.extend

// mixin生成一個對象實例，該實例混入了其餘對象的結果；
// extend修改的是一個函數的原型；
dojo.mixin
dojo.extend

function Man(  ) {
  this.x = 10;
}

function Myth(  ) {
  this.y = 20;
}

function Legend(  ) {
  this.z = 30;
}

var theMan = new Man;
var theMyth = new Myth;
var theLegend = new Legend;

function ManMythLegend(  ) {}

// dojo.mixin
// var theManTheMythTheLegend = new ManMythLegend;
// dojo.mixin(theManTheMythTheLegend, theMan, theMyth, theLegend);

// dojo.extend
// dojo.extend(ManMythLegend, theMan, theMyth, theLegend);
// var theTheManTheMythTheLegend = new ManMythLegend;

3.2.2. dojo.clone

JavaScript提供的是淺複製，dojo提供的是深複製，根據須要選擇

function foo(  ) {
    this.bar = "baz";
}

var foo1 = new foo;
var foo2 = foo1;        // 淺複製

console.log(foo1.bar);  // baz
console.log(foo2.bar);  // baz

foo1.bar = "qux";

console.log(foo1.bar);  // qux
console.log(foo2.bar);  // qux

foo3 = new foo;
foo4 = dojo.clone(foo3); // 深複製

foo3.bar = "qux";

console.log(foo3.bar); // qux
console.log(foo4.bar); // baz

3.3. 事件相關

3.3.1. dojo.connect / dojo.disconnect

爲節點添加UI事件

// 一次性事件
var handle = dojo.connect(dojo.byId("d1"), "onclick", function () {
    console.log("d1...");
    dojo.disconnect(handle);
});

3.3.2. dojo.keys

鍵碼的標準化，代碼位於 js/dojo/1.14.2/dojo/keys.js

dojo.keys.ENTER     // 13，回車鍵的碼

3.3.3. 阻止事件

dojo.stopEvent(event);      // 抑制瀏覽器導航，並阻止事件冒泡，等同於   evt.preventDefault();evt.stopPropagation();

3.3.4. JSON

dojo.fromJson(/*String*/ json);     // 返回JSON對象
dojo.toJson(/*Object*/ json, /*Boolean?*/ prettyPrint);     // 返回JSON字符串

dojo.fromJson('{"k1":"v1","k2":"v2"}');
dojo.toJson({'k1':'v1','k2':'v2'});
dojo.toJson({'k1':'v1','k2':'v2'}, true);

3.3.5. Ajax

dojo.xhr(/*String*/ method, /*Object*/ args, /*Boolean?*/ hasBody)

dojo.xhr("GET", {
    url: 'http://localhost:63342/TestInIDEA/DOJO/html/main/1.html',
    handle: function (loadOrError, response, ioArgs) {
        
    }
});

3.3.6. 表單

dojo.formToObject("register");
    {first: "Foo", last: "Bar", favorites: Array(2)}
dojo.formToJson("register");
    "{"first":"Foo","last":"Bar","favorites":["green","blue"]}"
dojo.formToQuery("register");
    "first=Foo&last=Bar&favorites=green&favorites=blue"

dojo.queryToObject("first=Foo&last=Bar&favorites=green&favorites=blue");
    {first: "Foo", last: "Bar", favorites: Array(2)}
dojo.objectToQuery(dojo.queryToObject("first=Foo&last=Bar&favorites=green&favorites=blue"));
    "first=Foo&last=Bar&favorites=green&favorites=blue"

4. 使用擴展

1. dojo.string
2. dojo.date
3. dojo.number
4. dojo.currency
5. dojo.Color

dojo.Color.named.black

參考資料

• 《DOJO權威指南》