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权威指南》