Как правильно хранить отдельный HTML шаблон?

220

18 сентября 2018, 02:40

Нужно хранить HTML шаблоны так чтобы в определенный момент их можно было взять и подключить к странице с помощью jS. Можно определять HTML прямо в js файле так чтобы функция возвращала нужный компонент, но кажется это не очень красиво. В процессе поиска решения наткнулся на

<template>

и html импорты, но как-то не обнаружил надежных свидетельств того, что какой-то из этих способов активно используется. Хотелось бы получить какой-то Best practice пример того как это принято делать. т.к. приложение не большое и клиентского кода не очень много, хотелось бы решение на чистом javascript или с использованием какой-нибудь очень легковесной и специализированной библиотеки.

Answer 1

Если хотите прям простое и отдельное, то можно попробовать jQuery Template Plugin или JsRender. Помимио документации статьи гугляться очень просто.

Так же можно посмотреть на более сложные и мощные шаблонизаторы вроде Jade, Pug или mustache.js. Но для них нужна сборка через Gulp/Grunt/Webpack

В основном сейчас все пишут с фреймворками и их шаблонами, например AngularJs, VueJs или библиотеками ReactJs

Пример кода с JsRender

var $ = window.jsrender;
// Можно прямо из строки, например вызывать после завершения AJAX запроса и полученный контент передавать в функцию template()
var tmpl = $.templates("Name: {{:name}}");

А можно из шаблонов в тегах <script>

<script id="myTemplate" type="text/x-jsrender">
    Name: {{:name}}
</script>

Вот так происходит отрисовка шаблона из строки (взят с документации)

var tmpl = $.templates(" Name: {{:name}}<br/> ");
var person = {name: "Jim"};
// Render template for person object
var html = tmpl.render(person); // ready for insertion, e.g $("#result").html(html);
// result: "Name: Jim<br/> "

Я лично давным давно использовал jQuery Template и работает очень просто, думаю JsRender так же будет работать удобно, но еще и быстрее.