学习任何工具包的最好方法就是亲自试用一下。要试验dojo的功能,按照《dojo权威指南》介绍的方法,你可以编写一个简单的HTML文件,在该文件中引用dojo,尝试某些功能,并使用firebug来调试。不过这涉及到每次要修改HTML模板文件和部署...如果你正在浏览某个讲解dojo的网页,只是想即兴一试,难道还非要这么复杂吗?
这里介绍一个更酷的方法,让你可以在任何网页中加载dojo并立即在firebug控制台中使用dojo。
牢记加载dojo总共需要三步:
- 创建脚本标签,引入dojo.js
- 创建样式标签,引入相应的样式文件
- 为body元素添加样式。
如果只试用dojo的核心功能,则可以省掉后面两步。
那么,如何通过firebug控制台加载dojo呢?首先,假设你已经打开了firebug的控制台。在控制台里敲入下列语句:
var dojoURL = "http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js";
var dojoCSS = "http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css";
var script = document.createElement("script");
script.src = dojoURL;
document.getElementsByTagName("head")[0].appendChild(script);
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = dojoCSS;
document.getElementsByTagName("head")[0].appendChild(link);
var _timer, counter = 20;
var checkDojo = function(){
if (counter-- <= 0){
clearInterval(_timer);
console.log("Failed to load dojo after timeout reached.");
}
if (window.dojo){
console.log("dojo is ready");
dojo.addClass(document.body, "claro");
if (_timer){// it's possible dojo is already loaded
clearInterval(_timer);
}
}
}
_timer = setInterval(checkDojo, 500);
这段代码需要略为解释一下。代码使用了google CDN分发dojo,注意这个版本是release版,因此如果你需要查看其源代码并进行这一级别的调试,你需要直接使用dojo的svn(HTTP方式)地址。
开头两段是动态修改DOM以插入dojo相关的元素。当DOM中插入新的元素后,DOM会立即解析它们,并下载,装入。为了对用户友好一些,代码中加入了检查dojo是否加载成功的代码。这里使用了setInterval方法来轮询。除此之外,也可以使用window的'load'事件来异步检查。但是该方法并不见得比轮询来得更好。当你打开firebug控制台时,总是对应着某个网站,如果该网站页面设计复杂,则通过window的'load'事件来确保dojo加载完成,往往会比轮询来得慢。
现在你就可以运行一下上面的代码...firebug控制台会输出dojo is ready...
现在的问题是,如果需要每次都在firebug控制台输入上面的语句,这还不如新建一个HTML文件来引入dojo呢...毕竟也可以把HTML存为模板,每次只修改一小部分...
现在我们来看看这个方法最引人入胜的地方:使用bookmarklet!
bookmarket是bookmark和applet的合成词,它是指你可以在浏览器里创建一个书签,但该书签并不是使用的http协议,而是javascript协议。据我所知,IE和firefox都支持这一协议。现在,我们就来创建一个bookmarklet。
首先,让我们打开页面www.dojotoolkit.org。访问这个页面是因为当我们创建书签时,酷一点的浏览器会从当前页面中提取favicon。这样我们的bookmarklet也会看上去更酷。dojotoolkit.org的favicon目前是
现在,按ctrl+d以创建一个书签,名称栏写作installDojo好了,地址栏写成:
javascript:(function(){alert("hello, this is a bookmarklet");})()
保存,点击该书签,你会得到如下对话框:
好了,这说明我们的bookmarklet创建成功了。下一步,我们要将地址栏里的内容换成我们刚刚测试过的脚本。这需要三步:
1. 将javascript:(function(){alert("hello, this is a bookmarklet");})()中的黑体字换成我们刚刚测试过的脚本。其结果如下:
javascript:(function(){
var dojoURL = "http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js";
var dojoCSS = "http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dijit/themes/claro/claro.css";
var script = document.createElement("script");
script.src = dojoURL;
document.getElementsByTagName("head")[0].appendChild(script);
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = dojoCSS;
document.getElementsByTagName("head")[0].appendChild(link);
var _timer, counter = 20;
var checkDojo = function(){
if (counter-- <= 0){
clearInterval(_timer);
console.log("Failed to load dojo after timeout reached.");
}
if (window.dojo){
console.log("dojo is ready");
dojo.addClass(document.body, "claro");
if (_timer){// it's possible dojo is already loaded
clearInterval(_timer);
}
}
}
_timer = setInterval(checkDojo, 500);
//console.log是firebug中很常用的命令,但敲起来太烦了,用个别名吧
this.log = console.log;
this.ls = console.dir;
})();
2. 这个脚本如果直接将其贴到创建书签对话框的地址栏,运行时会出错。我们需要将其压缩转换一下。可以使用在线压缩工具 http://jscompress.com/
3. 现在将转换后的代码贴到创建书签对话框的地址栏,保存。就在http://jscompress.com窗口里运行该bookmarklet,你将在firebug控制台中看到dojo is ready。再输入下面的语句试试:
dojo.fadeOut({node:document.body}).play()
Ctrl + Enter运行,窗口输出淡出。dojo确实加载进来了。