Dojo的全稱是Dojo Toolkit,始創於2004年,是當前各種蓬勃發展的JS工具包中的佼佼者。Dojo 為富互聯網應用程序(RIA) 的開發提供了完整的端到端的解決方案,包括核心的 JavaScript 庫,簡單易用的小部件(Widget)系統和一個測試框架,此外,Dojo 的開源開發社區還在不停地為它提供新的功能。
Dojo特性
Dojo Toolkit 的特性可以分到 4 個不同部分。這種划分使得開發人員可以將庫大小保持到最小,確保應用程序性能不受大量 JavaScript 庫下載的影響。例如,如果您只需要 Ajax 支持性能,您只需要包含 base 包;不需要包含擴展的 Dijit UI 組件,在本系列中稍后您將學習更多關於 Dojo 加載不同模塊的方法。
- Base
- Base 包提供 Dojo Toolkit 的基礎,包括一些功能,比如 DOM 使用函數、CSS3 基於選擇器的 DOM 查詢、事件處理、基本的動畫、以及 Dojo 基於類的面向對象特性。本文主要介紹 Base。
- Core
- Core 包包含一些 Base 中沒有包含的附加特性。通常,這些特性不像 Base 中的特性那樣頻繁使用;因此,它們單獨加載減輕 Base 包的負擔。從這一點上來講,Core 包提供一些實際有用的組件,包括高級動畫拖放、I/O、數據管理、國際化(i18n)、瀏覽器歷史管理。Core 包不再本文范圍之內。
- Dijit
- Dijit 包包含 Dojo 小部件和組件的擴展 UI 庫。這些小部件的一些示例包括對話框、日歷、調色板、工具提示和樹。它也包括一些表單控件,這比標准 HTML 表單控件提供更多的功能,還有一些完整的布局管理選項。本系列的第 3 部分將深入介紹 Dijit 特性。
- DojoX
- Dojo eXtensions (DojoX) 包含工具箱的各個子項目。位於 DojoX 中的大多數是實驗特性,但是也有一些穩定組件和特性。
下載Dojo
和其它JS工具包一樣,Dojo不需要特別的環境和配置。你只需下載就能夠使用。
它的下載地址:http://dojotoolkit.org/download/
如果你不想下載到本地,還可以通過CDN來獲取,在你的頁面中加入以下代碼:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>
CDN的缺點是當CDN的環境不穩定的時候,引用的文件可能不會正確的加載,所以建議將文件下載到本地,這樣才能保證您網站的正確訪問。
Say Hello World
為了檢驗我們下載的Dojo工具包是否正確,按照慣例,我們來寫一個Dojo版的Helloworld程序。我們要實現的功能是在頁面中動態的輸出Hello World字符串。
首先需要新建一個頁面,並添加dojo的引用。
<script type="text/javascript" src="resources/dojo/dojo.js"></script>
在頁面中加入以下JS代碼:
dojo.addOnLoad(function () { dojo.create("div", { innerHTML: "Hello world!" }, dojo.body()); });
OK, 在瀏覽器中打開這個頁面,查看運行效果:
下面是整個頁面的代碼,復制前請確保dojo.js的路徑是否正確。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Dojo版Heloworld</title> </head> <body> <h1> Dojo版Heloworld</h1> <script type="text/javascript" src="resources/dojo/dojo.js"></script> <script type="text/javascript"> dojo.addOnLoad(function () { dojo.create("div", { innerHTML: "Hello world!" }, dojo.body()); }); </script> </body> </html>
如果認為此文對您有幫助,別忘了支持一下哦!