你的第一個 Dojo 應用程序

tutorials/001_static_content/index.md

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 '使用 <h2> 標簽替換掉 <div> 標簽，并用 “Biz-E-Bodies” 替換掉 “Hello, Dojo World!”' %}

const r = renderer(() =>
    v('h2', [ '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 文件中的 <h2> 元素增加屬性。v 函數的第二個參數用于傳入這些屬性。

{% instruction '更新 v 函數調用, 傳入 title 屬性。' %}

v('h2', { 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' %}