Front-end война пяти подонков, обучающий интерфейс — шаблонизатор (Handlebars.js)

JavaScript
Front-end война пяти подонков, обучающий интерфейс — шаблонизатор (Handlebars.js)

Недавно я думал написать о некоторых практических инструментах и ​​случайно наткнулся на этот термин.шаблонизатор, так что я проверил это. Я считаю, что когда эти три основных фреймворка (😜 также могут быть двумя основными фреймворками) популярны, я немного контактировал с ними, но я просто не знаю, что это кредит шаблонизатора.

Эта статья очень проста, всего лишь краткое введение. Чтобы узнать больше об API, ознакомьтесь с соответствующей документацией.

контактный шаблон

Наиболее очевидной особенностью шаблонизатора является использование фигурных скобок.{{ }}(но не ограничено{{ }}, а могут быть и другие специфические символы), что пишетсяkeyзначение, которое отображается какkeyсоответствующийvalue

vue шаблоны

Синтаксис шаблона явно используется в vue, и их документация тоже четко написана.

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

Выше мы видим, что мы только что написали в этикетке{{ message }}, но рендеринг грубый, и соответствует значению сообщения в данных, заявленных ниже.Конечно, vue много чего делает посередине, как и алгоритм diff, но мы не задействуем diff алгоритм сегодня, просто поймите, посмотрите на переднюю частьшаблонизатор

Кроме того, есть еще одна реализация в Vue -компонент одного файла

На самом деле почти один.vueФайл анализируется загрузчиком веб-пакета и, наконец, отображается. Нам нужно только посмотреть на реализацию этой фигурной скобки, которая такая же, как и выше.

Шаблоны в лодаше

lodash имеет специальный API, имя которогоtemplate,_.template([string=''], [options={}])использовать вот так

Лодаш шаблон выглядит с Vue не совсем такой же, как он использовал<%= %>Такого рода вещи оборачивают имя переменной, поэтому я сказал в начале, что это не ограничивается{{ }}фигурные скобки

другие шаблоны

Когда я впервые столкнулся с интерфейсом, я сказал в своем предыдущем блоге, что использовал backbone.js, и с тех пор это метод шаблона в underscore.js, который также является библиотекой (или фреймворком), заменяющей содержимое страницы. через шаблоны. , и вПередний и задний концы не разделеныРаньше в бэкенде тоже были шаблоны.

Что такое шаблон резюме

Что такое шаблон Я так понимаю, что мне заранее нравится набор шаблонов, а потом я могу менять данные в нем по данным, и структура шаблона не изменится. Как облегчить понимание, то есть многие отдают на аутсорсинг другим делать официальные сайты, они заранее напишут много официальных сайтов, всех видов, а потом изменят контент в соответствии с разными потребностями клиентов, и напишут это Официальный сайт — это даже шаблон, и потом его можно быстро изготовить, заменив в нем название компании, контактный номер, картинки и прочее.

Конечно, моя цель сегодня не в том, чтобы рассказать о том, что такое шаблон, просто для того, чтобы сначала было понятно, что это такое, давайте поговорим об этом шаблонизаторе.Handlebars.jsТеперь, поскольку инструмент, который я хочу написать, будет использовать это, поэтому я расскажу о том, как его использовать, я надеюсь, что это мало поможет студентам, которые будут использовать эту штуку в будущем.

текст начинается

<script type="text/template">а также<template>

Возможно, многие из вас не видели<script type="text/template">Тип тега скрипта даже имеет этот атрибут относительно значения атрибута тега скрипта,<template>Те, кто написал Vue на этикетке, видели это, и все они знают, что это можно написать в немdivРавная этикетка. Так для чего эти две метки? приходите посмотреть

Очевидно, что ничего~ Это характеристики этих двух тегов, браузер не парсит напрямую теги в этих двух тегах, магия не

Браузер игнорирует эти теги, что позволяет нам поместить туда все, что затем можно извлечь из библиотеки шаблонов для последующего использования, но<template>IE этой метки выбоины не поддерживаются.

Handlebars.js (библиотека шаблонов)

Handlebars.js предоставляет вам мощные функции, которые позволяют легко создавать семантические шаблоны. Handlebars.js совместим с шаблонами Mustache.js. В большинстве случаев мы можем использовать Handlebars.js вместо Mustache.js.

Можно сказать, что Handlebars.js является расширением Mustache.js, поэтому его можно использовать. Итак, как мы его используем? смотреть вниз

Самый простой в использовании

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板引擎</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <template id="template">
    <p>名字: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </template>

  <script>
    $(function() {
      var data = {
        name: '前端战五渣',
        age: 16
      };
      var root = $('#root'); // 获取根节点，需要更换内容的标签
      var htmlNode = $("#template").html(); // 获取标签内容
      var templateWithoutData = Handlebars.compile(htmlNode); // 生成没有数据的模板
      var templateWithData = templateWithoutData(data); // 向没有数据的模板传数据
      root.html(templateWithData); // 把有数据的模板添加到页面
    })
  </script>
</body>
</html>

Результатом выполнения приведенного выше кода является

Это самая простая реализация, положимdataДанные в странице отображаются на странице, и в следующем является небольшая функция, которую я написал для коммутации страниц

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板引擎</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
  <div>
    <p>我这是导航</p>
    <button data-place="one">真新镇</button>
    <button data-place="two">常磐市</button>
    <button data-place="three">常磐森林</button>
  </div>
  <div id="content"></div>

  <template id="one">
    <h1>{{ name }}</h1>
    <p>我是第一个页面</p>
  </template>

  <template id="two">
    <h1>{{ name }}</h1>
    <p>我是第二个页面</p>
  </template>

  <template id="three">
    <h1>{{ name }}</h1>
    <p>我是第三个页面</p>
  </template>

  <script>
    var one = { name: '真新镇' };
    var two = { name: '常磐市' };
    var three = { name: '常磐森林' };
    $(function () {
      var content = $('#content');
      $('button').on('click', function () {
        var target = $(this).attr('data-place');
        var htmlNode = $('#' + target).html();
        var templateWithoutData = Handlebars.compile(htmlNode);
        var templateWithData;
        switch(target) {
          case 'one':
            templateWithData = templateWithoutData(one);
            break;
          case 'two':
            templateWithData = templateWithoutData(two);
            break;
          case 'three':
            templateWithData = templateWithoutData(three);
            break;
        }
        content.html(templateWithData);
      })
    })
  </script>
</body>
</html>

helper

Документация не объясняет этоhelperЧто это значит? Насколько я понимаю, это какая-то встроенная грамматика, мы можем использовать ее или настроить хелпер, который здесь не задействован.

if helper

Это то, что мы можем написать некоторую логику if else в шаблоне, чтобы судить о том, что присутствует или скрыто.

<div id="root"></div>

<template id="template">
    {{#if job}}
    <p>名字: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>工作: {{ job }}</p>
    {{else}}
    <p>还没有工作</p>
    {{/if}}
</template>

<script>
$(function() {
  var data = {
    name: '前端战五渣',
    age: 20,
    job: '前端开发'
  };
  var root = $('#root'); // 获取根节点，需要更换内容的标签
  var htmlNode = $("#template").html(); // 获取标签内容
  var templateWithoutData = Handlebars.compile(htmlNode); // 生成没有数据的模板
  var templateWithData = templateWithoutData(data); // 向没有数据的模板传数据
  root.html(templateWithData); // 把有数据的模板添加到页面
})
</script>

Написанный выше код, Job в DATA стоит, могу отобразить в финальном рендере.

если я удалю работу

var data = {
    name: '前端战五渣',
    age: 20,
    job: ''
  };

это не показывает, это показывает{{else}}Последнее, это очень похоже на синтаксис jsx

Аннотации в шаблонах

Как пишем комментарии в шаблоне смотрите непосредственно

<template id="template">
    {{#if job}}
    <p>名字: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>工作: {{ job }}</p>
    {{else}}
    <!-- 我是注释我是注释 -->
    {{! 我是注释我是注释  }}
    {{!-- 我是注释我是注释 --}}
    <p>还没有工作</p>
    {{/if}}
</template>

Мы знаем, что в HTML комментарии<!-- -->Написано так, да, но это будет отображаться в html, так как же нам написать комментарии, чтобы они не отображались на странице, это то, что я написал в своем коде{{! }} 和 {{!-- --}}

Суммировать

На самом деле, этот может поддерживать язык шаблонов, и если еще достаточно моих собственных инструментов для написания, а соответствующих документов Handlebars.js не так много, вы можете взглянуть, вы можете прочитать его через некоторое время. На самом деле пользоваться этой штукой несложно.Если ты сам пишешь шаблонизатор, то ты классный человек.

Я передовая пятая сволочь, ученица начальной школы в переднем мире.

Категории