在 Deno 中使用 jsdom

jsdom 是许多 Web 标准的纯 JavaScript 实现，特别是 WHATWG DOM 和 HTML 标准。它的主要目标是全面且符合标准，并没有特别考虑性能。

如果您对服务器端渲染感兴趣，那么 deno-dom 和 LinkeDOM 都是更好的选择。如果您试图在需要基于标准的“虚拟”浏览器中运行代码，那么 jsdom 可能适合您。

虽然 jsdom 在 Deno CLI 下工作，但它不进行类型检查。这意味着您必须在命令行上使用 --no-check=remote 选项以避免诊断程序停止程序执行。

在编辑器中拥有健全的类型也需要对工作流程进行一些更改，因为 jsdom 类型是作为具有全局命名模块的全局类型定义提供的，以及利用内置 DOM 库的内置类型。

这意味着如果您希望在使用 Deno 语言服务器时在编辑器中获得强类型和智能自动完成，则需要执行一些额外的步骤。

定义 `import_map.json`

您需要将裸规范符 "jsdom" 映射到导入的 jsdom 版本。这使 Deno 能够以它们指定的的方式正确地将类型应用于导入。

{
  "jsdom": "https://esm.sh/jsdom"
}

设置配置文件

您需要在工作区根目录中设置一个 `deno.jsonc` 配置文件，其中包含 TypeScript 库信息以及上面定义的导入映射。

{
  "compilerOptions": {
    "lib": [
      "deno.ns",
      "dom",
      "dom.iterable",
      "dom.asynciterable"
    ]
  },
  "importMap": "./import_map.json"
}

注意：我们在上面使用的是未固定版本的 jsdom。您应该考虑将版本固定到您想要使用的版本。

基本示例

此示例将获取一个测试字符串，将其解析为 HTML 并根据它生成一个 DOM 结构。然后它将查询该 DOM 结构，选出遇到的第一个标题，并打印出该标题的文本内容。

import { JSDOM } from "jsdom";
import { assert } from "https://deno.land/[email protected]/assert/mod.ts";

const { window: { document } } = new JSDOM(
  `<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello from Deno</title>
  </head>
  <body>
    <h1>Hello from Deno</h1>
    <form>
      <input name="user">
      <button>
        Submit
      </button>
    </form>
  </body>
</html>`,
  {
    url: "https://example.com/",
    referrer: "https://example.org/",
    contentType: "text/html",
    storageQuota: 10000000,
  },
);

const h1 = document.querySelector("h1");
assert(h1);

console.log(h1.textContent);

在 Deno 中使用 jsdom

定义 import_map.json​

设置配置文件​

基本示例​

定义 `import_map.json`

设置配置文件

基本示例