向网页动态注入dojo工具包

学习任何工具包的最好方法就是亲自试用一下。要试验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确实加载进来了。