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

简介: 如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo。 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论、或者站内信,我会尽快回复。

如果没有接触过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 class=\"error\">" + error + "<div>";	//也<span style="font-family: Arial, Helvetica, sans-serif;">是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 class="claro">		<!--这里必须用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>,带上class="claro",(或许可以考虑用其父标签,加入class="claro",但我未验证)然后包含所包含的内容

 

⑤效果:



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

<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
			a=0
		}
	})
})


 

(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" class="aa">测试</button>

那么

myScopedButton1 = query(".aa");

相当于

myScopedButton2 = dom.byId("myScopedButton2");

前提:

①class="aa"只有这一个

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



(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" class="aa">测试1</button>
		<button id="test" value="2" class="aa">测试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"class="aa">测试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发送的消息)

 


目录
相关文章
|
3月前
|
JavaScript 前端开发
|
3月前
|
JavaScript 算法
|
3月前
|
JavaScript
|
23天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
12 0
|
3天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
19 2
|
25天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
21 1
|
1月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
18 0
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件
|
1月前
|
JavaScript
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
21 3