Легкий HTML-шаблон с TLX

TLX был представлен в статье Замена JSX шаблонными литералами. В этой статье мы покажем, как использовать TLX для поддержки облегченных HTML-шаблонов без использования препроцессора. Вы можете просто предоставить объект JSON и связать его с существующим элементом HTML DOM, который содержит литералы шаблона в HTML. Общие накладные расходы составляют всего 4,9 КБ (в сжатом виде).

Например, вот когда-либо популярный Hello World:

<div id="helloworld">
${message}
</div>
<script>
const data = {message: "Hello World"};
tlx.bind(data)(document.getElementById("helloworld"));
</script>

Конечно, есть гораздо более мощные способы использования, например создание шаблона для всей страницы:

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="../browser/tlx-render.js"></script>
<script>
const replacements = {
  data: {
    name: "Joe",
    pii: {
      age: 27,
      phone: "(555)-555-1212"
    }
  },
  html: {
    title: "TLX Example"
  }
};
</script>
</head>
<body onload="document.tlxRender(replacements,true)">
  ${!(document.title=html.title)||""}
  Hello <b>${data.name}</b>, we have the following information about
  you: 
  <ul>
    ${Object.keys(data.pii).map(key =>
      tlx`<li>${key}: ${data.pii[key]}</li>`)
    }
  </ul>
</body>
</html>

Обратите внимание на возможность использовать всю мощь литералов шаблонов JavaScript для создания побочных эффектов, таких как установка заголовка страницы и циклическое перемещение по карте для создания неупорядоченного списка элементов с использованием встроенного вызова tlx. Литерал встроенного шаблона с вызовом tlx включается путем предоставления true в качестве второго аргумента для document.tlxRender.

В каком-то смысле это переворачивает JSX с ног на голову, фокусируясь на HTML с небольшим количеством JavaScript и отсутствием процесса сборки по сравнению с обычно большим количеством JavaScript и процессом сборки. Короче говоря, он больше ориентирован на дизайнера пользовательского интерфейса, чем на программиста. В некоторых случаях это также может иметь существенное положительное влияние на SEO.

Кроме того, TLX поддерживает директивы, аналогичные VUE. Вот тот же код, использующий директиву t-foreach.

<html>
<head>
<script src="../browser/tlx-core.js"></script>
<script src="../browser/tlx-render.js"></script>
<script src="../src/tlx-directives.js"></script>
<script>
const replacements = {
  data: {
    name: "Joe",
    pii: {
      age: 27,
      phone: "(555)-555-1212"
    }
  },
  html: {
    title: "TLX Example"
  }
};
</script>
</head>
<body onload="document.tlxRender(replacements)">
  ${!(document.title=html.title)||""}
  Hello <b>${data.name}</b>, we have the following information about
  you: 
  <ul t-foreach="${data.pii}">
    <li>${key} : ${value}</li>
  </ul>
</body>
</html>

Обратите внимание на дополнительное включение tlx-directives.js. TLX позволяет вам добавлять только тот код, который вам нужен, чтобы свести к минимуму объем используемой памяти. Всего 0,5 КБ добавляется с помощью минархива tlx-directives.js.

Также обратите внимание, что document.tlxRender не принимает второй аргумент. Это связано с тем, что внутренний синтаксический анализатор должен работать несколько иначе, чтобы поддерживать директивы, а не встроенные литералы шаблонов. Вы не можете смешивать и сочетать на одной странице.

Директива t-foreach автоматически предоставляет переменные key, value и object во вложенный HTML.

TLXподдерживает директивыt-foreach, t-for с квалификаторами in и of, t-if для условного отображения и t-on для привязки обработчиков событий. Добавление пользовательских директив можно выполнить всего за одну строку кода. Более подробно расширенное использование директив будет рассмотрено в следующей статье.

Легкий HTML-шаблон с TLX

Вопросы по теме