你的第一個 Dojo 應用程式
commit 3e0f3ff1ed392163bc65e9cd015c4705cb9c586e
{% section 'first' %}
你的第一個 Dojo 應用程式
概述
通過學習本教程，你將瞭解如何建立你的第一個 Dojo 程式，並使用它在瀏覽器上列印一段簡簡訊息。
前提
你可以開啟codesandbox.io 上的教程
或者下載
示例專案，然後執行npm install
。
已全域性安裝@dojo/cli
命令列工具。 參考本地安裝 dojo 文章瞭解更多資訊。
你也需要熟悉 TypeScript 語言， 因為 Dojo 是基於 TypeScript 語言開發的。
{% section %}
啟動開發伺服器
{% task '構建並執行應用程式。' %}
在開始修改原始碼之前，我們先啟動開發伺服器，如此就可以實時檢視修改程式碼變化帶來的變化。 在程式的根目錄執行以下命令：
dojo build --mode dev --watch memory --serve
或者使用縮寫引數：
dojo build -m dev -w memory -s
現在，開啟瀏覽器並導航到http://localhost:9999 檢視當前應用程式。
接下來，我們開始定製應用程式。
{% section %}
頁面內容
{% task '改變頁面中顯示的內容。' %}
為了開始定製應用程式，我們先刪掉已有的內容。 需要調整兩個地方。 第一行，index.html
檔案中的 “Welcome to biz-e-core”。
{% instruction '開啟src
資料夾中的index.html
檔案，刪除<p>
標籤及其內容 “Welcome to biz-e-corp”。' %}
注意，頁面已自動重新整理。 這意味著我們不需要中斷我們的工作，去重新整理或重新構建程式，就可以實時檢視調整後的效果。
現在我們刪掉 “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 });
可能現在看看不懂部分程式碼，但看完後面的教程後，你將逐步瞭解。 現在我們重點了解這行程式碼：
v('div', [ 'Hello, Dojo World!' ])
v
函式指示 Dojo 建立一個 HTML 元素，這段程式碼建立一個<div>
元素， 並在其中新增文字 “Hello, Dojo World!”。 我們接下來將構建一個頁面，在這個頁面中能檢視 Biz-E 公司的員工列表， 所以我們將標籤和訊息修改為更合適的內容。
{% instruction '使用<h1>
標籤替換掉<div>
標籤，並用 “Biz-E-Bodies” 替換掉 “Hello, Dojo World!”' %}
const r = renderer(() =>
v('h1', [ 'Biz-E-Bodies' ])
);
現在，我們再回過頭來看v
函式。我們有意避免使用document.createElement
來建立 DOM (Document Object Model
) 元素。這是因為我們不會直接建立 DOM 元素。相反，我們用 TypeScript 建立一個檢視(view)的表現層，然後 Dojo 能高效的將這個檢視轉換為 DOM 元素，並在頁面中渲染出來。這個渲染技術就是所謂的virtual
DOM。
傳統的 web 程式，將 DOM 和 JavaScript 邏輯揉在一起，導致較複雜的應用程式的複雜度提高且效率低下。當構建具有大量的狀態和資料更改的應用程式時， 虛擬 DOM 技術能極大簡化程式邏輯並提高效能。虛擬 DOM 扮演中間人角色，處在應用程式邏輯和在頁面中渲染真正 DOM 節點之間。
Dojo 使用自研的虛擬 DOM 庫，提供最高效的與檢視中的 DOM 元素互動方式。虛擬 DOM 的另一個好處是它促使你編寫出 reactive 風格的程式碼，而這種風格的程式碼會簡化你的程式。在本教程的最後部分，我們將學習如何為虛擬 DOM 節點設定屬性。
{% section %}
虛擬 DOM 屬性
{% task '為虛擬 DOM 節點設定屬性。' %}
現在我們為早先建立的HelloWorld.ts
檔案中的<h1>
元素增加屬性。v
函式的第二個引數用於傳入這些屬性。
{% instruction '更新v
函式呼叫, 傳入title
屬性。' %}
v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ])
{% aside '虛擬 Dom 的 Properties 和 Attributes' %}
虛擬 DOM 系統自動將string
型別的 properties 作為 attribute，其餘的作為 properties 新增到 DOM 節點上。
{% endaside %}
注意，我們在 tag 和內容引數中間添加了一個引數。第二個引數可以往元素中設定任意 attributes 或 properties。這種使用 JavaScript 或 TypeScript 建立 DOM 元素的方法被稱為HyperScript ，這種技術應用在很多虛擬 DOM 實現中。
{% section %}
總結
恭喜！您在精通 Dojo 之旅中，邁出了堅實的一步。Dojo 應用程式的元件 中，我們開始瞭解 Dojo 應用程式中的重要元件。
你可以在codesandbox.io 中開啟完整示例或下載 專案。
{% section 'last' %}