专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

为何前端 4 大主流框架都选择拥抱 happy-dom?

ins518 2024-10-04 23:40:58 技术文章 12 ℃ 0 评论

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 happy-dom

A JavaScript implementation of a web browser without its graphical user interface.

happy-dom 是没有图形用户界面的 Web 浏览器的 JavaScript 实现，包括来自 WHATWG DOM 和 HTML 的许多 Web 标准。

happy-dom 的典型特性包括：

  • 自定义元素（Web 组件）
  • 声明式 Shadow DOM
  • 支持 Mutation Observer
  • 支持 Tree Walker
  • 支持 Fetch API
  • 支持 File Reader、CSS Style Declaration、Form Data 等
  • 支持 Selection、Form Validity State、IFrames 等
  • 支持 Cookies、Clipboard 等等

happy-dom 的目标是模拟足够多的 Web 浏览器，以用于测试、抓取网站和服务器端渲染。happy-dom 非常注重性能，可以用作 JSDOM 的替代品。而且在性能上，happy-dom 几乎完爆了 JSDOM，比如对常见测试的几个维度的衡量数据：

  • Import / Require
  • 解析 HTML(Parse HTML)
  • 序列化 HTML(Serialize HTML)
  • 渲染自定义元素 (Render custom element)
  • 运行 querySelectorAll('tagname')
  • 运行 querySelectorAll(':nth-child(2n+1)')

下面是两者的对比数据图：

目前 happy-dom 已经被前端大多数明星框架采用，包括：Vitest、Bun、Jest、Testing Library、Google LitElement、Vue、React、Svelte、Angular 等等。

happy-dom 在 Github 通过 MIT 协议开源，有超过 2.8k 的 star、22.2k 的 fork、代码贡献者 100+、妥妥的前端优质开源项目。

2.如何使用 happy-dom

2.1 模拟 Window 类

Happy DOM 可以用作模拟浏览器，也可以直接使用 Window 类来快速设置 DOM，下面是如何使用 Window 类的简单示例：

import {Window} from 'happy-dom';
// 打开页面
const window = new Window({url: 'https://localhost:8080'});
const document = window.document;
document.body.innerHTML = '<div class="container"></div>';
const container = document.querySelector('.container');
const button = document.createElement('button');
container.appendChild(button);
// 输出内容为 "<div class="container"><button></button></div>"
console.log(document.body.innerHTML);
// 中止任何正在进行的操作（例如 fetch 和计时器）
await window.happyDOM.abort();
// 关闭页面 window
window.close();

从以上代码可以看出，常见的 DOM 操作方法和浏览器几乎完全一致。

2.2 模拟 Browser 类

下面是如何使用 Browser 类的两个简单示例：

import {Browser} from "happy-dom";

const browser = new Browser();
const page = browser.newPage();
page.url = 'https://example.com';
page.content = '<html><body>Hello world!</body></html>';
// 输出值 "Hello world!"
console.log(page.mainFrame.document.body.textContent);
await browser.close();

以上示例通过首先手动创建一个 Browser 实例，然后动态设置页面 URL 的方式来模拟页面打开和关闭流程。下面是另外一个示例，其通过一些设置更加精确的控制了 Browser 实例的一些行为：

import {Browser, BrowserErrorCaptureEnum} from 'happy-dom';
const browser = new Browser({settings: { errorCapture: BrowserErrorCaptureEnum.processLevel} });
const page = browser.newPage();
// 打开页面
await page.goto('https://github.com/capricorn86');
// 点击链接
page.mainFrame.document.querySelector('a[href*="capricorn86/happy-dom"]').click();
// 等待页面上的所有操作完成（fetch、计时器等）
await page.waitUntilComplete();
// 输出内容为 "GitHub - capricorn86/happy-dom: Happy DOM..."
console.log(page.mainFrame.document.title);
// 中止所有正在进行的操作并关闭浏览器
await browser.close();

参考资料

https://github.com/capricorn86/happy-dom

https://github.com/capricorn86/happy-dom/wiki/Getting-started

https://www.freecodecamp.org/news/dom-manipulation-best-practices/

https://www.drewis.cool/story/mocking-the-dom-is-a-mistake-post

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表