当前位置 : 主页 > 网页制作 > Dojo >

DOJO Study Note(1) - 入门篇

来源:互联网 收集:自由互联 发布时间:2021-06-15
Dojo 1.1.1 1-什么是 Dojo ? Dojo (日文解释:道场), Dojo 是一个非常强大的面向对象的JavaScript工具箱,开发人员可以很方便的根据OO方式进行开发编码,它可以很方便的在短时间内构建重

Dojo 1.1.1
1-什么是Dojo

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

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

  2-2 Dojo的使用需要按照以下顺序进行使用。为了保证Html被载入后,保证Dojo中的如视图对应“widget”到网页中的对象,因此需要遵循以下顺序进行使用。
    2-2-1 Dojo编码调用顺序
             (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, "onclick", "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 ”便可以了。

网友评论