Dojo学习笔记

hello world入门

dojo.addOnLoad(function() {
    dojo.create(
        "div",
        {
            "innerHTML": "Hello, Huangbaokang!"
        },
        dojo.body()
    );
});

可以使用cdn等方式引入，或者本地引入，远程域名引入地址https://download.dojotoolkit.org/release-1.15.0/dojo.js

事件

huangbaokang

命名空间，模块化

也可以使用如下方式，设值和取值

dojo.setObject("foo.bar.baz.qux",1);
console.log(foo.bar.baz.qux);

模块化的例子

模块化，有利于项目代码维护管理，避免重复造轮子，写好一个模块，需要用到的时候，只需要require进来即可。

D:/dojo/com/hbk.js

dojo.provide("com.hbk");
com.hbk = function(){}
com.hbk.prototype._answers = [
	"是的",
	"可能吧",
	"也许你是对的"
]
com.hbk.prototype.init = function(){
	var label = document.createElement("p");
	label.innerHTML = "问一个问题，hbk将回答你";

	var question = document.createElement("input");
	question.size = 50;

	var button = document.createElement("button");
	button.innerHTML = "请问一下";
	button.onclick = function(){
		alert(com.hbk.prototype._getAnswer());
		question.value = "";
	}

	var container = document.createElement("div");
	container.appendChild(label);
	container.appendChild(question);
	container.appendChild(button);

	dojo.body().appendChild(container);
}

com.hbk.prototype._getAnswer = function(){
	var idx = Math.round(Math.random()*3);
	return this._answers[idx];
}

D:/dojo/hbk.html

在测试的时候，发现存在跨越访问问题，于是在本地搭建了一个nginx服务解决此访问问题，最终界面如下：

server {
        listen       8081;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
        location / {
            #root   html;
            #index  index.html index.htm;
			root D:/dojo/;
			index hbk.html; 
			
        }
  }

mixin的使用

而dojo.extend实际上修改的是一个函数的原型。

克隆对象

function person(){
		this.author = "huangbaokang";
	}
	var hbk = new person;
	var hbk2 = hbk;// 浅复制
	console.log(hbk.author);// 输出 huangbaokang 
	console.log(hbk2.author);// 输出 huangbaokang

	hbk.author = "zhanglulu";
	console.log(hbk.author);// 输出 zhanglulu
	console.log(hbk2.author);// 输出 zhanglulu  一同被修改了

可以看到默认的js等于是浅复制，原对象属性修改了，复制的对象的属性也一同修改了。
有的时候我们需要杜绝这种情况，我们可以使用dojo.clone深度克隆。

var hbk3 = new person;
var hbk4 = dojo.clone(hbk3);
hbk3.author = "修改作者名";
console.log(hbk3.author); // 输出修改作者名
console.log(hbk4.author); // 输出 huangbaokang 克隆的原始属性没有被修改

partial语法

dojo的这个语法其实是参数传递的一种特性，我还是第一次见，勿喷。

function threeAdd(x,y,z){
		return x+y+z;
	}
var f = dojo.partial(threeAdd,10,20);// 先求前两个数的和
f = dojo.partial(f,30);
console.log(f());// 输出60

hitch环境上下文

var foo = {
		name : "Foo",
		greet : function(){
			console.log("I'm "+this.name)
		}
	}

	var bar = {
		name : "Bar",
		greet : function(){
			console.log("I'm "+this.name)
		}
	}

	foo.greet();//输出I'm Foo
	bar.greet();//输出I'm Bar
	bar.greet = foo.greet;
	bar.greet();//输出I'm Bar  this执行环境的原因

	// 把bar的greet方法绑定到另外一个环境
	bar.greet = dojo.hitch(foo,"greet");
	bar.greet();//输出I'm Foo

发布订阅模式

function Foo(topic){
		this.topic = topic;
		this.greet = function(){
			console.log("I'm Foo");
			dojo.publish(this.topic);
		}
	}


	function Bar(topic){
		this.topic = topic;
		this.greet = function(){
			console.log("I'm Bar");
		}
		dojo.subscribe(this.topic,this,"greet");
	}

	var foo = new Foo("/hbk/msg");
	var bar = new Bar("/hbk/msg");
	foo.greet();// 输出 I'm Foo   I'm Bar

JSON工具转换

var hbk = {author:"huangbaokang",age:30,address:"ganzhou"};
console.log(dojo.toJson(hbk,true));// true表示美化代码输出

控制台输出

{
	"author": "huangbaokang",
	"age": 30,
	"address": "ganzhou"
}

反过来，从json字符串转JSON对象

var str = "{\"author\": \"huangbaokang\",\"age\": 30,\"address\": \"ganzhou\"}";
console.log(dojo.fromJson(str));

ajax请求

dojo.addOnLoad(function(){
		dojo.xhrGet({
			url:"http://localhost:8080/",
			//handleAs:"json",
			timeout:5000,// 如果在5秒后还没有响应就调用error处理函数
			//postData:"{id:'170'}", post请求时的参数传递
			// 如果请求成功，那么运行这个函数
			load:function(response,ioArgs){
				console.log(response,ioArgs);
				dojo.byId("hbk").innerHTML = response;
				return response;// 总是返回response
			},
			// 请求不成功，运行这个函数
			error:function(response,ioArgs){
				console.log("fail",response,ioArgs);
				return response;// 总是返回response
			}
		});
	});

Deferred

addCallback 为成功的回调函数中添加一个回调函数
addErrback 为错误的回调函数中添加一个回调函数
addBoth 添加一个同时处理成功和错误请求的回调函数
addCallbacks 同时添加成功回调函数和错误回调函数
callback 执行回调函数链
errback 执行错误回调函数链
cancel 取得请求并执行提供给构造函数的取消函数（如果提供了的话）

自定义取消函数

var canceller = function(){
// 返回一个自定义的Error对象，否则会返回默认的"Deferred Cancelled"错误
}
var d = new dojo.Deferred(canceller);// 将取消函数传入构造函数中
d.cancel();// 错误处理函数将按照自定义方式响应 Deferred Cancelled错误

针对表单提供如下3个使用的方法。
dojo.formToObject
dojo.formToQuery
dojo.formToJson
还有如下辅助方法：

console.log(dojo.queryToObject("author=huangbaokang&age=30&address=ganzhou"));// {author: "huangbaokang", age: "30", address: "ganzhou"}

对象转查询

var obj = dojo.queryToObject("author=huangbaokang&age=30&address=ganzhou");// {author: "huangbaokang", age: "30", address: "ganzhou"}
	console.log(dojo.objectToQuery(obj));// author=huangbaokang&age=30&address=ganzhou

除了这些，对dojo.query需要熟悉这套语法，dojo的拖动，国际化（了解）等。