曾经下载过一本PDF的《精通Dojo》，利用圣诞的假期，很认真的开始学习。书是好书，无奈已经严重落伍， 当前1.8.2的版本废弃，甚至删除、改名了大量早先版本的类，连推荐的做法也从
曾经下载过一本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","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>
再读一遍代码，忘记去掉代码的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,parseOnLoad: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>
点击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","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();
setTimeout(function(){
on(registry.byId("button4"),"click",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","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>果然有效，异步的大问题。但是按照教程中的说法，非异步有那么点反人类，再继续搜索，查找到
官方文档的做法，发现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","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().then(function(){
on(registry.byId("button4"),"click",myClick);
});
});
});
</script>
</body>
</html> 总结一下， 这个then的操作，本质上就是parse方法的callback函数，但是使用更加方便，又是异步的调用，又能保证一定的顺序。