34、独立 Web 应用开发全流程指南

独立 Web 应用开发全流程指南

1. 基础搭建与 JSX 应用

在开发独立 Web 应用时，我们可以使用 createElement 函数通过 DOM API 创建 HTML 元素。这个函数功能基础，不像后续章节框架那样具备复杂特性。 createElement 函数的 tag 参数可以是一个函数，若如此，则指定了另一个使用 JSX 的类作为元素类型。

下面是一个使用 JSX 类的示例，在 index.ts 文件中，我们移除了对 DOM API 类的依赖，转而使用 JSX 类：

import { LocalDataSource } from "./data/localDataSource";
import { HtmlDisplay } from "./htmlDisplay";
import "bootstrap/dist/css/bootstrap.css";
let ds = new LocalDataSource();
async function displayData(): Promise<HTMLElement> {
    let display = new HtmlDisplay();
    display.props = {
        products: await ds.getProducts("name"),
        order: ds.order
    }
    return display.getContent();
}
docum