从零开始学_JavaScript_系列（九）——dojo(2)（AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅）

如果没有接触过dojo，建议阅读：

http://blog.csdn.net/qq20004604/article/details/51028702

里面介绍了如何加载dojo。

关于dojo的下载，请查看：

https://dojotoolkit.org/download/

建议下载FULL SOURCE版

如果需要讨论，请评论、或者站内信，我会尽快回复。

（21）和（22）写的不好，跳过。

（23）AJAX异步加载

插件：dojo/request

参数：request

语法（get）：

request.get(URL).then(成功回调函数,失败回调函数);

第一个回调函数是成功的，参数用response；（也可以用其他的）

第二个回调函数是失败的，参数用error；（也可以用其他的）

 

注：

①读取本地比较简单，直接填写本地的url即可；

②如果读取服务器端（比如数据库），那么需要相应的支持，例如python脚本等（我自己目前对python、和服务器端的数据交换等了解的很少，所以没法写的更详细）

 

如代码：

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

 //被赋值给某个块，这个块用来显示接受的内容

 var resultDiv = dom.byId("resultDiv");

 on(dom.byId("textButton"), "click", function(evt)

 request.get("a.txt").then

 function(response)

 alert(response); //假如加载成功，输出之

 resultDiv.innerHTML = " pre " + response + " /pre //这里的 pre 是HTML标签

 function(error)

 alert(error); //假如加载失败，输出失败提示

 resultDiv.innerHTML = " div "error\" " + error + " div //也 span 是HTML标签 /span 

精简后：

require(["dojo/request","dojo/domReady!"],function(request)

 request.get("a.txt").then

 function(response)

 alert(response);

 function(error)

 alert(error);

 

语法（post）：

这里post，是跟和服务器交互的程序有关的（比如是python脚本），所以post请求服务器的话，要符合python脚本的要求。

关于python脚本我不太懂，但关于post的某些用法，可以参照后面的内容（比如grid表格）

（24）时间控件

①样式表，需要在 head 的两个标签之间加入

 link rel="stylesheet" href="dijit/themes/claro/claro.css" 

②渲染：需要使用

 script dojoConfig = {parseOnLoad: true} /script 

在加载插件之前

 

③插件加载：

 script 

 require(["dojo/parser", "dijit/form/DateTextBox"]);

 /script 

④代码：

 body !--这里必须用body，经测试，使用其他的会导致样式丢失-- 

 label for="date1" Drop down Date box: /label 

 input type="text" name="date2" id="date2" value="2016-04-01" data-dojo-type="dijit/form/DateTextBox" required="true" / !--name和id可以被更改，value的月和日需要两位-- 

 /body 

由于必须被body标签所包含。所以如果body需要有其他class，或者这样用可能有其他影响，

所以干脆在 body 标签内部再加入一对 body ，带上 ，（或许可以考虑用其父标签，加入 ，但我未验证）然后包含所包含的内容

 

⑤效果：

⑥如果需要添加读取选择时间，和加入与当前时间的比较功能，则需要使用：

1 添加按钮：

 input type="button" id="qq" value="点击获取当前秒数（从某个日期到现在的）" 

2 加载jquery文件，然后设置响应的命令

 script 

 $(document).ready(function()

 $("#qq").click(function()

 UserTime=document.getElementById(date2).value; //必须用这个才能得到值，不能用$("#date2").value

 //alert(UserTime); //通报设置的时间

 UserTime_Seconds=(new Date(UserTime)).getTime(); //也是必须用(new Date(p))才可以，此时获取的是字符串的秒数

 UserTime_Seconds=parseInt(UserTime_Seconds); //此时获取的是number格式的秒数

 NowTime=new Date();

 //alert(NowTime): //通报当前系统时间

 NowTime_Seconds=(new Date(NowTime)).getTime();

 NowTime_Seconds = parseInt(NowTime_Seconds);

 if(NowTime_Seconds UserTime_Seconds)

 alert("当前时间 is after the config time");

 else

 alert("当前时间 is before the config time") ;

 /script 

即可。

（25）鼠标移动触发事件

插件：dojo/mouse

参数：mouse

 

情况一：

当鼠标进入时（mouse.enter）触发事件，如代码：

require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse)

 pp=dom.byId("aa"); //该对象赋值给pp

 on(pp,mouse.enter,function(evt) //鼠标进入时触发

 domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue

情况二：

当鼠标离开时（mouse.leave）触发事件，如代码：

require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse)

 pp=dom.byId("aa"); //该对象赋值给pp

 on(pp,mouse.leave,function(evt) //鼠标离开时触发

 domStyle.set(pp,"background-color","red"); //设置pp的背景色为red

两个结合起来，效果为：

①初始为默认色；

②鼠标进入时背景色变蓝；

③鼠标离开时背景色变红；

 

情况三：

当鼠标点击时（"click"）触发事件，如代码：

require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse)

 a=0;

 pp=dom.byId("aa"); //该对象赋值给pp

 on(pp,"click",function(evt) //鼠标进入时触发

 if(a==0)

 domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue

 a=1;

 else 

 domStyle.set(pp,"background-color","red"); //设置pp的背景色为red

 

（26）样式修改（style）

插件：dojo/domStyle

参数：domStyle

语法：

domStyle.set(对象, css属性, 设置的属性);

 

例子：

pp=dom.byId("aa"); //该对象赋值给pp

domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue

（27）on的通用写法

插件：dojo/on

参数：on

语法：

on(element, event name, handler);

解释：

①参数一为元素（可以直接是id的值，也可以是通过dom.byId赋值的变量）；

②参数二为事件名称，如鼠标的"click"，mouse.enter等；

③参数三为如何处理，可以是一个函数（function(){........}）；

 

 

 

（28）移除触发事件

插件：不能确定是否需要插件

参数：同上

语法：使用 对象.remove() 命令

代码：（修改25中的代码）

require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse)

 a=0;

 pp=dom.byId("aa"); //该对象赋值给pp

 var obj=on(pp,"click",function(evt) //鼠标进入时触发

 if(a==0)

 domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue

 a=1;

 else 

 domStyle.set(pp,"background-color","red"); //设置pp的背景色为red

 a=0;

 obj.remove();

 

效果：

①第一次点击变为蓝色，第二次点击变为红色；

②之后再点击将不会继续改变。

③即使将 obj.remove()移动到else的第一行，依然不影响else整体代码的执行（说明当前的会执行完毕，下一次不会继续执行）

 

 

 

（29）上下文关系

插件：dojo/_base/lang

参数：lang

情况：

①当一个对象A，他有一个方法使用this时，若其他对象B调用这个对象的方法，那么this表示的则不是对象A，而是对象B。

②如代码；

myObject = {

 id: "myObject",

 onClick: function(evt)

 alert("The scope of this handler is " + this.id);

on(myScopedButton1, "click", myObject.onClick);

③在on这一行代码，他的回调函数是对象myObject的方法onClick的函数，而这个函数理论上，this.id输出的是myObject（在之前所声明）。

④但事实上，在on这行代码的触发事件中，id的值并非是myObject，而是myScopedButton1的id=myScopedButton1"。

备注：

①myScopedButton1需要有id属性（来自this.id），如果没有id属性（或者this.id被修改为this.pppp这样），那么提示将会是underfined（这里的id不是指myOjbect里id:"myObject",，而是指的是this.id属性）。

 

 

解决办法：

语法：lang.hitch(对象, "对象的方法名");

代码：（为了防止误解和明确作用，故修改代码）

myObject = {

       id1:"myObject",

       onClick1:function(evt){

       alert("The scope of thishandler is " + this.id1);

       }

};

on(myScopedButton2, "click",lang.hitch(myObject, "onClick1"));

解释：

①首先，这个回应的结果是myObject；

②这里的方法是对象myObject的方法onClick1（请不要误解为这是事件click，只是一般会为之起名onClick表示是当点击时调用的方法）；

③this.id1指的是当前对象的id1属性。

④因此说明，回调函数是对象myOjbect的方法onClick1（函数），this指的是myObject，而不是myScopedButton2）

⑤lang.hitch的第二个参数也可以用myObject.onClick1来替代。

 

 

 

（30）class选择器

插件：dojo/query

参数：query

语法：

query(".className")

如代码：

假设有块： buttonid="myScopedButton1" 测试 /button

那么

myScopedButton1 = query(".aa");

相当于

myScopedButton2 = dom.byId("myScopedButton2");

前提：

① 只有这一个

②如果有多个，相当于选择了全部的

（31）on的另一种写法：

插件：同on

参数：同on

之前的方法：

on(myScopedButton1, "click", myObject.onClick);

另一种方法：

myScopedButton1.on( "click", myObject.onClick);

（32）选择父块是A块的B、C块（不同按钮共享同一个事件）

插件：如果是class选择器，需要dojo/query

参数：可能需要query

代码；

html部分：

 div id="mmm" 

 button id="test" value="1" 测试1 /button 

 button id="test" value="2" 测试2 /button 

 /div 

 

dojo部分：

①对象方法：

myObject = {

 id: "myObject",

 onClick: function(evt){

 alert("The scope of this handler is " + this.value);

②事件：

ppp = dom.byId("mmm");

on(ppp, "#test:click", myObject.onClick);

注意：事件这里没有使用上下文关系（lang.hitch），因此返回的是自己的value

 

效果：

①点击“测试1”按钮时，返回值1；

②点击“测试2”按钮时，返回值2；

 

解释：

①on(ppp, "#test:click", myObject.onClick);

代码的意思是，在ppp所代表的块内（里面有若干个东西），id为test的（所有块或组件）被点击时，触发事件myObject.onClick

②如果有插件dojo/query和参数query，那么可以使用class选择器（"#test:click"被".aa:click"替代）。

③this.value根据测试，不能随意更改，只能更改为预设的属性。例如id、value等。

假设块为 buttonid="test" temp="1" 测试1 /button

this.value被更改为this.temp，那么返回值是underfined

 

 

 

（33）消息发布、消息订阅（topic.publish()和topic.subscribe()）

根据查到的资料，这个功能似乎很强大，不过没搞懂topic.subscribe，这里只说最简单的。

插件：dojo/topic

参数：topic

代码：

require(["dojo/on", "dojo/topic", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"],

 function(on, topic, domConstruct, dom) {

 t1 = dom.byId("test1");

 t2 = dom.byId("test2");

 on(t1, "click", function()

 topic.publish("mm", "T1的提示"); //publish推送消息，第一个参数是消息名称（唯一），第二个~更多参数是消息内容

 i=3;

 on(t2, "click", function()

 var moreButton = domConstruct.create("button", {innerHTML:"t"+i}, t2, "after"); //注意，创建的新按钮位置在旧按钮之前，例如t2, t5, t4, t3这样形式的

 i++;

 on(moreButton, "click", function()

 topic.publish("mm", "T"+i+"的提示"); //注意，这里的i不是创建按钮时的i，而是当前的i的值

 topic.subscribe("mm",function(text) //接受消息，第一个参数是消息名称，第二个参数是回调函数

 alert(text);

 

代码解释：

①初始有两个按钮：“测试1”和“测试2”。测试1点击后alert，测试2点击后创建新按钮（可以多次创建），新按钮点击后alert

②关于alert行为：点击后并非直接alert，而是通过topic.publish推送消息。推送的第一个参数是消息名（唯一，用于区分），第二个参数（或更多的参数）是具体的消息；

③通过topic.publish推送的消息，依靠topic.subscribe来接受消息。第一个参数是消息名（用于决定是否响应），第二个参数是回调函数（回调函数的参数是消息的名字，第一个参数是第一个消息，第二个参数是第二个消息，依此类推）；

④在接收到消息名符合的消息之后，subscribe触发回调函数，将消息alert出来。

 

 

其过程如图：

至于如何发送、发送的存放在哪、如何响应的，不管（想管也不明白呀）

只知道前一个能发送，后一个能在发送时响应即可。

这个的好处在于，可以不同的对象发送消息，然后同一个对象响应（比如alert发送的消息）