Dojo 应用程序的组件

Index 网页

HTML 页面是每个应用程序的基本内容，Dojo 应用程序也不例外。传统上，单个 index.html 文件既是应用程序的入口点，也是将应用程序的整体结构存入 DOM 的根容器。

Dojo 应用程序通常会注入到单个 DOM 元素中，默认情况下是注入到 document.body 中。这使得 Dojo 应用程序可以与页面中的其他内容共存——静态资源、传统的应用程序、甚至是另外一个 Dojo 应用程序。

Dojo 中的部件与 DOM 元素类似，是 Dojo 应用程序中封装的核心概念。正如传统网站是通过 DOM 元素逐层构建的一样，Dojo 应用程序则是通过部件逐层构建的。

部件可以描述一切，从单个界面元素（如 label 或 textbox）到更复杂的容器（如 form 表单、页面或者整个应用程序）。

类似地，并非 DOM 中的所有元素都对用户可见，Dojo 部件不仅提供用户界面，也可以实现应用程序的所有幕后需求。

详见创建 Dojo 部件参考文档，了解如何在应用程序中创建部件。

Dojo 部件可以是一个渲染函数工厂或者 TypeScript 类，通常包含在单个 TypeScript 模块中。该模块封装了组成部件的大部分内容，包括它的行为以及虚拟 DOM 的语义化表示。

部件通过属性接口向外部消费者提供 API。这个接口既可包含状态字段列表，在渲染时注入到部件中；也可以包含函数，当事件发生时，部件需要通知应用程序的其他部分时调用，比如部件状态的变更。

部件的外观样式是交由 CSS 设置的，与常规的 HMTL 元素样式类似。CSS 模块用于封装单个部件的样式，避免与其他部件的 CSS 类名冲突。

部件导入 CSS 模块跟导入其他 TypeScript 模块一样，并允许通过对象属性引用 CSS 类名，这些属性会在开发人员的 IDE 中自动提示。在定义部件的语义元素结构时，可以使用这些属性名指定样式类。部件中的 CSS 类名和最终的样式类名不一致，而这可以在构建阶段识别出来。

虽然部件的 CSS 模块可以完全封装自身的样式，但通常也需要一些灵活性。部件可以在应用程序的不同配置下使用，每个配置都有自己独特的外观需求。Dojo 提供了覆盖特定样式的能力以满足这个需求。

为了支持应用程序层面外观的一致性，可以通过主题进一步控制部件的样式。

详见 Dojo 样式和主题参考文档，了解如何为单个部件设置样式。