开始Dojo学习以及遇到的问题

曾经下载过一本PDF的《精通Dojo》，利用圣诞的假期，很认真的开始学习。书是好书，无奈已经严重落伍，当前1.8.2的版本废弃，甚至删除、改名了大量早先版本的类，连推荐的做法也从原来的历史遗留方式到了AMD（Asynchronous Module Definition）。所以尽管才看了200多页，后续就越来越粗略的浏览了。

回到有网络的家中，跟着dojo官网的教程继续学习。说实话感觉这些专题型的教程不够系统化，突然跳出来一堆内容，如果没有一定概念，看的满脑子都是问题。

不管怎么样，有总比没有好。

看再多的教程，读再多的文章都不如自己动手更能记住内容。

由此产生了记录错误的念头，那就放在这边吧。

页面存在一个dijit.layout.BorderContainer 同时又安置了一个dijit.form.Button,在满足layout的情况下，给button绑定方法。

<html>
	<head>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
			
		</div>
		<div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
		<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
		<script>
			require(["dojo/parser","dojo/ready","dijit/registry","dojo/on","dijit/form/Button"],function(parser,ready,registry,on,button){
					var myClick = function(){
						console.log("I was clicked");
					};
					ready(function(){
						parser.parse();
						on(registry.byId("button4"),"click",myClick);
					});
				});
		</script>
	</body>
</html>

错误如下：

经检查，意外发现registry.byId("button4")居然只是返回undefined.

分析一下，感觉问题出在parser上，因为没有parser成功registry.byId就无法成功获取。

改一下代码，不用代码parse改用config时候指定parSEOnLoad

<html>
	<head>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
			
		</div>
		<div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
		<script src="dojo/dojo.js" data-dojo-config="async: true,parSEOnLoad:true"></script>
		<script>
			require(["dojo/parser",myClick);
					});
				});
		</script>
	</body>
</html>

再读一遍代码，忘记去掉代码的parse，删除后代码如下：

<html>
	<head>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
			
		</div>
		<div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
		<script src="dojo/dojo.js" data-dojo-config="async: true,button){
					var myClick = function(){
						console.log("I was clicked");
					};
					ready(function(){
						//parser.parse();
						on(registry.byId("button4"),myClick);
					});
				});
		</script>
	</body>
</html>

点击button后效果：

效果达到，但是还是希望通过代码来parse。继续分析，怀疑parser.parse()未执行完毕就执行到后续代码导致的问题，于是尝试延迟执行，代码如下：

<html>
	<head>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
			
		</div>
		<div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
		<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
		<script>
			require(["dojo/parser",button){
					var myClick = function(){
						console.log("I was clicked");
					};
					ready(function(){
						parser.parse();
						setTimeout(function(){
						on(registry.byId("button4"),myClick);
						},1000);
					});
				});
		</script>
	</body>
</html>

setTimeout有效，证实了想法，于是果断改一下config中async内容：

<html>
	<head>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
			
		</div>
		<div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
		<script src="dojo/dojo.js" data-dojo-config="async: false"></script>
		<script>
			require(["dojo/parser",myClick);
					});
				});
		</script>
	</body>
</html>

果然有效，异步的大问题。但是按照教程中的说法，非异步有那么点反人类，再继续搜索，查找到官方文档的做法，发现then函数正好满足需求，修改代码如下：

<html>
	<head>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
	</head>
	<body class="claro">
		<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
			
		</div>
		<div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
		<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
		<script>
			require(["dojo/parser",button){
					var myClick = function(){
						console.log("I was clicked");
					};
					ready(function(){
						parser.parse().then(function(){
						on(registry.byId("button4"),myClick);
						});
					});
				});
		</script>
	</body>
</html>

总结一下，这个then的操作，本质上就是parse方法的callback函数，但是使用更加方便，又是异步的调用，又能保证一定的顺序。

开始Dojo学习以及遇到的问题

猜你在找的Dojo相关文章