DOJO Study Note(1) - 入门篇

发布时间:2016-12-8 16:01:47 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"DOJO Study Note(1) - 入门篇",主要涉及到DOJO Study Note(1) - 入门篇方面的内容,对于DOJO Study Note(1) - 入门篇感兴趣的同学可以参考一下。

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"; [email protected] "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 ”便可以了。

上一篇:iPhone开发之调用系统地图、邮件、电话、短信、浏览器
下一篇:200910codeind

相关文章

相关评论