dojo 龙形主标识

小部件基础

小部件是构建所有 Dojo 应用程序的基本构件。小部件是封装的主要单元，代表着从用户界面上的单个元素到更高级别的容器（如表单、部分、页面，甚至完整的应用程序）的所有内容。

前言：最小化复杂性

单个小部件通常代表应用程序中的单个职责。微不足道的职责自然地转化为单个小部件，而复杂的职责需要分解成几个相互依赖的领域。每个子领域都可以实现为自己的小部件，一个或多个父容器小部件协调所有分解的小部件之间的交互。在这种层次结构中，根小部件可以被视为实现更大的整体职责，但实际上它是通过许多其他更简单的小部件的组合来实现的。

完整应用程序的所有需求集可以被认为是这种单个、复杂的职责。在 Dojo 中实现完整集将导致小部件的层次结构，通常从一个根“应用程序”小部件开始，然后通过几个功能层分支，最终到达表示 HTML 页面中单个元素的叶节点。

简单性的优势

尽可能保持小部件的简单性是可取的，原因有很多。对于单个小部件，降低复杂性意味着更大的职责隔离（范围缩小）；更简单的全面测试；降低错误的可能性；更具针对性的错误修复；以及更广泛的组件重用潜力。

对于完整的应用程序，简单的小部件还允许更轻松地理解所有组成部分，以及它们是如何组合在一起的。

这些优势共同导致更简单的持续维护，并最终降低构建和运行应用程序的总体成本。

基本小部件结构

在本质上，小部件只是渲染函数，它们返回形成小部件在网页中结构表示的 VDOM 节点。但是，应用程序通常需要比简单的 HTML 元素列表更多的逻辑，因此有意义的小部件通常不仅仅包含一个简单的渲染函数。

小部件通常位于它们自己的自命名 TypeScript 模块中，小部件定义作为每个模块的默认导出。

表示小部件的最简单方法是基于普通函数，从渲染函数工厂定义开始。Dojo 在 @dojo/framework/core/vdom 模块中提供了一个 create() 原语，允许作者定义他们的小部件渲染函数工厂。命名渲染函数是首选，因为它们可以帮助调试，但这并不是必需的；小部件也可以通过一个导出变量来标识，该变量保存它们的工厂定义。

Dojo 可选地支持基于类的小部件，用于更喜欢类结构而不是函数结构的应用程序。此类小部件继承自 @dojo/framework/core/WidgetBase 模块提供的 WidgetBase，并且需要实现一个 render() 方法。

以下示例显示了 Dojo 应用程序中一个微不足道但完整的示例小部件

src/widgets/MyWidget.ts

基于函数的 Dojo 小部件变体

import { create } from '@dojo/framework/core/vdom';

const factory = create();

export default factory(function MyWidget() {
	return [];
});

基于类的 Dojo 小部件变体

import WidgetBase from '@dojo/framework/core/WidgetBase';

export default class MyWidget extends WidgetBase {
	protected render() {
		return [];
	}
}

由于此小部件从其渲染函数返回一个空数组，因此它在应用程序的输出中没有结构表示。小部件通常 返回一个或多个虚拟 DOM 节点，以便在应用程序的 HTML 输出中提供有意义的结构。

将虚拟 DOM 节点转换为网页上的输出的过程由 Dojo 的渲染系统 处理。

小部件样式

小部件 DOM 输出的样式通过 CSS 处理，相关的样式类存储在与小部件 TypeScript 模块平行的 CSS 模块文件中。基于函数和基于类的两种小部件变体的样式完全相同。本主题在 样式和主题参考指南 中有详细描述。