文章目录

一、dojo常见API

一、dojo常见API

1、dojo/_base/declare

（1）作用：该模块用于声明一个类，类似于js 的class的作用。

（2）用法：declare（className, superClass， properties）

className：类名，有省略写法
superClass：继承的父类，一般为null
properties：对象（js中的prototype(原型对象)，用于创建类时的继承）

（3）案例

// 常用写法，省略类名
var myclass=declare(null,{
  // 可以定义属性，
  // 可以定义方法，
  // 可以定义constructor：
});

// 不常用写法
declare("myclass",null,{
  // 同上
});

（4）参考链接

declare使用详解：https://blog.csdn.net/cexo425/article/details/19119737

2、dojo/_base/lang

（1）作用：就是一个扩展模块，提供了一些有用的方法

（2）用法：部分函数说明

clone(对象)：克隆任何对象或者元素节点，返回：一个新的对象。
hitch(新的对象，执行函数)：会在给定的上下文中执行给定一个执行函数。类似于JS的apply/call/bind改变this指向。

（3）案例

// 像下文这种异步回调函数的应用场景，当代码正在执行时，上下文会发生变化。执行上下文环境已经不再是最初提供的对象，而指向了外部对象（on的回调函数），为了解决这个问题，你可以使用hitch()去强制processEvent在此时“this”指向的上下文来执行。
require(["dojo/on", "dojo/_base/lang"], function(on, lang){
  var processEvent = function(e){
    this.something = "else";
  };
  on(something, "click", lang.hitch(this, processEvent));
});

（4）参考链接

dojo/_base/lang其他函数方法参考：https://blog.csdn.net/weixin_33725272/article/details/86043646
dojo/_base/lang –hitch()函数详解：https://blog.csdn.net/long_chuanren/article/details/83896948

3、dojo/_base/array

（1）作用：封装了数组中的一些方法。类似于JS当中数组

（2）用法：跟JS的数组的方法使用类似

（3）案例

require(["dojo/_base/array"],function(arrayUtil){
	var arr= ['apple','orange','banana'];
	arrayUtil.forEach(arr,function(item,index){
		console.info("item:"+item+";index:"+index)
	});
});

（4）参考链接

dojo/_base/array数组方法使用参考：https://blog.csdn.net/wenjinglala/article/details/52837322

4、dojo/_base/html

（1）作用：封装了dojo中有关dom操作的方法

（2）用法：部分函数说明

dojo.byId：等效于document.getElementById

（3）案例

// dojo.byId已弃用,可用dojo/dom代替
require ([ "dojo/dom" ],  function ( dom ){ 
    // 通过 id="someNode" 获取节点
    var  node  =  dom . byId ( "someNode" ); 
});

（4）参考链接

dojo/_base/html使用参考：https://dojotoolkit.org/reference-guide/1.10/dojo/_base/html.html

5、dojo/Deferred

（1）作用：是一个类，管理异步线程的基础。其实是更棒的promis的实现

（2）用法：先定义一个对象，然后调用对象的方法

（3）案例

require(['dojo/Deferred'],function(Deferred){
            var deferred = new Deferred();
            deferred.then(
                function(result){
                    console.log("success"+result+'\t'+Date());
                    console.log("isResolved="+deferred.isResolved());
                    console.log("isFulfilled="+deferred.isFulfilled());
                },
                function(err){
                    console.log("error"+err+'\t'+Date());
                },
                function(progress){
                    console.log("progress"+progress+'\t'+Date());
                }
            )
            setTimeout(function(){deferred.progress(1);},1000);
            setTimeout(function(){deferred.progress(2);},2000);
            setTimeout(function(){deferred.progress(3);},3000);
            setTimeout(function(){deferred.resolve("ok");},3001);
            //等待异步操作回调函数执行过程中下面的代码会同时执行
            console.log("isResolved="+deferred.isResolved());
            console.log("isFulfilled="+deferred.isFulfilled());
        })

（4）参考链接

dojo/Deferred使用参考：https://blog.csdn.net/shiyangxu/article/details/81904551
dojo/Deferred类和dojo/promise类的使用：
https://blog.csdn.net/weixin_30685029/article/details/97435123

6、dojo/topic

（1）作用：发布订阅者模式，类似于vue的eventbus

（2）用法：

topic.subscribe：
用于订阅消息，接收两个参数，第一参数为要订阅的消息名字（唯一标识），如”socket/msg_arrive”，第二参数为回调函数。
topic.publish：
用于发布消息，接收任意多个参数，第一参数为要发布的信息名字（唯一标识），如”socket/msg_arrive”，其他参数为传递给订阅回调函数的参数。

（3）案例

require(["dojo/topic", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(topic, dom, on){

  var handle = topic.subscribe("some/topic", function(e){
    dom.byId("output").innerHTML = "I received: " + e.msg;
    handle.remove();
  });

  on(dom.byId("publish"), "click", function(){
    topic.publish("some/topic", { msg: "hello world" });
  });
});

（4）参考链接

dojo/topic使用参考：https://blog.csdn.net/notejs/article/details/8745735
dojo/topic使用参考：https://blog.csdn.net/idomyway/article/details/84945377

7、dojo/dom（DOM相关）

（1）作用：封装了对dom的使用方法

（2）用法：

dojo/dom模块
dojo/dom-construct模块
dojo/dom-attr模块
dojo/dom-prop模块
dojo/dom-class模块
dojo/dom-style模块
dojo/dom-form模块

（3）案例

require([ "dojo/dom" , "dojo/domReady!" ], function (dom) {
     function setText(node, text){
         node = dom.byId(node);//通过已有对象
         node.innerHTML = text;
     }
     var one = dom.byId( "one" );//通过字符串
     setText(one, "One has been set" );
     setText( "two" , "Two has been set as well" );
});

（4）参考链接

dojo/dom使用参考：https://blog.csdn.net/shiyangxu/article/details/81433223

8、dojo/on

（1）作用：事件绑定问题，类似于JS的事件监听

（2）用法：on(element,event.name,handler)

（3）案例

require(["dojo/on", "dojo/dom","dojo/domReady!"],
    function(on, dom) {
    //获得dom元素
    var btn= dom.byId("btn")
    //给DOM元素绑定事件
    on(btn, "click", function(evt){
    alert("按钮被点击了");           
    });
})

（4）参考链接

dojo/on使用参考：https://blog.csdn.net/LoveCarpenter/article/details/54728455

9、dojo/aspect

（1）作用：在目标对象的某方法执行后/执行钱/拦截执行一个函数

（2）用法：before、after、around三个方法

（3）案例

// 参考链接的内容

（4）参考链接

dojo/aspect使用参考：https://blog.csdn.net/notejs/article/details/8745685

10、dojo/query（DOM相关）

（1）作用：组合了js原生dom获取以及处理的操作。

（2）本义：是根据一定的条件查询并获取某些 HTML 元素的引用，然后对这些元素进行操作以改变它们的属性、外观等。

（3）案例

// 参考链接

（4）参考链接

dojo/query介绍及使用参考：https://blog.csdn.net/dragonzoebai/article/details/8548209
dojo使用query dojo/query参考：https://blog.csdn.net/qq_36330643/article/details/72356823

11、dojo/dom-construct（DOM相关）

（1）作用：该模块定义了核心 dojo DOM 构建 API。

（2）用法：

domConstruct.toDom()：用来将html标签字符串转化成DOM节点。
domConstruct.place()：将现有节点放置在 HTML 文档中的某个位置
domConstruct.create()：创建DOM节点
domConstruct.empty()：清空 DOM 元素的内容。删除所有子节点，但将节点保留在那里。
domConstruct.destroy()：删除所有子节点和节点本身