tutorials/001_static_content/index.md
commit 3e0f3ff1ed392163bc65e9cd015c4705cb9c586e
{% section 'first' %}
你的第一個 Dojo 應(yīng)用程序
概述
通過學(xué)習(xí)本教程选酗，你將了解如何創(chuàng)建你的第一個 Dojo 程序昨凡，并使用它在瀏覽器上打印一段簡短信息霉囚。
前提
你可以打開 codesandbox.io 上的教程 或者 下載 示例項目，然后運(yùn)行 npm install银还。
已全局安裝 @dojo/cli 命令行工具。 參考 本地安裝 dojo 文章了解更多信息熊杨。
你也需要熟悉 TypeScript 語言费韭， 因?yàn)?Dojo 是基于 TypeScript 語言開發(fā)的。
{% section %}
啟動開發(fā)服務(wù)器
{% task '構(gòu)建并運(yùn)行應(yīng)用程序涯贞。' %}
在開始修改源代碼之前枪狂，我們先啟動開發(fā)服務(wù)器，如此就可以實(shí)時查看修改代碼變化帶來的變化宋渔。 在程序的根目錄運(yùn)行以下命令：
dojo build --mode dev --watch memory --serve
或者使用縮寫參數(shù)：
dojo build -m dev -w memory -s
現(xiàn)在州疾，打開瀏覽器并導(dǎo)航到 http://localhost:9999 查看當(dāng)前應(yīng)用程序。
接下來皇拣，我們開始定制應(yīng)用程序严蓖。
{% section %}
頁面內(nèi)容
{% task '改變頁面中顯示的內(nèi)容。' %}
為了開始定制應(yīng)用程序氧急，我們先刪掉已有的內(nèi)容颗胡。 需要調(diào)整兩個地方。 第一行吩坝，index.html 文件中的 “Welcome to biz-e-core”毒姨。
{% instruction '打開 src 文件夾中的 index.html 文件，刪除 <p> 標(biāo)簽及其內(nèi)容 “Welcome to biz-e-corp”钉寝。' %}
注意手素，頁面已自動刷新。 這意味著我們不需要中斷我們的工作瘩蚪，去刷新或重新構(gòu)建程序泉懦，就可以實(shí)時查看調(diào)整后的效果。
現(xiàn)在我們刪掉 “Hello, Dojo World!” 信息疹瘦。
{% instruction '打開位于 /src 下的 main.ts崩哩。' %}
你將看到以下代碼：
import renderer from '@dojo/framework/widget-core/vdom';
import { v } from '@dojo/framework/widget-core/d';
const r = renderer(() =>
v('div', [ 'Hello, Dojo World!' ])
);
r.mount({ domNode: document.querySelector('my-app') as HTMLElement });
可能現(xiàn)在看看不懂部分代碼，但看完后面的教程后，你將逐步了解邓嘹。 現(xiàn)在我們重點(diǎn)了解這行代碼：
v('div', [ 'Hello, Dojo World!' ])
v 函數(shù)指示 Dojo 創(chuàng)建一個 HTML 元素酣栈，這段代碼創(chuàng)建一個 <div> 元素， 并在其中添加文字 “Hello, Dojo World!”汹押。 我們接下來將構(gòu)建一個頁面矿筝，在這個頁面中能查看 Biz-E 公司的員工列表， 所以我們將標(biāo)簽和消息修改為更合適的內(nèi)容棚贾。
{% instruction '使用 <h1> 標(biāo)簽替換掉 <div> 標(biāo)簽窖维，并用 “Biz-E-Bodies” 替換掉 “Hello, Dojo World!”' %}
const r = renderer(() =>
v('h1', [ 'Biz-E-Bodies' ])
);
現(xiàn)在，我們再回過頭來看 v 函數(shù)妙痹。我們有意避免使用 document.createElement 來創(chuàng)建 DOM (Document Object Model) 元素铸史。這是因?yàn)槲覀儾粫苯觿?chuàng)建 DOM 元素。相反怯伊，我們用 TypeScript 創(chuàng)建一個視圖(view)的表現(xiàn)層琳轿，然后 Dojo 能高效的將這個視圖轉(zhuǎn)換為 DOM 元素，并在頁面中渲染出來耿芹。這個渲染技術(shù)就是所謂的 virtual DOM崭篡。
傳統(tǒng)的 web 程序，將 DOM 和 JavaScript 邏輯揉在一起吧秕，導(dǎo)致較復(fù)雜的應(yīng)用程序的復(fù)雜度提高且效率低下媚送。當(dāng)構(gòu)建具有大量的狀態(tài)和數(shù)據(jù)更改的應(yīng)用程序時， 虛擬 DOM 技術(shù)能極大簡化程序邏輯并提高性能寇甸。虛擬 DOM 扮演中間人角色，處在應(yīng)用程序邏輯和在頁面中渲染真正 DOM 節(jié)點(diǎn)之間疗涉。
Dojo 使用自研的虛擬 DOM 庫拿霉，提供最高效的與視圖中的 DOM 元素交互方式。虛擬 DOM 的另一個好處是它促使你編寫出 reactive 風(fēng)格的代碼咱扣，而這種風(fēng)格的代碼會簡化你的程序绽淘。在本教程的最后部分，我們將學(xué)習(xí)如何為虛擬 DOM 節(jié)點(diǎn)設(shè)置屬性闹伪。
{% section %}
虛擬 DOM 屬性
{% task '為虛擬 DOM 節(jié)點(diǎn)設(shè)置屬性沪铭。' %}
現(xiàn)在我們?yōu)樵缦葎?chuàng)建的 HelloWorld.ts 文件中的 <h1> 元素增加屬性。v 函數(shù)的第二個參數(shù)用于傳入這些屬性偏瓤。
{% instruction '更新 v 函數(shù)調(diào)用, 傳入 title 屬性杀怠。' %}
v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ])
{% aside '虛擬 Dom 的 Properties 和 Attributes' %}
虛擬 DOM 系統(tǒng)自動將 string 類型的 properties 作為 attribute，其余的作為 properties 添加到 DOM 節(jié)點(diǎn)上厅克。
{% endaside %}
注意赔退，我們在 tag 和內(nèi)容參數(shù)中間添加了一個參數(shù)。第二個參數(shù)可以往元素中設(shè)置任意 attributes 或 properties。這種使用 JavaScript 或 TypeScript 創(chuàng)建 DOM 元素的方法被稱為 HyperScript硕旗，這種技術(shù)應(yīng)用在很多虛擬 DOM 實(shí)現(xiàn)中窗骑。
{% section %}
總結(jié)
恭喜！您在精通 Dojo 之旅中漆枚，邁出了堅實(shí)的一步创译。Dojo 應(yīng)用程序的組件中，我們開始了解 Dojo 應(yīng)用程序中的重要組件墙基。
你可以在 codesandbox.io 中打開完整示例或下載項目软族。
{% section 'last' %}
