你的第一個 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 '使用 <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' %}