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. 使用扩展

dojo.string
dojo.date
dojo.number
dojo.currency
dojo.Color

dojo.Color.named.black

参考资料

《DOJO权威指南》

posted @ 2019-03-21 16:32 流星<。)#)))≦ 阅读(425) 评论(0) 编辑收藏举报

刷新页面返回顶部

20190320 Dojo常用方法总结

0. 使用环境

1. 常用不归类方法

1.1. dojo.addOnLoad

1.2. dojo.isXXX

1.2.1. 检测底层浏览器

1.2.2. 检测类型

1.3. 通过模块管理源代码

2. DOM操作

2.1. 查找节点

2.1.1. dojo.byId

2.1.2. dojo.query

2.2. 构造节点

2.3. DOM实用功能

2.3.1. dojo.isDescendant

2.3.2. dojo.setSelectable

2.3.3. 为节点添加样式

2.3.3.1. dojo.style

2.3.3.2 对节点的class属性的操作

2.3.4. 操作属性

3. 实用工具

3.1. 数组处理

3.2. JavaScript对象实用程序

3.2.1. dojo.mixin、dojo.extend

3.2.2. dojo.clone

3.3. 事件相关

3.3.1. dojo.connect / dojo.disconnect

3.3.2. dojo.keys

3.3.3. 阻止事件

3.3.4. JSON

3.3.5. Ajax

3.3.6. 表单

4. 使用扩展

参考资料

公告