學習使用 Dojo JavaScript 工具箱開發 HTML 小部件的基礎知識。本文為您提供了一個簡介，此外，還給出了幾個例子為開發過程提供幫助 — 以簡單的示例小部件開始，隨後是複雜一些的小部件，同時還突出介紹了在開發過程中可能遇到的一些常見問題。
簡介
本文的目標是為您提供使用 Dojo JavaScript 工具箱開發 HTML 小部件的基礎知識，首先從版本 1.0 開始。本文還描述了幾個示例，以簡單的小部件開始，之後是較為複雜的小部件，同時還會解決在小部件開發過程中經常遇到的一些常見問題。
  |
何為 Dojo 工具箱？
Dojo 是一種基於 JavaScript 的開源工具箱，可用來開發動態 HTML Web 應用程序。藉助它，可以快速構建較標準 HTML 小部件更為複雜的小部件。使用 Dojo 提供的組件可以讓 Web 用戶界面的可用性、響應性和功能性都有所提高。由 Dojo 提供的低層 API 和兼容性層可幫助您編寫跨瀏覽器兼容的應用程序。
|
開始之前
在開始之前，需要設置開發環境。為此：
完成之後，文件夾的結構應該類似圖 1。
Dijit 是位於 dojo 之上的一個小部件系統。通過自身的主題 tundra，它為其所有的小部件提供了通用的設計和顏色模式。Dojox 是一個開發包，由 Dojo 工具箱的擴展組成。它可用於開發常見集合中所沒有的那些功能。
|
Dojo 小部件
在瀏覽網站時，會看到數百個小部件呈現在屏幕前。Web 瀏覽器的每個按鈕都是一個小部件。每個文本輸入框也是一個小部件。標準的 HTML 提供了小部件的有限集合：一個輸入框、一個按鈕和一個超級鏈接。
Dojo 小部件接受像文本輸入框這樣的條目並會添加一些函數來獲得更具用戶友好性的對象，比如一個便於選擇日期的圖形日曆。並且在這個過程中，不會破壞新功能所基於的那個原始條目。
一個 Dojo 小部件封裝了一些可視 Web 組件以便於重用。它由三個文件定義：
導入 Dojo 工具箱
清單 1 顯示了可用來將小部件導入到一個常規 Web 頁面的基本 HTML 骨架。
<html> <head> <title>Dojo Toolkit Test Page</title> <style type="text/css"> /* CSS style code */ </style> <script type="text/javascript" src="js/dojo1.2/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> <script type="text/javascript"> /* Javascript code */ </script> </head> <body> /* Widgets definition code */ </body> </html> |
第一個腳本標記通過載入 dojo.js bootstrap 文件來初始化 Dojo 工具箱。djConfig 對象的 parseOnLoad 和 isDebug 屬性是兩個最為常見的配置選項，Dojo 會在運行時對之進行檢查。parseOnLoad 在載入時處理標記（mark-up）解析，而 isDebug 啟用或禁用調試消息。djConfig 對象還可以在 dojo.js 文件載入前被設置為一個全局變數：
<script type="text/javascript"> var djConfig = { isDebug:true, parseOnLoad:true }; </script> <script type="text/javascript" src="js/dojo1.2/dojo/dojo.js"></script> |
Dojo 包系統
Dojo 是一個包系統，可用來在文件內構造應用程序類並通過 dojo.require 函數載入它們。此函數允許載入在基礎 dojo.js 內尚未提供的 Dojo 工具箱的某些部分。
為了創建一個小部件，必須通過添加清單 3 所示的代碼行來導入這個小部件聲明。
<script type="text/javascript"> dojo.require("widgets.Button"); </script> |
現在，將如下代碼插入主體部分：
<body> <div dojoType="widgets.Button">My Button</div> </body> |
dojoType 屬性的作用是使 Dojo 工具箱以一種特定的方式管理此標記。在頁面載入時，Dojo 解析器會查找在 dojoType 屬性內指定的小部件聲明，初始化這個小部件並用所獲得的小部件 DOM 節點替換此標記。
聲明一個小部件
現在，讓我們來看看這個 TextBox 小部件示例，定義一個 JavaScript 文件、一個模板文件和一個 CSS 樣式文件。
首先，必須創建這個 JavaScript 文件 TextBox.js，內含此小部件的定義和邏輯（參見清單 4）。
dojo.provide("widgets.TextBox"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.declare( "widgets.TextBox", [dijit._Widget, dijit._Templated], { /** the template path */ templatePath: dojo.moduleUrl("widgets", "templates/TextBox.html"), /** the input DOM node */ inputNode: null, /** the label */ label: "", /** onkeyup handler */ onKeyUp: function() { // give a chance to the browser to update the DOM setTimeout(dojo.hitch(this, this.validate), 0); }, /** validate function */ validate: function() { if ( this.inputNode.value === "Ok" ) { // the text is correct dojo.addClass(this.inputNode, "inputOk"); dojo.removeClass(this.inputNode, "inputError"); } else { // the text is incorrect dojo.removeClass(this.inputNode, "inputOk"); dojo.addClass(this.inputNode, "inputError"); } } } ); |
dojo.provide() 定義新的小部件的名稱並註冊此類聲明。注意到：
現在，我們可以定義模板文件 TextBox.html，如清單 5 所示。
<span class="textBox"> ${label}: <input type="text" class="inputOk" dojoAttachPoint="inputNode" dojoAttachEvent="onkeyup: onKeyUp"> </input> </span> |
${label} 將由此小部件實例的 label 屬性替代。
dojoAttachPoint 聲明會導致 inputNode 小部件的屬性被設置為這個輸入標記所對應的那個 DOM 節點。
[火星人 ] 用 Dojo 1.x 開發小部件已經有56次圍觀
