nanomorph

nanomorph [![稳定性][0]][1]

[![npm 版本][2]][3] [![构建状态][4]][5] [![downloads][8]][9] [![js-standard-style][10]][11] 用于真实 DOM 节点的超快差异算法：zap：

使用方法

var morph = require('nanomorph')
var html = require('nanohtml')

var tree = html`
`
document.body.appendChild(tree)
// document.body === 

morph(tree, html`
`)
// document.body === 

morph(tree, html`
`)
// document.body === 

清除输入值

要从输入中删除值,有几种选项:

html`` // set the value to null
html``               // omit property all together

重新排序列表

在 DOM 上处理元素列表是很常见的操作。添加、删除或修改元素列表是很常见的操作。 重新排序列表中的元素可能会很耗时。为了优化此操作,您可以 为 DOM 节点添加 id 属性。在重新排序节点时,它会比较 具有相同 ID 的节点彼此竞争,从而大大减少重新渲染的次数。 在与 DOM 节点缓存结合使用时,效果更加明显。

var el = html`
  
    

    

  
`

有时我们希望告诉算法不要对某些节点（以及其子节点）进行评估。这可能是因为我们确信它们没有发生变化，或者可能是因为另一段代码正在管理 DOM 树的某部分。要实现这一点，nanomorph 会对节点调用 .isSameNode() 方法，以确定是否需要更新它们。

阻止特定元素的变形

在某些情况下，两个元素永远不应该进行变形，而应该被替换。nanomorph 会自动对具有不同标签名称的元素进行此操作。但是，如果我们正在实现自定义组件系统，例如，不同类型的组件应该被视为具有不同的标签 - 即使它们都渲染为 `