Dojo入門與dojo項目配置方案(一)

何爲dojo Toolkit

         Dojo Toolkit(以下簡稱dojo)是一個javascript語言實現的、跨瀏覽器的DHTMLDynamic HTML)工具包。Dojo ToolKit包括了構建大規模Ajax驅動的web應用程序所需要的一切。所以,你也可以把他看成是一個Ajax庫,但它不僅僅是個ajax庫。

         dojo功能遠比你想象的要強大,幾乎能夠滿足你開發web應用時所需要的。當然,dojo的學習難度比較大,但是一旦你掌握了它,你會發現使用dojo來開發應用原來是這麼方便和得心應手。

 

Dojo框架的組成

         Dojo大致可以分成dojodijitdojox這三個包(Package)。

         dojo包是dojo toolkit的基礎,它包含了整個框架最基礎的部分,包括Ajax基礎、事件等。

         dijit包裏面包含了基於模板的佈局組件(widget)類。如對話框日曆、樹等。

         dojoxdojo eXtensions)是一個擴展區,提供了更加絢麗的組件和一些新奇的組件,很強大!

         下圖是dojo的文件夾目錄:

201921_dWGV_616622.png

         如果你只需要dojoajax與事件操作,完全可以不使用dijitdojox

 

Dojo工具包與AMD(異步模塊加載)

         Dojo中的功能是模塊化的,這樣便於管理。它包含了上百個包,這些包分別位於dojodijitdojox這三個一級命名空間下。所以在使用時我們通常按需加載。

         下圖是一些常用包。這些包分佈在不同文件夾裏。

 

201954_JDBr_616622.jpg

         每個包裏面有很多的類,可以實現一些特定功能。

         異步模塊加載不用在html中嵌入<script>標籤來加載javascript,而是在javascript代碼中加載。

         加載方法有幾種:

  1. 傳統的dojo.require()/dojo.provide()

  2. Dojo異步模塊加載器AMD格式,define()

  3. require()直接加載

代碼如下:

202023_Zt9r_616622.jpg

202036_Axeg_616622.jpg

 

如何部署

下載dojo框架(http://dojotoolkit.org),並解壓放到網站某個能訪問的目錄下,比如你放到了(wwwroot)/下,裏面的dojo目錄包含dojodijitdojox三個目錄。這樣就可以了嗎?是的!就是這麼簡單。不過以後可能涉及包路徑問題,這個在後面會推薦一個比較好的開發模板。

 

 

從簡單例子開始

202053_pMW2_616622.jpg

這個例子中只需要新建一個html文件就可以了,引入必要的dojo.js(這個根據你把dojo框架放哪來定)。

首先在html裏引入dojo.js文件,這個js文件是必須包含的,而且在整個框架你甚至只要在html裏包含這一個js文件。require用來以AMD模式加載其他包,但這裏面我們沒有用到其他包,所以比較簡單。byId函數式屬於dojo命名空間下的函數,已經通過script標籤加載了。

require函數的使用:

require(

[「模塊1」,」模塊2」],

function(模塊1的別名,模塊2的別名)

/*……*/

})

202110_9IQC_616622.jpg

上圖中,包含了app包中map類,其別名爲appMap。所以下面使用時不用寫完整的名字:app.map,只需要appMap

 


轉載於:https://my.oschina.net/tkorays/blog/189408