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

前端之家收集整理的这篇文章主要介绍了开始Dojo学习以及遇到的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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


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

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
  4. </head>
  5. <body class="claro">
  6. <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
  7. </div>
  8. <div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
  9. <script src="dojo/dojo.js" data-dojo-config="async: true"></script>
  10. <script>
  11. require(["dojo/parser","dojo/ready","dijit/registry","dojo/on","dijit/form/Button"],function(parser,ready,registry,on,button){
  12. var myClick = function(){
  13. console.log("I was clicked");
  14. };
  15. ready(function(){
  16. parser.parse();
  17. on(registry.byId("button4"),"click",myClick);
  18. });
  19. });
  20. </script>
  21. </body>
  22. </html>

错误如下:

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

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

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

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
  4. </head>
  5. <body class="claro">
  6. <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
  7. </div>
  8. <div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
  9. <script src="dojo/dojo.js" data-dojo-config="async: true,parSEOnLoad:true"></script>
  10. <script>
  11. require(["dojo/parser",myClick);
  12. });
  13. });
  14. </script>
  15. </body>
  16. </html>

再读一遍代码,忘记去掉代码的parse,删除代码如下:

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
  4. </head>
  5. <body class="claro">
  6. <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
  7. </div>
  8. <div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
  9. <script src="dojo/dojo.js" data-dojo-config="async: true,button){
  10. var myClick = function(){
  11. console.log("I was clicked");
  12. };
  13. ready(function(){
  14. //parser.parse();
  15. on(registry.byId("button4"),myClick);
  16. });
  17. });
  18. </script>
  19. </body>
  20. </html>

点击button后效果

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

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
  4. </head>
  5. <body class="claro">
  6. <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
  7. </div>
  8. <div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
  9. <script src="dojo/dojo.js" data-dojo-config="async: true"></script>
  10. <script>
  11. require(["dojo/parser",button){
  12. var myClick = function(){
  13. console.log("I was clicked");
  14. };
  15. ready(function(){
  16. parser.parse();
  17. setTimeout(function(){
  18. on(registry.byId("button4"),myClick);
  19. },1000);
  20. });
  21. });
  22. </script>
  23. </body>
  24. </html>
setTimeout有效,证实了想法 ,于是果断改一下config中async内容
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
  4. </head>
  5. <body class="claro">
  6. <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
  7. </div>
  8. <div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
  9. <script src="dojo/dojo.js" data-dojo-config="async: false"></script>
  10. <script>
  11. require(["dojo/parser",myClick);
  12. });
  13. });
  14. </script>
  15. </body>
  16. </html>
果然有效,异步的大问题。但是按照教程中的说法,非异步有那么点反人类,再继续搜索,查找到 官方文档的做法,发现then函数正好满足需求,修改代码如下:
  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
  4. </head>
  5. <body class="claro">
  6. <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'" style="height:20%;" id="appLayout">
  7. </div>
  8. <div data-dojo-type="dijit/form/Button" type="button" id="button4" >button4</div>
  9. <script src="dojo/dojo.js" data-dojo-config="async: true"></script>
  10. <script>
  11. require(["dojo/parser",button){
  12. var myClick = function(){
  13. console.log("I was clicked");
  14. };
  15. ready(function(){
  16. parser.parse().then(function(){
  17. on(registry.byId("button4"),myClick);
  18. });
  19. });
  20. });
  21. </script>
  22. </body>
  23. </html>
总结一下, 这个then的操作,本质上就是parse方法的callback函数,但是使用更加方便,又是异步的调用,又能保证一定的顺序。

猜你在找的Dojo相关文章