DOJO Study Note(1)

Dojo1.1.1
1-什么是Dojo？
Dojo（日文解释：道场），Dojo是一个非常强大的面向对象的JavaScript工具箱，开发人员可以很方便的根据OO方式进行开发编码，它可以很方便的在短时间内构建重量级的JS应用，提供了强大的交互功能与界面编辑处理功能，可很方便的处理Ajax请求与漂亮的交互界面，满足Web2.0的要求。

2-Dojo如何安装与使用？
2-1下载下安装
Dojo可以从http://dojotoolkit.org/主站中下载到，将解压后的代码放到项目中相应目录即可。

2-2Dojo的使用需要按照以下顺序进行使用。为了保证Html被载入后，保证Dojo中的如视图对应“widget”到网页中的对象，因此需要遵循以下顺序进行使用。
2-2-1Dojo编码调用顺序
（1）设定djConfig变量；
（2）加载dojo.js文件；
（3）执行dojo.require加载相应Dojo功能；
（4）定义初始化函数init；
（5）使用Dojo的addOnload调用初始化函数。Dojo.addOnload(init)。

清单1：

<html> 
<head> 
  <title>test</title> 
  <script type="text/javascript" 
    src="../dojo-release-1.9.1-src/dojo/dojo.js"  
    djConfig="parSEOnLoad: true">
/*djConfig="parSEOnLoad: true" 
    表示在页面加载完成以后，启用 Dojo 的解析模块对页面中的 Dojo 标签属性（Dojo 标签属性是指由 Dojo 定义的一些标记，
    这些标记只有在被处理以后，才能为浏览器识别执行）进行解析。
    djConfig 是使用 Dojo 页面的一个全局配置参数。
    通过对这个参数不同的赋值，可以控制页面中 Dojo 的解析模块是否运行， Dojo 的调试模块是否工作等
    */
  </script> 
  <style type="text/css"> 
    @import "../dojo-release-1.9.1-src/dijit/themes/tundra/tundra.css";
/*@import "dojo_path/dijit/themes/tundra/tundra.css" 表示引入 Dojo tundra 风格的层叠样式表。*/
  </style> 
  <script type="text/javascript"> 
    dojo.require("dojo.parser"); 
/*dojo.require("dojo.parser") 表示引入 Dijit 的解析功能模块。
该模块将会把 Dojo 标签属性替换成浏览器可以识别执行的标记。
需要与 djConfig="parSEOnLoad:true" 相区别的是，
djConfig="parSEOnLoad:true" 表示确定在页面加载完成以后执行解析功能，
但解析功能模块的引入要靠 dojo.require("dojo.parser") 来实现。
*/
    dojo.require("dijit.form.TextBox"); 
    dojo.require("dijit.form.Button"); 
/*dojo.require("dijit.form.TextBox") 和 dojo.require("dijit.form.Button") 表示引入 Dojo 风格的文本输入框和按钮的功能模块。*/
    function init() 
    { 
      dojo.connect(dijit.byId("mybutton").domNode,"onclick","login"); 
 /*dojo.connect(dijit.byId("mybutton").domNode,"login") 表示将按钮的点击事件和 login 函数联系起来，当点击 id 为 mybutton 的按钮时，执行 login 函数。*/
    } 
    function login() 
    { 
      if( dijit.byId("myname").value=="goodguy" && 
   dijit.byId("mypassword").value=="goodgoodstudy")
        alert("Dojo World welcome you!"); 
      else 
      { 
        dijit.byId("myname").setValue(""); 
        dijit.byId("mypassword").setValue(""); 
/*dijit.byId("myname").setValue("") 表示调用 id 为 myname 的 Dojo 文本框的 setValue 函数，将文本框里面的内容清为空。*/
        alert("Dojo does not like you!"); 

      } 
    } 
    dojo.addOnLoad(init); 
  </script> 
</head> 
<body class="tundra"> 
  UserName: 
  <input type="text" length="20" id="myname"  dojoType="dijit.form.TextBox">
  <!--
  <input type="text" length="20" id="myname" dojoType="dijit.form.TextBox"> 中的
    dojoType="dijit.form.TextBox" 表示在页面中文本输入框是 Dojo 风格的。
    需要注意的是，通过声明 dojoType="dijit.form.TextBox" 这种方式来实现某些 Dojo 功能的使用，
    其表现形式上如同声明一个 HTML 标签的属性（如同 width="10px"），因
    此在本文中称其为 Dojo 标签属性。在页面加载完成以后，Dojo 的解析模块会将 Dojo 标签属性转化为浏览器能够识别执行的标记。
  -->
  <br> 
  PassWord: 
  <input type="password" length="20" id="mypassword"  dojoType="dijit.form.TextBox">
  <br> 
  <div id="mybutton" dojotype="dijit.form.Button">Submit</div> 
</body> 
</html>

在清单 1 的init函数中加入清单 2 中的代码，然后刷新页面则可以在 Console 窗口中看到如图 9 所示的输出。

清单2：

						
var num = 222; 
console.log("My test num is %d",num); 
console.log(num,window,login);

输出调试信息的高级使用方法

此外，为了方便将不同类别的调试信息输出进行区别（比如错误信息和警告信息），可以使用另外四种调试输出语句。

在清单 1 的init函数中加入清单 3 中的代码，然后刷新页面则可以在 Console 窗口中看到如图 10 所示的输出。

清单 3
console.debug("I am debug"); console.info("I am info"); console.warn("I am warn"); console.error("I am error");

有 Javascript 经验的读者可能会习惯于使用alert()进行调试信息的输出，但是笔者认为将调试信息在 Console 窗口中输出是一个更优的选择。首先，如果页面有很多alert(),则点击“ OK ”让弹出框消失也是一个非常烦人的事情。其次，如果调试信息的量很大，则是用alert()的弹出窗口将无法良好的完整展示调试信息。接着，alert()无法查看对象和数组的细节信息。最后，如果在一个循环中使用alert()页面“死掉”。

第三步，HTML 窗口的使用。在 HTML 窗口中可以查看到页面的源代码。除了可以查看页面的源代码外，还可以使用 Firebug 的编辑功能直接对页面进行编辑。

但是在某些情况下，仍然需要在 IE 或 Safari 等其它非 Firefox 浏览器上进行调试。在这个时候，Dojo 可以提供一些帮助。

Dojo 实现了一个跨平台的调试信息输出的功能。如果需要使用这个功能，则只需要将 djConfig 的参数值设置为“isDebug: true ”便可以了。

DOJO Study Note(1) - 入门篇

相关文章