20190320 Dojo常用方法总结

时间：2022-05-12 08:10:48

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

相关文章