0

当使用 {{{triple}}} 花括号语法从字符串输出原始 html 时，我在编译器的输出中看到几个 noscript 标记。

例如：

<noscript></noscript><h1>Boom</h1><noscript></noscript>

有谁知道为什么会呈现这些标签？

4

1 回答 1

2

当标签foo中的值{{{foo}}}发生变化时，Svelte 需要先移除现有的 DOM 节点，然后才能插入新的节点。由于它没有对先前插入的节点的引用（这将需要额外的间接和簿记），它需要知道哪些 DOM 节点紧接在 之前和之后{{{foo}}}。

在许多情况下，这很简单——如果你有这样的模板......

<div>{{{foo}}}</div>

...然后 Svelte 可以简单地做到div.innerHTML = foo。如果您有兄弟节点...

<div>
  <span>before</span>
  {{{foo}}}
  <span>after</span>
</div>

...然后 Svelte 可以删除 和 之间before的所有内容after。

但是如果不能保证标签周围有哪些节点......

<div>
  {{#if x}}
    <span>maybe I exist, maybe I don't</span>
  {{/if}}

  {{{foo}}}

  {{#if y}}
    <span>ditto!</span>
  {{/if}}
</div>

...然后有必要插入 Svelte 可以用来确保正确更新 DOM 的占位符节点。<noscript>节点是合适的，因为它们在启用了 JavaScript 的浏览器中不起作用（我们知道如果 Svelte 正在运行就是这种情况），但仍然有有用的方法，例如insertAdjacentHTML（注释节点没有）。

于 2018-04-10T13:16:43.803 回答