节制虚拟化

将字符串和 DOM 节点转换成可兼容的虚拟 DOM 节点的库 失败。 。 。 .

API 密码

virtualize(nodes, options)

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

使用量

添加到您的应用程序中

npm install --save snabbdom-virtualize

需要/进口.

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

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

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

// 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 文档:

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 和用于 同样的方式:

// 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 这是创造出来的.

// 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。 。 。 .