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

来源：互联网发布：全局路径规划算法编辑：程序博客网时间：2024/06/08 06:29

曾经下载过一本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函数，但是使用更加方便，又是异步的调用，又能保证一定的顺序。