参考文档

https://dojo.io/tutorials/002_creating_an_application/

目标

今天学习一些原理的部分:

了解最简单的 Dojo 2 应用程序的结构及每一部分的作用。但不会全面讨论 Dojo 2 应用程序的每一个可能的组成部分。

主 HTML 文档

下载好demo文档之后,我们看看002_creating_an_application\initial\biz-e-corp\src下的indexl.html文件

HTML 页面是每一个 web 应用程序的基础，Dojo 2 应用程序也不例外。在示例程序中，index.html 文件扮演这个角色。注意 <body> 标签中只包含一个元素：<my-app>。这个元素并没有什么特别之处，但重点是我们能唯一的识别这个元素。为了明白其中的原理，我们看 main.ts 文件中的这行代码：(位于initial\biz-e-corp\src)

const root = document.querySelector('my-app') || undefined;
//加入||的意义是如果"querySelector"函数返回空值,则返回undefined

上面的代码中，我们搜索 my-app 元素并将其赋值给常量 root。应用程序正是用这个节点来存放 Dojo 2 应用程序。应用程序所做的每一件事情都应该包含在这个元素中。这样做有几点好处:

1.Dojo 2 应用程序能容易地与页面中的其他内容共存。这些内容可以是静态资源，旧有的应用程序，或另一个 Dojo 2 应用程序。

2.Dojo 2 能够轻松使用第三方库。例如，如果你想使用 moment.js (什么鬼?)来简化你程序中处理时间的工作，则可在主 HTML 文档中加载它，然后 Dojo 2 应用程序就可以使用这个类库。

投影仪

在你的第一个 Dojo 2 应用程序中，我们了解到 Dojo 2 使用 virtual DOM(Document Object Model) 技术在应用程序和渲染的页面之间提供了一个抽象层。投影就是作用于应用程序这两方面的中间组件，存在于应用程序和主 HTML 文档之间。回顾 main.ts 中的这些代码：

const Projector = ProjectorMixin(HelloWorld);
const projector = new Projector();

projector.append(root);

投影仪是什么?

现实中,投影仪用于加载某种形式的媒体，如幻灯片或视频，然后投影到一个平面上，如卧室里的墙(和爱人一起看看爱情动作片?)。类似的方式，Dojo 2 的投影获取应用程序的虚拟化标识，然后投影到实际的页面上。

这些代码是允许投影在 virtual DOM 和用户看到的渲染 HTML 之间协调的关键代码。第一行代码创建一个类，将 Helloworld 部件注册为顶级部件，让投影与 Dojo 2 应用程序关联。然后创建投影类实例，并调用 append 方法让投影与 HTML 文档关联。

每当 Dojo 2 应用程序需要更新 DOM，都会通知给投影。但是，投影并不会立即重绘页面。相反，它会使用 window 对象的 requestAnimationFrame() 方法为应用程序登记一个重绘请求。这个方法允许应用程序延迟更新 DOM，直到浏览器准备重绘页面。这样做，更新操作能批量分组执行，可优化渲染性能。当 window 对象重绘页面，应用程序的当前 virtual DOM 用来决定在一次操作中需要做哪些更新。这允许应用程序按需频繁更新 virtual DOM，而不会带来降低程序响应性能的风险。

widgets

widget是dojo1就有的概念,是窗口中的小部件,包含数据可以与用户交互

widget是 Dojo 2 用户界面的基本构建单元。他们将组件的可视化和行为封装到一个元素中。这些方面封装在部件的实现中。 widget会暴露出属性和方法，以与其他组件交互。考虑下面的图表：

第一个图展示的是传统的 HTML + JavaScript 结构。因为应用程序的可视化（HTML）和行为（JavaScript）都是公开可访问的，应用程序的组件都能被直接操作，这会导致 HTML 和 JavaScript 彼此没有同步。需要编写大量的测试用例来确保这种情况不会发生。

第二个图展示部件如何确保各组件仅按照设计意图交互。部件封装可视化和行为。然后暴露出属性和方法供其他组件与之交互。通过提供可控界面，就很容易保持部件的可视化和行为各方面同步。

在我们的示例应用程序中，我们仅有一个 HelloWorld 部件：

import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { v } from '@dojo/widget-core/d';

export default class HelloWorld extends WidgetBase {
    protected render() {
        return v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]);
    }
}

这个部件很简单，仅包含一个 <h1> 标签，且无任何行为，但已能演示一些重要概念。注意 render 方法为投影提供虚拟节点（也称为 DNodes），以决定向 HTML 文档中添加哪些内容。在这个例子中，部件足够简单，函数总是返回相同的结果。我们可以让部件功能更丰富一些，允许加入额外的属性来改变 DNodes 的生成逻辑。我们也可为这些属性设置默认值以添加更多复杂行为，而不需要调整应用程序中与之交互的代码。这将鼓励开发松耦合的组件，更易于开发和维护。

测试

基本应用程序包含的最后一项就是它的测试套件。 Dojo 2 的设计确保不会出现错误，或者很容易被监测盗，但测试用例依然是必需的，用于验证业务逻辑和确保应用程序组件按照期望协作工作。 Dojo 2 使用Intern 测试框架(自动化测试工具?)来提供测试能力。 Intern 支持多种测试策略，包括单元测试，功能测试，性能基准测试，可访问性测试和可视化回归测试。测试也使用Dojo 2 test-extras library 来验证部件 render 函数的输出结果。 test-extras 库用来简化 Dojo 2 部件的功能测试。要了解更多信息，参考Testing Dojo 2 Widgets(todo 此处要加入超链接,不知道什么时候才能学到) 。

我们的示例程序中包含一些测试，这些测试验证程序是否按期望的结果运行。测试用例代码在 tests/unit/widgets/HelloWorld.ts 文件中，我们来了解部分测试代码：

	it('should render', () => {
		const h = harness(() => w(HelloWorld, {}));
		h.expect(() => v('h1', { title: 'I am a title!' }, [ 'Biz-E-Bodies' ]));
	});

这个测试确保渲染函数返回正确的标签，并且标签中包含正确的内容。我们将在后续的教程中专题讨论测试，但是现在你可以使用它们来检查你的工作，只要运行下面的终端命令：(这里要说明的是,要使用下载的代码,要在新目录重新安装dojo cli)