通过 JavaScript 模板字面量创建 HTML 模板

您知道在新的 JavaScript 中那些超级酷的 反引号字符串 吗？

let emotion = `happy`;
let sentence = `Chris is feeling ${emotion}`;

除了其中的变量插值非常方便之外，它们还可以完美地处理多行字符串，使它们非常适合用于 HTML 代码块。

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

看起来与 JSX 没有太大区别，对吧？！也许我们会将其作为 React 组件来使用。

class MyModule extends React.Component {
  render() {
    return 
      <div class="module">
        <h2>{this.props.title}</h2>
        <p>{this.props.content}</p>
      </div>;
  }
}

但是，如果我们真的不需要 React 或任何其他相当庞大的 JavaScript 框架呢？

如果我们**唯一想要**的是渲染 HTML 模板以及在需要时**高效地重新渲染它们**的能力，就像 React 所知的那样呢？

据我了解，这就是像 lit-html 这样的项目存在的意义。在我撰写本文时，它是 Google 和 Polymer 团队的一个相当新的库。

它允许您使用常规模板字面量定义 HTML 模板，如下所示。

import { html, render } from './lit-html.js';

const helloTemplate = (data) => html`
  <div class="module">
    <h2>Hello ${data.name}!</h2>
    <p>${data.content}</p>
    </div>
`;

然后，您调用 render 函数，将该模板、数据以及您希望渲染的位置传递给它。

let data = {
  name: "Chris",
  content: "Just trying to figure stuff out."
}

render(helloTemplate(data), document.body);

然后假设数据发生变化……您再次调用 render。

data.name = "Sammy";

render(helloTemplate(data), document.body);

这就是 lit-html 闪耀的地方。它足够聪明，可以**仅**更新 DOM 中需要更新的部分。

这里有一个小对比，其中一些数据发生了变化，然后模板重新渲染。如果我们使用 innerHTML 渲染整个内容，那么整个 DOM 都会发生变化。使用 lit-html，它只会更改较小的内部部分。

这是一个简短的视频，您可以看到 DOM 更新的差异。

还有一个类似的项目。我不太了解它，但它有点旧，而且我相信它更加健壮。它被称为 HyperHTML。

HyperHTML 也允许您创建模板并渲染它们。最重要的是，可以**高效地重新渲染**它们。

这是一个演示，其中数据来自 Quotes on Design API 并插入到模板中。

查看 Chris Coyier 在 CodePen 上创建的笔 尝试 HyperHTML (@chriscoyier)。

这些小型库的存在确实很酷，它们可以为我们做一些有用的事情，因此当出现这种情况时，我们希望某个大型库具有的功能，但又不想使用整个大型库，我们就可以选择更小的方案。