向網頁動態注入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確實加載進來了。