Dojo 基础入门(三)

1.            开发环境准备

1.1.    开发环境

Dojo本身是由Javascript编写而成的，所以基于Dojo的扩展也是Javascript语言。目前，存在着一些支持Javascript语法高亮的编辑器，如UltraEdit, Notepad等。如果只是单纯的客户端用户界面的开发，完全可以采用编辑器+浏览器的方式，这样开发的执行效率最高，占用的系统资源最少。

当然了，如果需要后台数据支持、服务器端逻辑支持，那就需要考虑应用服务器、数据库等其他资源，这个时候一个集成开发环境(IDE)对我们的开发帮助就大有裨益了。由于工作原因，笔者使用的是IBM Rational开发平台，实际上根据需要选择带有插件功能的Eclipse平台就可以满足Dojo日常开发的要求了。在Dojo的官方网站推荐了几款其他的IDE工具，比如Aptana Studio等，它们各有利弊，开发者可以依据项目要求、个人使用习惯等选择相应的IDE工具。

1.2.    测试环境

由于Javascript是客户端的运行代码，所以测试的对象就是那些主流的浏览器。理论上说，在开发测试时，脚本程序要在各种浏览器上开发验证。但依据笔者的经验，在开发的过程中就以Firefox为测试目标， 测试成功的页面一起在IE中集成测试即可。

使用Firefox的另一个原因是在目前Javascript的调试还不是很发达的情况下，Firefox下的一个调试插件可以帮助我们做一些事情，它就是Firebug.

1.3.    Firebug

1.3.1.      下载

可以到Firebug的官方网站直接下载，网址是http://www.getfirebug.com。需要注意的一点是，由于Firebug是Firefox的插件，所以需要使用Firefox访问该网址，直接点击Install Firebug按钮即可直接安装完成。

1.3.2.      常用功能的使用

1.3.2.1.            准备

首先需要在使用前把isDebug参数设置为true,这样可以打印出相应的信息。如果不希望出现这些打印信息，可以设置成false予以关闭。

<script type="text/javascript" src="../dojo.js"
        djConfig="parseOnLoad: true, isDebug: true"></script>

1.3.2.2.            记录日志

在需要打印信息的地方加入如下的执行语句，可打印出不同级别的信息。

console.log("Nothing happening");
console.debug("Checking to make sure nothing happened");
console.info("Something might happen.");
console.warn("Something happened, but it's no big deal.");
console.error("Cough cough!");

 

可以看到在Firebug的Console标签以上语句的执行效果以及该执行语句所在的文件以及行数。除此以外，你还可以到Dojo的核心库和Dijit组件的加载状态。

小提示：

1．如果你不希望看到某些信息，可以通过右上角的Options选项予以过滤。

2．另一个比较值得一提的是console.dir()语句，这条语句对对象类型的变量打印比较直观。比如：

var btn=dijit.byId('helloBtn');

console.dir(btn);

 

3．此外，一些对象有其父对象或子属性对象，执行console的打印语句后，可以在Firebug的第一行发现对象的父子传递顺序，可以通过其中某一对象节点的链接直接索引到该对象。

1.3.2.3.            查看Html结构

由于一个用户界面系统的开发会涉及若干的html和js文件，这些文件都可能含有构成用户界面布局的代码，如何可以直观地查看这些分散在不同角落的代码的html层级结构就成为了一个问题。而Firebug就提供了这样的功能。

切换到Html标签，我们就可以看到整个用户界面的html结构代码，它具有良好的树状格式，易于查看，而且选择html结构的某个节点时，其相对应的页面组件会变成蓝底高亮。同时该节点的样式属性参数也用列表的方式列于右侧。而其DOM形式的展现可以通过选择右侧的DOM标签予以查看。

1.3.2.4.            加断点

如果想要看到对象的状态、语句执行后的结果，除了使用打印语句，我们还可以使用Firebug提供的调试功能，比如断点。

切换到Script标签，可以在Firebug的第一行，选择希望加入断点的脚本所在文件。定位到某一行后，在该行号处点击左键即可实现断点的添加/删除功能。当语句执行到该处时，会出现黄色的箭头。

在第一行的右侧，还有Continue,Step Over,Step Into,Step Out等按钮以及快截键。右侧的下方Watch标签，显示了执行到该断点处的变量名/值的列表，我们也可通过New watch expression添加其他的变量或表达式。