# @appcues/snabbdom-virtualize 中文文档

规范地址：https://npmcn.com/package/%40appcues/snabbdom-virtualize/

版本：1\.1\.0
npm 元数据更新时间：2026-09-30T20:27:22.196Z
中文译文更新时间：2026-11-06T11:24:55.682Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40appcues/snabbdom-virtualize
原文对照：https://npmcn.com/package/%40appcues/snabbdom-virtualize/?lang=original
项目主页：https://github.com/appcues/snabbdom-virtualize#readme
源码仓库：https://github.com/appcues/snabbdom-virtualize

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：17.2 kB，10 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：snabbdom ^3\.1\.0
- 首次发布：2021-09-16T18:33:25.910Z
- 最新版本发布：2025-11-21T16:06:36.462Z
- 近 30 天下载量：32820（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 1 个）

## 中文简介

库用于将字符串和DOM节点转换成可兼容snabbdom的虚拟 DOM节点.

## 安装

```sh
npm install @appcues/snabbdom-virtualize
```

也可以使用：`pnpm add @appcues/snabbdom-virtualize`、`yarn add @appcues/snabbdom-virtualize`、`bun add @appcues/snabbdom-virtualize`

## README

# 节制虚拟化 [![Build Status](https://travis-ci.org/appcues/snabbdom-virtualize.svg?branch=master)](https://travis-ci.org/appcues/snabbdom-virtualize)

将字符串和 DOM 节点转换成可兼容的虚拟 DOM 节点的库 [失败](https://github.com/paldepind/snabbdom)。 。 。 .

## API 密码

### `virtualize(nodes, options)`

-   `nodes: Element|String` - 一个DOM `Element` 或 HTML 的字符串可变成一组虚拟 DOM 节点.
-   `options: Object` - 一连串的选项 传递到虚拟化呼叫。 现有备选方案有:
    -   `context: Document` - 要使用的替代 DOM 文档( 默认为 `window.document`) (中文(简体) ).
    -   `hooks: Object` - 在虚拟化过程中指定要调用钩子的对象。 见 [钩子](https://npmcn.com/package/%40appcues/snabbdom-virtualize/#readme-hooks) 下节.

## 使用量

添加到您的应用程序中

```
npm install --save snabbdom-virtualize
```

需要/进口.

```javascript
// ES6
import virtualize from 'snabbdom-virtualize';

// Require.
let virtualize = require('snabbdom-virtualize').default;
```

传出一组DOM节点或代表DOM节点的字符串并带有一个根节点.

```javascript
// Actual DOM nodes
let topNode = document.createElement('div');
let textNode = document.createTextNode('Click ');
let linkNode = document.createElement('a');
linkNode.setAttribute('href', 'http://example.com');
linkNode.textContent = 'here';
topNode.appendChild(textNode);
topNode.appendChild(linkNode);
let vnode = virtualize(topNode);


// String
let vnode = virtualize('<div>Click <a href="http://example.com">here</a></div>');
```

#### 指定不同的文档

您可以指定不同的 DOM 文档( 默认除外) `window.document` 在浏览器中通过 `context` 选项 `virtualize`。这将允许在没有浏览器的服务器侧设置中使用。 一个选项是使用 `jsdom` 创建可用 DOM 文档:

```javascript
const virtualize = require('snabbdom-virtualize').default;
const jsdom = require('jsdom').jsdom;
virtualizeString('<div>Click <a href="http://example.com">here</a></div>', {
  context: jsdom('<html></html>')
});
```

#### 使用自选模块

如果您喜欢导入仅用于虚拟化 DOM 节点的功能, 或者只是 用于虚拟化 HTML 字符串的函数,您是幸运的。 只是导入 `snabbdom-virtualize/nodes` 或者说 `snabbdom-virtualize/strings` 和用于 同样的方式:

```javascript
// DOM nodes.
import virtualize from 'snabbdom-virtualize/nodes';

let topNode = document.createElement('div');
let textNode = document.createTextNode('Click ');
let linkNode = document.createElement('a');
linkNode.setAttribute('href', 'http://example.com');
linkNode.textContent = 'here';
topNode.appendChild(textNode);
topNode.appendChild(linkNode);
let vnode = virtualize(topNode);


// HTML strings.
import virtualize from 'snabbdom-virtualize/strings';

let vnode = virtualize('<div>Click <a href="http://example.com">here</a></div>');

```

#### 钩子

您可以注册 `create` 钩上任何一个 `virtualize` 函数。 每一个被创建的节点都会叫这个 它在虚拟化过程完成后称为. 函数收到一个参数 - : `VNode` 这是创造出来的.

```javascript
// The function passed as the 'create' hook is called 3 times: once for the
// <div>, once for the <span> and once for the text node inside the <span>.
virtualize("<div><span>Hi!</span></div>", {
    hooks: {
        create: function(vnode) { ... }
    }
});
```

Hooks允许您在虚拟化后但在补上snabbdom之前在您的VNodes上执行一些操作.

### 项目设置

由ES6编写,使用 Babel 编译. 要开始 :

```
npm install
npm run build
```

这将在 `lib` 目录.

### 测试

测试可用 `npm test`。 。 。 .

## 常见问题

### @appcues/snabbdom-virtualize 是什么？

库用于将字符串和DOM节点转换成可兼容snabbdom的虚拟 DOM节点\.

### 如何安装 @appcues/snabbdom-virtualize？

在项目目录运行 npm install @appcues/snabbdom-virtualize，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：snabbdom（^3\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @appcues/snabbdom-virtualize 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/appcues\_\_snabbdom-virtualize 是否存在。

### @appcues/snabbdom-virtualize 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @appcues/snabbdom-virtualize 可以商用吗？

@appcues/snabbdom-virtualize 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @appcues/snabbdom-virtualize 的下载量有多少？

根据 npm 官方下载统计，@appcues/snabbdom-virtualize 在 2026/10/07 – 2026/11/05 这 30 天内被下载 32,820 次，日均约 1,094 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @appcues/snabbdom-virtualize 还在维护吗？

最新版本 1\.1\.0 发布于 2025/11/22（11 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 1 个；首次发布于 2021/09/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。