从使用模板字面量构建的 HTML 中获取引用

JavaScript 模板字面量 非常适合用于创建小块 HTML。例如

// Probably from some API or whatever
const data = {
  title: "Title",
  content: "Content"
};

const some_html = `
  <div class="module">
    <h2>${data.title}</h2>
    <p>${data.content}</p>
  </div>
`;

但这仍然只是一个字符串。它还没有准备好附加到 DOM。如果我们需要以某种方式引用其中的元素，该怎么办？

我们已经写过一些库，它们与此相关：lit-html 和 hyperHTML。这些库非常小巧，但它们更多地关注以高效的方式重新渲染模板（就像超级迷你 React）。

如果只需要节点呢？这几乎是一行代码

const getNodes = str => { 
  return new DOMParser().parseFromString(str, 'text/html').body.childNodes;
}

现在我们可以将 HTML 模板字面量直接放入 DOM 中

document.body.appendChild(getNodes(some_html)[0]);

就是这样

查看 Chris Coyier 在 CodePen 上创作的笔 pQyZOz（@chriscoyier）。

但是我们如何获取这些 HTML 的各个部分？我们并没有真正引用任何东西，甚至没有放入的整个块。

我刚刚看到一个名为 Facon 的小库，它似乎可以做到这一点。它使用了 标记模板字面量，这非常酷

import f from 'facon';

const data = {
  title: "Title",
  content: "Content"
};

let html = f`
  <div class="module">
    <h2>${data.title}</h2>
    <p>${data.content}</p>
  </div>
`;

document.body.appendChild(html);

这跳过了我们的小型 getNodes 函数的需要，但更重要的是，我们可以提取这些引用！

let html = f`
  <div class="module">
    <h2 ref="title">${data.title}</h2>
    <p ref="content">${data.content}</p>
  </div>
`;

let { title, content } = html.collect();
title.innerText = "Title Changed!";

就是这样

查看 Chris Coyier 在 CodePen 上创作的笔 Facon 模板（@chriscoyier）。