Deno 中的 JSX 和 DOM 概述

Deno 的常见用例之一是处理作为 Web 应用程序一部分的工作负载。由于 Deno 内置了许多浏览器 API，因此能够创建可以在 Deno 和浏览器中运行的同构代码非常强大。Deno 可以处理的强大工作负载是执行服务器端渲染 (SSR)，其中应用程序状态在服务器端使用以动态渲染要提供给客户端的 HTML 和 CSS。

服务器端渲染在有效使用时，可以通过将动态内容的繁重计算卸载到服务器进程来显着提高 Web 应用程序的性能，从而允许应用程序开发人员最大限度地减少需要发送到浏览器的 JavaScript 和应用程序状态。

Web 应用程序通常由三种关键技术组成

JavaScript
HTML
CSS

此外，越来越多的 WebAssembly 可能会在 Web 应用程序中发挥作用。

这些技术结合在一起，使开发人员能够使用 Web 平台在浏览器中构建应用程序。虽然 Deno 支持许多 Web 平台 API，但它通常只支持在服务器端上下文中可用的 Web API，但在客户端/浏览器上下文中，主要的“显示”API 是文档对象模型 (DOM)。有一些 API 可通过 JavaScript 访问应用程序逻辑，这些 API 操作 DOM 以提供所需的结果，以及 HTML 和 CSS 用于构建和设置 Web 应用程序的显示样式。

为了便于在服务器端操作 DOM 以及动态生成 HTML 和 CSS 的能力，有一些关键技术和库可以与 Deno 一起使用来实现这一点，我们将在本章中探讨这些技术和库。

我们将探索相当低级的启用库和技术，而不是用于网站服务器端生成的完整解决方案或框架。

JSX

JSX 由 Facebook 的 React 团队创建，是一种流行的 DSL（领域特定语言），用于在 JavaScript 中嵌入类似 HTML 的语法。TypeScript 团队还在 TypeScript 中添加了对 JSX 语法的支持。JSX 在开发人员中越来越受欢迎，因为它允许将命令式编程逻辑与看起来非常像 HTML 的声明性语法混合在一起。

JSX“组件”可能是什么样子的示例

export function Greeting({ name }) {
  return (
    <div>
      <h1>Hello {name}!</h1>
    </div>
  );
}

JSX 的主要挑战在于它既不是 JavaScript 也不是 HTML。它需要在浏览器中使用之前将其转换为纯 JavaScript，然后浏览器必须处理该逻辑以操作浏览器中的 DOM。这可能比让浏览器渲染静态 HTML 效率更低。

这就是 Deno 可以发挥作用的地方。Deno 在 .jsx 和 .tsx 模块中都支持 JSX，并结合 JSX 运行时，Deno 可用于动态生成要发送到浏览器客户端的 HTML，而无需将未转换的源文件或 JSX 运行时库发送到浏览器。

阅读在 Deno 中配置 JSX 部分，了解如何在 Deno 中自定义 JSX 的配置。

文档对象模型 (DOM)

DOM 是在浏览器中提供用户界面的主要方式，它公开了一组 API，允许通过 JavaScript 操作它，但也允许直接使用 HTML 和 CSS。

虽然 Deno 拥有许多 Web 平台 API，但它不支持与视觉表示相关的 DOM API。尽管如此，还是有一些库提供了许多 API，这些 API 需要将为在 Web 浏览器中运行而设计的代码移植到 Deno 下运行，以便生成可以发送到浏览器“预渲染”的 HTML 和 CSS。我们将在接下来的部分中介绍这些内容。

CSS

层叠样式表 (CSS) 为 DOM 中的 HTML 提供样式。有一些工具可以使在服务器端环境中使用 CSS 更轻松、更强大。

Deno 中的 JSX 和 DOM 概述

JSX​

文档对象模型 (DOM)​

CSS​

JSX

文档对象模型 (DOM)

CSS