你的第一个 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' %}