Dojo1.11官方教程文檔翻譯(2.1)CND

2.1 CDN

原文地址:https://dojotoolkit.org/documentation/tutorials/1.10/cdn/index.html
本翻譯GitBook地址:https://www.gitbook.com/book/limeng1900/dojo1-11-tutorials-translation-in-chinese/details
轉載請註明出處http://blog.csdn.net/taijiedi13/ – 碎夢道


有時候,從CDN加載Dojo模塊會很有用,但是這麼做的同時再使用本地模塊幾乎不可能。本教程將演示如何實現它。

簡介

有些時候,從內容發佈網絡加載Dojo模塊是很有用的,例如當需要在任意地方做一個簡單的測試案例,或者用來提供易於分發和運行的示例代碼。可惜,由於模塊路徑的組織方式導致從CDN使用Dojo及自定義模塊並非一個直觀的過程。爲了在CDN下使用自定義和本地模塊,需要進行一些額外的配置。
經研究CDN庫表明,使用CDN通常比本地腳本性能上要差很多,尤其是本地腳本可以通過內置層來顯著減少HTTP往返。如果你想用CDN庫來提高應用性能,最好還是仔細想想。

加載自己的模塊

開始先來一個簡單頁面,它包含了源於CDN的Dojo加載器:

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <script data-dojo-config="async: 1"
            src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    </body>
</html>

這段代碼確保Dojo加載器開啓了AMD功能,從而可以用require來加載其他模塊。
Dojo1.7之前,跨域Dojo 加載器腳本是 dojo.xd.js。得益於AMD對跨域加載的原生支持,這個腳本就不再是必需的了。另外,注意在URL腳本里沒有http:,這意味着對於當前頁面從CDN加載腳本時也會使用相同的協議(例如:如果當前頁面通過HTTPS加載也一樣)。
接下來,我們需要通過設置dojoBlankHtmlUrl 屬性使Dojo訪問dojo/resources/blank.html 的本地副本文件,從而確保模塊(如dojo/hash)開啓跨域功能:

<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/path/to/blank.html'"
    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

最後,需要定義本地模塊包的位置:

<script data-dojo-config="async: 1, dojoBlankHtmlUrl: '/blank.html',
        packages: [ {
            name: 'custom',
            location: location.pathname.replace(/\/[^/]+$/, '') + '/js/custom'
        } ]"
    src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

注意本地包的位置是用從當前HTM文件獲取的路徑生成的絕對路徑僞裝的。Dojo1.10加載器要正確處理本地模塊必須使用絕對路徑。需要的話 dojoBlankHtmlUrl 關鍵字也可以使用同樣的僞裝。
現在完成了包含本地模塊的包的定義,就可以像普通模塊一樣require了:

require([ 'custom/thinger' ], function(thinger){ … });

View Demo

警告

不像舊的Dojo加載器,你在使用CDN創建模塊時不用做別的事。但是,你使用源於CDN的Dojo加載器時可能會有一個問題:

  • 由於跨源的安全限制,使用dojo/text 插件加載未創建或遠程AMD模塊會失敗。(AMD的編譯版本不受影響,因爲編譯系統已淘汰了對dojo/text 調用。)

小結

基於CDN版本的Dojo在某些情況下是很有用的。感謝基於AMD的新系統,讓我們在從CDN加載Dojo時使用自定義本地模塊時,只需要做幾個簡單的配置變化。

鏈接

發佈了25 篇原創文章 · 獲贊 9 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章