學習Dojo筆記

你好 Dojo!

歡迎來到Dojo!在本教程中,你將會學習怎樣加載Dojo並且開始探索一些它的核心功能。當然你也會學習到Dojo的基於AMD的模塊結構,發現如何來加載模塊爲你的Web網站或者APP來添加額外的功能,並且發現怎樣來得到幫助當有錯誤出現時。

開始使用

開始使用Dojo就和包含dojo.js腳本在網頁中一樣簡單,就像任何其他的JavaScript文件一樣。Dojo很受CDNs歡迎,所以在一個名爲hellodojo.html的文件裏輸入如下代碼並且用web瀏覽器打開它。(學習Dojo很簡單,開始照着步驟來吧)

通常,你一旦加載了一個庫的JavaScript文件,你就擁有了他的所有方法。對於過去的Dojo來說確實如此,但是隨着1.7版本的發佈,Dojo採用了異步模塊加載機制(AMD)格式對於它的源代碼,允許了完全模塊化的開發Web應用。AMD之所以被選中是因爲它使用純粹的JavaScript。允許源文件在Web瀏覽器中工作,同時還支持一個製作最優化辦法用來提高應用在部署中應用性能的開發過程。(隨着新版本的發佈Dojo開始採用AMD了)

所以當dojo.js加載成功時什麼是可用的呢?是Dojos AMD,它定義了兩個全局函數,requiredefine。所以你能明白這些就足夠了:require使你能夠加載模塊並使用他們;define允許你定義你自己的模塊。一個模塊通常是一個單一的JavaScript源文件。(記住兩個全局函數requiredefine)

Dojo的一些HTML dom操作基本模塊是dojo/domdojo/dojo-construct.來看看怎麼加載這些模塊和使用它們提供的功能。

第一個require參數(14-17行)是一個模塊ID的數組——你想要加載模塊的標識符。通常,它們是直接映射到文件名的。如果你看dojo目錄,你會看到dom.jsdom-construct.js文件。(文件名就是模塊名)

AMD loaders異步操作, JavaScript異步操作實現時伴隨回調,所以第二個require參數(17行)是個回調函數。(你到一個商店買東西,剛好你要的東西沒有貨,於是你在店員那裏留下了你的電話,過了幾天店裏有貨了,店員就打了你的電話,然後你接到電話後就到店裏去取了貨。在這個例子裏,你的電話號碼就叫回調函數,你把電話留給店員就叫登記回調函數,店裏後來有貨了叫做觸發了回調關聯的事件,店員給你打電話叫做調用回調函數,你到店裏去取貨叫做響應回調事件。作者:常溪玲鏈接:https://www.zhihu.com/question/19801131/answer/13005983 來源:知乎)在這個函數中你提供了使用這些模塊的代碼。AMD loader將模塊作爲參數傳遞給回調函數。(以同樣的順序,他們在模塊Id數組中被指定)您可以自由地爲回調函數命名參數,無論您喜歡什麼。但是爲了一致性和可讀性,我們推薦使用基於模塊ID的名稱。

在第18行和第19行中,您可以看到DOMDOM構建模塊用於通過id獲得對DOM節點的引用並操作其內容。

The AMD loader將自動加載所有子依賴請求的模塊,所以只有模塊,你需要直接使用應該在你的從屬列表。 

定義AMD模塊

在這一節中你將會看到加載以及使用模塊的例子,爲了定義和家在你自己的模塊,你需要確定你從HTTP服務中加載了你的HTML文件。除了服務文件的功能外,您不需要Web服務器中任何花哨的特性。創建一個包含hellodojo.html文件的demo目錄,並且在其中創建一個命名爲myModule.js的文件。

 

myModule.js文件中輸入如下代碼

 

AMD define函數接受類似的參數對於require函數——一個模塊ID的數組和一個回調函數。AMD loader存儲回調函數的返回值作爲模塊的值,所以任何加載了requiredefine模塊的代碼都會收到一個定義模塊的返回值的一個引用。

CDN的使用

加載本地模塊同時使用DojoCDN需要一點額外的配置,按如下代碼更新hellodojo.html文件。

 

除了對Dojo添加配置外,我們重新定義了主要代碼——現在他僅僅加載了demo/myModule,並利用它完成頁面上文本的操作。如你所見,定義和加載模塊是如此簡單。(???)在第26行我們改變了dojo.jsURL來省略協議——這就創建了一個鏈接,它使用頁面使用的任何協議(HTTPHTTPS)。防止在某些瀏覽器中引發安全警告的混合內容。

AMD模塊中組織代碼允許您創建模塊化JavaScript源,該源在瀏覽器中立即可執行。而且易於調試。AMD模塊使用局部作用域變量,避免在全局命名空間中混亂和名稱解析提供更快。AMD是一個具有多種實現的標準規範,所以你沒有被鎖定在任何一個實現中——   

使用任何AMD loader來用AMD模塊。

等待DOM

首先執行代碼之前你要確認瀏覽器的DOM是可用的。這些是通過叫「plugin的特殊AMD模塊實現的。Plugins可以被請求就像其他任何模塊一樣,但是它們的特殊功能只有通過在模塊標識符的結尾添加感嘆號來激活。在DOM就緒事件的情況下,Dojo提供了dojo/domReady插件。只需將此插件作爲任何請求或定義調用的依賴項,在DOM就緒之前,回調將不會被觸發: