Dojo精解（二）
作者：Matthew Russell 原文链接
2008年3月10日，星期一，3:38PM
在我的上一篇文章中，我介绍了通过AOL的CDN（Content Delivery Network，内容分发网络）将Dojo加载加页面中的基本知识，同时也展示了使用dojo.query查询DOM有多么简单。在这篇文章中，我想以一个简单的登录页面为例介绍几个即装即用的Dijit（Dojo部件）。看一看下面的示例页面，其中使用了TextBox和Button部件，除些之外无需任何努力就可以创建出极为美观的表单。
<head>
<title>Login</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css";
</style>
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad:true"
></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
/* Do some basic validation logic in here... */
});
</script>
<head>
<body class="tundra">
<div style="width:275px;height:75px;padding:10px;margin:10px;border:solid rgb(200,200,200) 1px;">
<div style="float:left">
<div style="margin-top:5px; margin-bottom:3px">Login ID</div>
<div style="margin-bottom:3px">Password</div>
</div>
<form id="login_form" method="POST" action="/">
<div style="float:right">
<div name="login_id" style="margin-bottom:3px" dojoType="dijit.form.TextBox"></div>
<div name="login_password" type="password" dojoType="dijit.form.TextBox"></div>
</div>
<button type="submit" style="float:right;clear:right" dojoType="dijit.form.Button">Login</button>
</form>
</div>
<div style="margin:10px;line-height:1.5em;padding:5px;text-align:justify">
Login to this great website...
</div>
</body>
</html>
以下就是生成的表单：
虽然这个漂亮的页面本身就能够说明问题，但仍然有以下3点需要强调：
1、dojo.require用来动态加载Dojo资源，这就和Java中的import语句或C\C++中的#include类似。虽然像这样动态加载资源有利于在开发中实现代码的模块化，但却会导致交付的产品具有明显的性能问题。不过，使用Dojo工具箱的构建工具可以将所有资源合并为一个JavaScript文件，从而既能省去HTTP开销，也可以保证页面快速加载。
2、向页面中插入dijit部件时使用了专门的dojoType属性。由于在SCRIPT标签中声明了djConfig指令，因此当页面加载时解析器会找到并实例化这些部件（通过dojo.query，I might add）。注意，在页面中导入解析器就和导入部件资源一样。
3、因为Dojo使用主题标准化了部件的外观，所以页面看起来才如此美观。在这个例子中，我们使用@import语句导入了tundra主题和几个样板文件。而为页面的BODY标签添加class=”tundra”则确保了其他一切就绪。
除此之外，这个例子中涉及到的就只剩一点用于布局的CSS和标准HTML框架了。虽然并不是所有登录页面都如此简单，但通过它我们可以体验到使用现成的dijit部件确实非常简单。
和往常一样，如果读者想了解这些部件或相关的更多信息，请参考Dojo的官方API。当然，读者对我即将出版那本书——Dojo: The Definitive Guide——也可能会感兴趣。