HTML-Vorlagen über JavaScript-Template Literale

Kennen Sie diese super coolen Backticks für Strings in neuem JavaScript?

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

Neben der Variableninterpolation, die dort sehr praktisch ist, funktionieren mehrzeilige Strings wunderbar und eignen sich daher hervorragend für HTML-Schnipsel

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

Das sieht nicht übermäßig anders aus als JSX, oder?! Vielleicht würden wir so etwas als React-Komponente machen

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

Aber was, wenn wir React oder ein anderes ziemlich großes JavaScript-Framework nicht wirklich brauchen?

Was, wenn wir nur die Fähigkeit wollen, HTML-Vorlagen zu rendern und sie auch sehr effizient neu zu rendern, wenn wir es brauchen, wie React dafür bekannt ist?

Soweit ich weiß, dafür sind Projekte wie lit-html da. Zum Zeitpunkt des Schreibens ist dies eine ziemlich neue Bibliothek von Google und den Machern von Polymer.

Es ermöglicht Ihnen, eine HTML-Vorlage mit normalen Template-Literalen zu definieren, wie hier:

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

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

Dann rufen Sie die Render-Funktion auf und übergeben ihr diese Vorlage, die Daten und wohin sie gerendert werden soll

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

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

Dann sagen Sie, die Daten ändern sich… Sie rufen Render erneut auf

data.name = "Sammy";

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

Und hier glänzt lit-html. Es ist schlau genug, nur die Teile des DOMs zu aktualisieren, die es benötigt.

Hier ist ein kleiner Vergleich, bei dem einige Daten geändert werden und die Vorlagen dann neu gerendert werden. Wenn wir das Ganze mit innerHTML rendern, wird das gesamte DOM geändert. Mit lit-html werden nur kleinere innere Teile geändert.

Hier ist ein kleines Video, in dem Sie den Unterschied bei der DOM-Aktualisierung sehen können

Es gibt auch ein weiteres Projekt in dieser Richtung. Ich weiß nicht genug, um es zu beurteilen, aber es ist etwas älter und meiner Meinung nach etwas robuster. Es heißt HyperHTML.

HyperHTML ermöglicht es Ihnen auch, Vorlagen zu erstellen und sie zu rendern. Und am wichtigsten: sie effizient neu zu rendern.

Hier ist eine Demo, bei der die Daten von der Quotes on Design API stammen und in eine Vorlage eingefügt werden

Siehe den Pen Trying HyperHTML von Chris Coyier (@chriscoyier) auf CodePen.

Ziemlich cool, dass es diese Mini-Bibliotheken gibt, die nützliche Dinge für uns tun. Wenn also Situationen auftreten, in denen wir eine Funktion wünschen, die eine große Bibliothek hat, aber nicht die ganze große Bibliothek nutzen wollen, haben wir kleinere Optionen.