Dojo的库定义使用了模块,就像JAVA一样。这样可以让你只引用自己需要的部分,而不是全部,保证了浏览速度。
例如Dojo的event包定义在模块dojo.event中。
(译者注:此部分原著甚是啰嗦,我给精简了一下,有兴趣的朋友可以参见原文。)
引用模块格式:
dojo.require("dojo.module[.sub module]");
例如我们想引用lite effects systems,
dojo.require("dojo.lfx");
这会引入所有lfx下的子模块,当然你也可以使用dojo.lfx.*,如果想单独引用lfx下的toggle模块:
dojo.require("dojo.lfx.toggle");
什么是widget呢?一个按钮 ,一个图片,这都是widget,最常见的html widget有链接,按钮,输入框。
使用Dojo可以改变widget ,例如在日期输入框旁边加上一个彩色日历,让用户可以选择日期,与此同时Dojo并不会破坏你原始的输入框,因为Dojo是扩展了你的html而不是替换了它。
使用widget的优势主要三点:
- 跨平台:使用Dojo widget,无论使用任何浏览器,都会准确的得到正确效果。
- 自动退化:一些老浏览器可能对javascript支持并不是那么完美,Dojo也可以让它们显示出正确的内容,例如前面彩色日历的例子,如果浏览器不支持,那么Dojo会自动将日历退化到一个简单的选择框,或者其他(根据不同widget而定)。
- 扩展性:你可以利用Dojo提供的widget创造出新的widget,在这个过程中你并不需要从库中复制任何代码或者修改库中的代码。
如何使用Widget
Widget有很多使用方法。Widget会搜索整个网页框架,然后自动把应该添加的内容加入到当中。
下面是个简单的例子,我们也可以看出WIdget是怎样自动退化的,因为我们并没有给ComboBox定义选择项,而只是一个value,而且所以最后显示出来的只象是一个简单的inputbox,如果用户禁用了javascript,显示结果也会一样。
<input dojoType="ComboBox" value="default" dataUrl="comboBoxData.js">
但是如果我们只想使用W3C标准(译者注:没有那些额外的tag,例如dojoType),我们可以用下面的方法。
<input class="dojo-ComboBox?" value="default" dataUrl="comboBoxData.js">
<dojo:ComboBox? value="default" dataUrl="comboBoxData.js">
你可能注意到了dataUrl,他的作用是把comboBoxData.js中的内容加到comboBox中,但是现在comboBoxData.js中没用任何内容。(译者注:当然你可以随意改变dataUrl的内容,名字不是固定的。)
下面是一个select的例子:
<select dojoType="combobox">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
<option value="thud">thud</option>
</select>
从上面的例子中,你知道了很多事情,但却好像没什么用处,这里只是想告诉你其实dojo并没有那么复杂。
动态网页程序(dynamic web application)避免了频繁的刷新页面,不过通常也带来后退和前进按钮会失去作用。更多的,有的时候,用户可能很难把网页加入收藏夹。
Dojo提供了一个解决办法,让网页程序处理浏览器的后退和前进,并且提供给浏览器一个唯一的地址。这个解决办法就是使用dojo.undo.browser。
使用dojo.undo.browser
在dojo 0.2.2版本中,并没有dojo.undo.browser,这是在0.3以后的版本中才加入的。
首先,需要使用dojo.undo.browser.setInitialStae(state)设定当浏览器第一次载入网页的状态。
理论
动态网页程序会调用XMLHTTPRequest和DOM来更新网页内容而避免了刷新,更新浏览历史,并且也不会改变浏览器的地址栏。这就意味着当用户点击了后退按钮,整个网页程序丢失了当前运行的状态(state)。而且即使用户想把当前的网页内容加入收藏夹,也是不可能的,因为收藏夹不会记录网页程序运行的状态,而只会简单的记录下网页程序的地址(URL)。
开发者可以使用dojo.undo.browser包得到用户点击后退和前进的事件(event),然后根据这些事件来更新页面内容。 dojo.undo.browser通过使用一个隐藏的表单(hidden IFRAME)或者一个唯一的标签(fragment identifier)传递浏览的历史记录。(译者注:可以想像成一个cookie或者一个session,但是这个session信息是存储在hidden IFRAME或者标签中) 例如:
http://some./my/path/to/page.html#fragmentIdentifier
(译者注:#fragmentIdentifier就是标签记录)
因为当改变标签的时候并不会使网页刷新,所以非常适合记录当前网页程序的状态。当然开发者可以自定义一个更容易读懂的标签,并且使用户可以把它加入收藏夹。
dojo.undo.browser允许开发者创建一个相对于运行状态的对象(state object),这个对象会得到回叫(callback)当用户点击后退或者前进按钮。
开发
下面是使用dojo.undo.browser之前必须作的一些事情:
1:在djConfig中设置preventBackButtonFix: false。这样保证了隐藏的表单(hidden IFRAME)将会添加到页面当中,如果不加入这段,dojo.undo.browser不会正常工作。
译者注:设置方法就是在header中加入如下代码:
<script language="JavaScript" type="text/javascript">
djConfig = { isDebug: true, preventBackButtonFix: false };
</script>
2: 加入dojo.require("dojo.undo.browser");
设定网页程序的初始状态:
dojo.undo.browser.setInitialState(state);
当用户每次点击前进或者后退,state对象都会被调用。
然后我们需要给state对象创建几个方法(function)
- 得到后退提示:back(),backButtion()或者handle(type),type可以是“back”或者是“forward”。
- 得到前进提示:forward(),forwardButton()或者handle(type),type如上。
下面是个简单的例子:
var state = {
back: function() { alert("Back was clicked!"); },
forward: function() { alert("Forward was clicked!"); }
};
注册一个state对象使用下面的方法:
dojo.undo.browser.addToHistory(state);
如果向改变浏览器的地址(URL),引用state对象的changeUrl属性。如果changeUrl是true,dojo.undo.browser 就将产生一个唯一的标签,如果changeUrl被定义为任何其他的值(不包括undefined,null,0和空string),那么这个值就会被使用为标签。这样用户就可以把当前页加入收藏夹了。
提示