Deno 中的 JSX 和 DOM 概觀

Deno 的常見使用案例之一是處理網路應用程式的負載。由於 Deno 內建許多瀏覽器 API，因此能夠建立同構程式碼，同時在 Deno 和瀏覽器中執行，這非常強大。Deno 可以處理的強大負載是執行「伺服器端渲染」(SSR)，其中應用程式狀態用於「伺服器端」，以動態渲染 HTML 和 CSS，提供給用戶端。

伺服器端渲染，如果使用得當，可以大幅提升網路應用程式的效能，方法是將動態內容的繁重計算卸載到伺服器程序，讓應用程式開發人員能夠將需要傳送至瀏覽器的 JavaScript 和應用程式狀態降至最低。

網路應用程式通常由三項關鍵技術組成

JavaScript
HTML
CSS

此外，WebAssembly 也越來越可能在網路應用程式中扮演角色。

這些技術結合在一起，讓開發人員能夠使用網路平台在瀏覽器中建置應用程式。雖然 Deno 支援許多網路平台 API，但它通常只支援在「伺服器端」環境中可用的網路 API，但在用戶端/瀏覽器環境中，主要的「顯示」API 是文件物件模型 (或 DOM)。有許多 API 可讓應用程式邏輯透過 JavaScript 存取，以操作 DOM 來提供所需的結果，而 HTML 和 CSS 則用於建構和設定網路應用程式的「顯示」樣式。

為了便於操作 DOM 伺服器端，並具備動態產生 HTML 和 CSS 的能力，有一些關鍵技術和函式庫可用於 Deno 來達成此目的，我們將在本章節中探討這些技術和函式庫。

我們將探索相當低階的啟用函式庫和技術，而不是網站伺服器端生成的完整解決方案或架構。

JSX

由 Facebook 的 React 團隊所建立，JSX 是一種廣受歡迎的 DSL（特定領域語言），用於將類似 HTML 的語法嵌入 JavaScript 中。TypeScript 團隊也將 JSX 語法支援新增到 TypeScript 中。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，這些 HTML 和 CSS 可以「預先渲染」後傳送到瀏覽器。我們將在以下各節中介紹這些函式庫

CSS

層疊樣式表 (CSS) 提供 DOM 中 HTML 的樣式。有些工具可以讓在伺服器端環境中使用 CSS 變得更輕鬆且更強大。

Deno 中的 JSX 和 DOM 概觀

JSX​

文件物件模型 (DOM)​

CSS​

JSX

文件物件模型 (DOM)

CSS