Dojo學習筆記（一）：Hello Dojo!

歡迎來到Dojo世界！在這篇文章中你將會學習到如何加載Dojo以及探索Dojo的一些核心功能。你還會了解Dojo的基于AMD的模塊架構，探索如何加載額外的模塊來增加功能到您的Web站點或應用程序，并找出在出錯的時如何得到幫助。

讓我們開始吧

開始學習Dojo的最簡潔方法之一就是通過內容分發網絡（CDN）來獲取它，這將會讓我們起步很快，使用CDN就意味著你的瀏覽器要接入互聯網

這種方法將使我們快速地進入使用Dojo。對于一些產品應用或者大規模開發，我們接下來將介紹其他的一些能發揮更好性能的開發方法。

你需要將你所有的例子放在你的本地網絡服務器上，這樣就可以在特定的工作環境下瀏覽你的文件，并能在很多細微之處保證你的工作安全無誤。運行這些例子你不需要在你的服務器上增加除了文件服務的其他功能就能出色地完成測試。

本篇教程是為Dojo新手所準備的，如果你已經掌握了1.7版本以前的知識并且想了解新版本更新了什么，你可能需要開始學習 "Modern Dojo" 這篇文章。

為了“引導”Dojo，你得加載 dojo/dojo.js 這個文件并提供它一些配置信息：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Tutorial: Hello Dojo!</title>
</head>
<body><h1 id="greeting">Hello</h1><!-- load Dojo --><script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"data-dojo-config="async: true"></script>
</body>
</html>

以上代碼使得Dojo loader(Dojo加載器)能夠被網頁所運行，Dojo loader 的功能就是讓你加載Dojo的modules(模塊)。

你也許會疑惑“嘿，代碼中的"src"屬性少了"http:" ，好吧，這并不為大眾所知，但是如果你省略了"URL"的協議，那么瀏覽器就會猜測頁面加載的協議。這就意味著你的頁面不管是從"http"或者"https"協議加載的都會正常地運行。如果你不這樣做，就會導致你的瀏覽器在某些"https"環境下彈出警告，這顯然不是好的用戶體驗。如果你在自己的設備上運行這些代碼，確保你是在本地網絡服務器上運行的，那是因為在"file:"協議下，這些代碼不會工作。出于很多原因，你應該始終在網絡服務器或者本機的網絡服務器上運行Dojo。”

另一個你可能注意到的是"data-dojo-config"屬性。這個特殊的HTML5屬性是在被加載時用來配置Dojo的，它包含了一系列屬性，并且它的樣式和功能都像一個" object literal (JavaScript對象字面) " ，只不過沒有打開和關閉的大括號標記而已。在這種情況下，我們將介紹在異步模式下運行的Dojo。這是在Dojo1.7引入的新的模式，如果你正在全新的開發，你應該默認使用這種模式。再強調一次，如果你是從老版本（1.7以前）遷移過來的你得先學習 "Modern Dojo" 文章來更好地了解他們的變化。

你可以在 Configuring Dojo with dojoConfig 文章里了解到更多的Dojo的配置內容

我們也將"<script>"標簽塊放在HTML文檔的"body"中，我們可以將它放在"header"中并且效果是一樣的，但當在你的應用程序的"header"里的"<script>"塊里加載大量代碼時，會導致代碼在加載時，網頁處于渲染狀態。這會讓用戶感覺你的應用程序運行緩慢從而降低用戶體驗，所以我們一般在文檔的"body"結尾處加載Dojo代碼。

從Dojo1.7開始，Dojo采用 Asynchronous Module Definition (AMD)/(異步模塊定義) 作為標準的JavaScript模塊。這就允許Dojo不僅能提供異步模塊加載的功能增強，而且使Dojo比以往更加模塊化，無需全局變量。Dojo AMD標準同樣允許Dojo加載使用其他AMD加載器加載的非Dojo模塊。

同早期版本的Dojo對比，早期Dojo會自動加載全部的"base"函數，當運行異步模塊的Dojo時(async:true)，Dojo只加載那些被引用的模塊，而不加載無用的模塊。這就使得應用程序有更好的表現。另外，Dojo的模塊被重寫使，不需要依賴更多的Dojo，只是按需要在自己的模塊引用其他模塊，除了"loader(加載器)"沒有其他的模塊能夠自動被加載。這就是經常提到的"baseless"Dojo。

Dojo1.8所有的文章系列都是用的"baseless"Dojo，旨在加載需要加載的模塊，使網絡應用程序更輕更好。

CDN的使用

CDN是很容易獲取的。我們在文章的例子里都是使用的CDN，因為這意味著你可以直接復制代碼并不需要做任何改動就可以讓他們為你服務。但它們也有以下缺點：

  • 由于性能的原因，它們都是壓縮的版本，這就意味著每個模塊都是最小最優化的,在網絡上傳輸地更有效率。這就帶來一個問題，很難去調試
  • 它們需要用戶連接到公共網絡才能使用你的應用程序，在很多情況下不實用。
  • 它還要加載你自己的模塊
  • 如果你想將你的應用程序投入生產，你將得大大益于一個針對特定應用程序和目標瀏覽器的壓縮版Dojo，這樣你就不能獲得同樣大小又適用于所有CDN的壓縮版Dojo

還有一些其他的文章在不同方面介紹了CDN帶來的挑戰。查看 Creating Builds , Using Custom Modules with a CDN ,以及 Configuring Dojo with dojoConfig 。

如果你想成為一個卓越的開發者，你應該下載Dojo的源代碼并且安裝在你本地服務器上。為了使你的demo程序能夠在你本地設備上運行，你還得將包含demo代碼的文件夾與Dojo源代碼文件夾放在同一目錄下。如下圖：

然后修改加載Dojo的路徑：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Tutorial: Hello Dojo!</title>
</head>
<body><h1 id="greeting">Hello</h1><!-- load Dojo --><script src="../dojo/dojo.js"data-dojo-config="async: true"></script>
</body>
</html>

定義和引用模塊

Dojo中的模塊被分成不同的代碼塊以方便單獨調用。他們通過字符串被標識，這些字符串跟文件路徑很像。舉個例子，my/module/id 就是Dojo1.7以及更新版本的module identifier (MID)模塊標識符。實際上，這些標識符是用來映射JavaScript文件的，像"my/module/id"加載模塊的請求就會觸發loader(加載器)加載定義在路徑"my/module/id.js"中的模塊。

還有一些更加復雜的方式來映射模塊和文件，但使用簡單的路徑結構方式是所有方式中最典型的。

為了使定義和請求的模塊能夠正確地在你的應用程序中運行， two global functions are provided by the loader :.require()是用來加載一個或更多模塊的，define()用來定義一個模塊。這兩個函數通常帶有兩個參數：一系列需要加載的MID，和一個回調函數，這個回調函數在所有MID加載完成后就會執行。

通過簡單的例子就很容易解釋了，首先讓我們定義一個模塊：

// 文件在 demo/myModule.js里 (這就定義了一個"demo/myModule"模塊):define([//這個模塊需要引用 dojo/dom 模塊，這里就需要加入它"dojo/dom"
], function(dom){//當所有依賴的模塊都加載完畢后，這個方法就會執行從而定義dome/myModule模塊//dojo/dom作為第一個參數加入這個函數中，其后的依賴項會緊接這加入作為后續參數var oldText = {};//這里返回的對象就是這個模塊所要定義的值return {setText: function(id, text){var node = dom.byId(id);oldText[id] = node.innerHTML;node.innerHTML = text;},restoreText: function(id){var node = dom.byId(id);node.innerHTML = oldText[id];delete oldText[id];}};
});

?這個demo模塊有一個依賴模塊(dojo/dom)，模塊的返回值是一個對象，對象擁有setText和restoreText兩個方法。

因為我們正在通過CDN使用Dojo，但我們想從本地加載我們自定義的模塊，我們就得修改配置來改變加載模塊的方法。要不然Dojo加載器就會認為我們自定義的模塊在CDN上。關于這些深入的介紹在 Using Custom Modules with a CDN 這篇文章里,現在我們只需要知道它是如下工作的：

<script>//除了data-dojo-config標簽，我們在加載dojo.js之前創建一個dojoConfig對象//他們功能上是完全一致的，它只不過比前者更容易讀取大的配置文件var dojoConfig = {async: true,//這里的代碼注冊了demo包的正確路徑，這樣我們就可以在CDN上加載Dojo的同時加載本地自定義模塊packages: [{name: "demo",location: location.pathname.replace(/\/[^/]*$/, '')}]};
</script>

?如果你在你自己的服務器上安裝了源代碼，就不需要做這一步了。

既然我們已經創建了自己的模塊并且更改了Dojo的配置，我們就可以加載并利用它做些什么了：

//引用我們創建的模塊
require(["demo/myModule"], function(myModule){//利用我們的模塊改變問候的文本myModule.setText("greeting", "Hello Dojo!");//幾秒鐘后，恢復文本到原來的狀態setTimeout(function(){myModule.restoreText("greeting");}, 3000);
});

使用我們自定義的模塊，這些代碼輕松地將<h1 id="greeting">元素改變為"Hello Dojo!",過3秒后再將它還原為原來的內容。注意我們不需在require里引用所有的子級依賴，加載器將自動地加載需要的所有子級依賴，直到所有引用加載完畢。

進一步學習定義和引用Dojo的模塊，參考文章： Defining Modules

等待DOM

要完成網絡應用程序前最常見的事情之一就是在執行代碼前確保瀏覽器的DOM是可用的。在Dojo1.7以及更新版本的異步模型中，DOM檢查被一個叫"plugin"的特殊AMD模型所完成。Plugin可以像其他模塊一樣被引用，但他們的特定功能只有在模塊標識符的結尾加上感嘆號后才會被激活。在DOM ready事件完成后，Dojo提供了dojo/domReady插件，將這個插件包含在任何含有require和define調用的參數里，直到所有的DOM準備無誤回調函數才會運行：

require(["dojo/dom", "dojo/domReady!"], function(dom){var greeting = dom.byId("greeting");greeting.innerHTML += " from Dojo!";
});

?以上的例子在"gressting"節點上添加文本，這種行為只會在DOM加載完畢后準確地執行一次。再一次強調，注意模塊標示符結尾加上"!"，如果沒有感嘆號，dojo/domReady模塊就跟其他模塊一樣。

更多關于DOM操作功能請參考 Dojo DOM Functions

添加動畫效果

現在我們可以在我們的例子中增加一些動畫效果。可以加載到頁面里增叫動畫效果的模塊是dojo/fx，讓我們利用dojo/fx中的slideTo方法為greeting節點增叫一個滑動效果：

require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){var greeting = dom.byId("greeting");greeting.innerHTML += " from Dojo!";//調用動畫方法fx.slideTo({top: 100,left: 200,node: greeting}).play();
});

?你可以發現，我們又添加了dojo/fx模塊，然后我們使用這個模塊給greeting節點增加了動畫。當地一次使用AMD的時候，你也許會錯誤地認為MID數組(["dojo/dom","dojo/fx","dojo/domReady!"])和回調函數的參數(function(dom,fx))沒任何關系。然而，他們確實有關系。當回調函數獲取參數時，模塊會以同樣的順序作為數組傳入進去。因為dojo/domReady!并沒有有意義的返回值，所以我們我們不需要為它添加用于返回的參數。 不要錯誤認為只是你不需要使用那個值，JavaScript或者Dojo就會自動計算它。要知道，任何返回不需要使用的值模塊都得放在數組的最后。舉個例子，下面的做法就是錯誤的：

require(["dojo/dom", "dojo/domReady!", "dojo/fx"], function(dom, fx){//并不是你想象的那樣，fx會映射dojo/domReady!,而不是dojo/fx
});

?更多的特效和動畫信息可以參考 Dojo Effects 和 Animations

如何進一步學習Dojo?

學習Dojo ToolKit和添加一個標簽以及引用模塊一樣簡單，但功能及其廣泛和強大的Dojo意味著我們只能勉強掌握Dojo表面的皮毛。依據你的需求，我們提供了一系列不同方向的文章：

  • 如果你以前使用過Dojo并且想進一步了解帶有"AMD"和"baseless"的Dojo世界，以及Dojo其他改進的地方，你需要參考 Modern Dojo 文章。
  • 如果你的興趣是在你既有的靜態網頁或服務驅動網站頁面上添加特效和動畫效果，你需要閱讀 Using dojo/query ， Events with Dojo ， effects 和 animations 這些文章。
  • 如果你想添加Ajax功能到你的網站， Ajax with Dojo 將會是不錯的選擇。
  • 如果你打算為你的網站或應用程序整合一套豐富的部件庫，你可以看依稀 Creating Template-based Widgets 并通過 tutorial series on Dijit widgets 強化知識。
  • 如果你想了解更多關于構建復雜的網絡應用程序和Dojo強大的實用功能，向 Core Concepts 看齊吧。
  • 如果你的目標是移動應用程序，快跟著 Getting Started with dojox/mobile 開始吧。

無論你想要什么結果，Dojo提供了業界領先的開放源代碼工具，可以幫助您完成您的項目在較短的時間以驚人的結果。我們期待著看到你了！



本系列文章翻譯至Dojo官網，旨在學習Dojo并提高英語閱讀能力，有翻譯錯誤的地方請多指正！謝謝

轉載于:https://www.cnblogs.com/ruowind/archive/2013/02/01/2889594.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/378914.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/378914.shtml
英文地址，請注明出處：http://en.pswp.cn/news/378914.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

轉：我眼中的Visual Studio 2010架構工具

轉：我眼中的Visual Studio 2010架構工具

來自&#xff1a;http://www.cnblogs.com/wayfarer/archive/2010/07/30/1788398.html我眼中的Visual Studio 2010架構工具影響架構質量的是構建體系架構的思想、原則、實踐與架構師的經驗&#xff0c;絕不是工具。即使是最優秀的架構工具&#xff0c;也不可能像倚天寶劍一般——…
閱讀更多...
VMware創建Ubuntu操作系統到網絡配置詳細流程

VMware創建Ubuntu操作系統到網絡配置詳細流程

一、創建虛擬機 Ubuntu下載鏈接 1&#xff0c;看個人需求了&#xff0c;有更高的版本&#xff0c;下載Ubuntu鏡像 2&#xff0c;VMware官網隨便下載即可 3&#xff0c;創建新的虛擬機 4&#xff0c;自定義 5&#xff0c;默認即可 6&#xff0c;稍后安裝操作系統 7&#xf…
閱讀更多...
djiango配置mysql_數據庫MySQL相關環境配置以及數據庫與Go的連接

djiango配置mysql_數據庫MySQL相關環境配置以及數據庫與Go的連接

Linux下安裝好MySQL后&#xff0c;Windows安裝可視化工具navicatLinux下MySQL與Windows下navicat進行連接:安裝的過程很是揪心&#xff0c;各種查網站、大致把坑都寫了出來&#xff1a;1、在Linux下的mysql語句中&#xff0c;mysql> select host,user,authentication_string…
閱讀更多...
緩沖文件系統(fopen/fread/fwrite)和非緩沖文件系統(open/read/write)

緩沖文件系統(fopen/fread/fwrite)和非緩沖文件系統(open/read/write)

open&#xff1a;系統調用&#xff0c;返回的是文件描述符&#xff0c;即文件句柄&#xff0c;是文件在文件描述副表里的索引。 fopen&#xff1a;C語言庫函數&#xff0c;返回的是一個指向文件結構的指針。fopen是ANSI C標準中的C語言庫函數&#xff0c;在不同的操作系統中應…
閱讀更多...
java 繼承示例_Java中的繼承類型以及示例

java 繼承示例_Java中的繼承類型以及示例

java 繼承示例Prerequisite: Inheritance and its implementation in Java 先決條件&#xff1a; 繼承及其在Java中的實現 Java中的繼承類型 (Type of inheritance in Java) In Java programming, there are following types of the inheritances, 在Java編程中&#xff0c;有…
閱讀更多...
基于HtmlParser的網絡爬蟲

基于HtmlParser的網絡爬蟲

一、 目標 獲取網頁中的超鏈接及鏈接名&#xff0c;如從http://www.hao123.com/開始&#xff0c;抓取所有hao123鏈接到的超鏈接&#xff0c;再以獲取到的鏈接網頁為目標&#xff0c;獲取它所鏈接到的網頁。 二、環境及開發工具 環境&#xff1a;Java 工具&#xff1a;MyEclip…
閱讀更多...
VMware下Ubuntu無法全屏顯示問題

VMware下Ubuntu無法全屏顯示問題

一、運行Ubuntu的時候無法全屏顯示&#xff0c;如圖所示下載VMware Tools 二、之后將下載的文件拷貝到home文件夾下 三、解壓該壓縮包 由于該壓縮包是.tar.gz結尾的故壓縮命令&#xff1a;tar -zxvf VMwareTools-10.2.5-8068393.tar.gz&#xff0c;當然各版本有可能不一樣&am…
閱讀更多...
AMQP RabbitMQ

AMQP RabbitMQ

轉載&#xff1a;http://blog.ftofficer.com/2010/03/translation-rabbitmq-python-rabbits-and-warrens/官方介紹&#xff1a;http://www.rabbitmq.com/erlang-client-user-guide.html開始吧AMQP當中有四個概念非常重要&#xff1a;虛擬主機&#xff08;virtual host&#xff…
閱讀更多...
fsync與fflush的關系和區別

fsync與fflush的關系和區別

read/write/fsync與fread/fwrite/fflush的關系和區別 read/write/fsync&#xff1a; linux底層操作&#xff1b; 內核調用&#xff0c; 涉及到進程上下文的切換&#xff0c;即用戶態到核心態的轉換&#xff0c;這是個比較消耗性能的操作。 fread/fwrite/fflush&#xff1a;…
閱讀更多...
lumanager mysql密碼_LuManager單獨安裝mysqli

lumanager mysql密碼_LuManager單獨安裝mysqli

首先確定你正在使用的php版本以及php.ini的位置&#xff0c;LuManager自帶了幾個版本。如果是默認安裝&#xff0c;應該是5.2.17。php.ini的位置應該是在/usr/local/php_fcgi/lib/php.ini要確定這些信息&#xff0c;可以自己編寫一個 info.phpphpinfo();?>把文件存放到網站…
閱讀更多...
數據庫系統數據庫管理系統_數據庫管理系統介紹

數據庫系統數據庫管理系統_數據庫管理系統介紹

數據庫系統數據庫管理系統數據庫 (Database) A database is a collection of related data. In database any user can efficiently access the data which users want to retrieve. It can be anything from a simple collection of roll numbers, names, addresses and phone…
閱讀更多...
vba將select的值直接賦給變量

vba將select的值直接賦給變量

strSql ""strSql strSql & " select max(number) from dbo.#DATA" & vbCrLfrss.Open strSql, cnn numb rss.Fields(0)rss.Close轉載于:https://www.cnblogs.com/zigewb/archive/2013/02/06/2900645.html
閱讀更多...
set_exception_handler 自定義異常處理

set_exception_handler 自定義異常處理

剛才已經說過了set_error_handler這個函數&#xff0c;作用就是自定義錯誤處理&#xff0c; 那么現在就來簡單的說一下set_exception_handler&#xff0c;看名字我們就能發現&#xff0c;這說的是自定義異常處理。 呵呵&#xff0c;我聰明吧&#xff1f;來&#xff0c;先看一下…
閱讀更多...
如何獲取ubuntu源碼包里面的源碼進行編譯

如何獲取ubuntu源碼包里面的源碼進行編譯

如何獲取ubuntu源碼包里面的源碼進行編譯 1、在獲取源碼包之前&#xff0c;確保在軟件源配置文件 /etc/apt/sources.list中添加了deb-src項 2、使用如下命令獲取xxx源碼包的詳細信息: sudo apt-cache showsrc xxx 這用來查詢當前鏡像站點中是否有該源碼包。 3、源碼包中通常…
閱讀更多...
Python基礎教程（第3版）小筆記

Python基礎教程（第3版）小筆記

111
閱讀更多...
python 示例_帶有示例的Python字典popitem（）方法

python 示例_帶有示例的Python字典popitem（）方法

python 示例字典popitem()方法 (Dictionary popitem() Method) popitem() method is used to remove random/last inserted item from the dictionary. popitem()方法用于從字典中刪除隨機/最后插入的項目。 Before the Python version 3.7, it removes random item and from …
閱讀更多...
優化算法的意義，之二。

優化算法的意義，之二。

前一篇分析了求質數的兩個算法&#xff0c;在代碼執行效率和系統開銷兩方面進行了比較。 這在通信系統的設計和實現中&#xff0c;是非常重要的兩點。因為需要同時面對的是巨大的用戶群&#xff0c;和復雜的業務應用&#xff0c;通信系統的設計經常要面臨魚與熊掌間的選擇。 用…
閱讀更多...
srs配置文件分析

srs配置文件分析

配置文件中的每一項都是一個SrsConfDirective對象。 例子&#xff1a;vhost 1、 整個vhost 是一個SrsConfDirective對象。 1.1、名字&#xff1a;std::string name vhost 1.2、參數&#xff1a;std::vectorstd::string args第0個值 defaultVhost 1.3、子SrsConfDirective&a…
閱讀更多...
寄存器（CPU工作原理）03 - 零基礎入門學習匯編語言08

寄存器（CPU工作原理）03 - 零基礎入門學習匯編語言08

第二章&#xff1a;寄存器&#xff08;CPU工作原理&#xff09;03 讓編程改變世界 Change the world by program 物理地址 CPU訪問內存單元時要給出內存單元的地址。所有的內存單元構成的存儲空間是一個一維的線性空間。 我們將這個唯一的地址稱為物理地址。 16位結構的CPU…
閱讀更多...
判別Linux是CentOs還是Ubuntu的最簡單方法

判別Linux是CentOs還是Ubuntu的最簡單方法

在終端執行以下兩條命令即可 CentOs&#xff1a;yum -help Ubuntu&#xff1a;apt-get -help
閱讀更多...
最新文章

Copyright @ 2022~2023