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"); |
可以看到在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添加其他的变量或表达式。