当前位置 : 主页 > 网页制作 > Dojo >

dojo1.9学习总结(四)-函数上下文

来源:互联网 收集:自由互联 发布时间:2021-06-15
源代码: %@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%%String path = request.getContextPath();// 获得项目完全路径(假设你的项目叫MyApp,那么获得到的地址就是 http://localho

源代码:

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	// 获得项目完全路径(假设你的项目叫MyApp,那么获得到的地址就是 http://localhost:8080/MyApp/):    
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dijit/themes/soria/soria.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dojox/grid/resources/soriaGrid.css" />
<style type="text/css">
body,html {
	font-family: helvetica, arial, sans-serif;
	font-size: 90%;
}

th {
	font-size: 13px;
	font-family: Arial, Microsoft YaHei, SimSun, sans-serif !important;
	text-align: center;
}

td {
	font-size: 13px;
	font-family: Arial, Microsoft YaHei, SimSun, sans-serif !important;
}

div #copyright {
	text-align: center
}
</style>
</head>
<script type="text/javascript" src="<%=basePath%>dojo/dojo/dojo.js"
	djConfig="parseOnLoad:true">
	
</script>
<script type="text/javascript">
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dijit.layout.AccordionContainer");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dijit.form.Button");
	dojo.require("dijit.Dialog");
	dojo.require("dojo.parser");
</script>
<script type="text/javascript">
	var bar = "bar";
	var myObject = {
		id : "objectId",
		bar : "myObject-bar",
		onClick : function(evt) {
			var console = dojo.byId("console");
			console.innerHTML = "the bar value is " + this.bar;
		}
	};
	function getValue() {
		//此时bar="myObject-bar"
		myObject.onClick();
	}

	function getValue1() {
		var console = dojo.byId("console");
		var myObject1 = {
			id : "objectId",
			bar : "myObject1-bar",
			onClick : function(evt) {
				console.innerHTML = "the bar value is " + this.bar;
			}
		};
		//此时bar="myObject1-bar"
		myObject1.onClick();
	}
	function getValue2() {
		//此时bar=undefined,函数上下文被改变
		dojo.query("#btnValue2").connect("onclick", myObject.onClick);
	}

	//可以应用.apply和.call改变上下文
	function getValue3() {
		dojo.query("#btnValue3").connect("onclick", function fun(evt) {
			myObject.onClick.call(myObject, evt);
		});
	}

	function getValue4() {
		//dojo.query("#btnValue4").connect("onclick",dojo.hitch(myObject,myObject.onClick));
		//还可以这样写
		var change = dojo.hitch(myObject, myObject.onClick);//返回结果是一个函数
		dojo.query("#btnValue4").connect("onclick", change);
	}
</script>
<body class="soria">
	<div id="container">
		<button id="btnValue" data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:getValue">getvalue</button>
		<button id="btnValue1" data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:getValue1">getvalue1</button>
		<button id="btnValue2" data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:getValue2">getvalue2</button>
		<button id="btnValue3" data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:getValue3">getvalue3</button>
		<button id="btnValue4" data-dojo-type="dijit.form.Button"
			data-dojo-props="onClick:getValue4">getvalue4</button>

	</div>
	<div id="console" style="float: left; width: 400px;">div</div>
</body>
</html>

效果:

网友评论