Шаблонизатор js своими руками
Добавил пользователь Владимир З. Обновлено: 19.09.2024
В статье про ввод и вывод в JavaScript вы видели проблему создания сниппетов HTML на лету для последующего добавления на страницу.
Handlebars это шаблонизатор для JavaScript, который помогает снизить сложность создания таких страниц.
Давайте перепишем наш пример на использование Handlebars.
Версия на чистом JavaScript
examples/js/pure_js_greating.html
Try!
Переключение на Handlebars
Вот решение с использованием Handlebars:
examples/js/handlebars_greating.html
Try!
Чтобы использовать Handlebars, нам нужно сначала загрузить библиотеку Handlebars. Мы можем использовать ее прямо с CDN JS:
либо мы можем скачать этот файл к себе на сервер и загружать его оттуда.
Мы создаем сниппет HTML и расставляем плейсхолдеры в двойных фигурных скобках:
Мы можем описать шаблоны в HTML несколькими способами, но один из рекомендуемых способов это включить его в блоке head HTML страницы внутри тегов script с уникальным id . Таким образом мы легко можем описать несколько шаблонов. И намного понятнее, какой мы хотим видеть окончальтельную HTML страницу.
Затем мы описываем JavaScript. В коде JavaScript мы заменяем нашу строку, собирающую переменные и HTML, которая выглядит вот так:
Я знаю, что это выглядит сложнее, чем раньше, и в таком простом примере, где нам нужно просто вставить содержимое двух переменных в простой сниппет HTML, это может быть чрезмерно. Но когда ваше приложение будет расти, вы увидите, что сложность решения на простом Javascript будет расти, в то же время сложность решения на Handlebar останется примерно такой же.
Давайте пройдемся по тем 4 строкам.
В первой строке мы обращаемся к элементу с id text-template , где у нас лежит шаблон, и, используя метод innerHTML , мы копируем содержимое элемента в переменную source .
В третьей строке мы создаем ассоциативный массив с ключами, которые совпадают с плейсхолдерами в шаблоне. Значения этих ключей заменят плейсхолдеры. В массиве находятся значения, которые мы получили из элементов input . Это просто обычный объект JavaScript. Ничего особенного. (Вы можете называть это хэш, ассоциативный массив или словарь в зависимости от другого языка, с которым вы знакомы.)
И в конце мы говорим шаблону заменить плейсхолдеры предоставленными значениями и присвоить полученный результат переменной html .
После этого мы можем вернуться обратно к оставшемуся коду JavaScript, и добавить новый HTML в существующий DOM с помощью
Это были основы Handlebars. Если вы хотите узнать больше, ознакомьтесь с документацией на веб-сайте Handlebars
В этой статье мы собираемся дать обзор шаблонов в JavaScript. Сначала мы обсудим, что такое шаблоны JavaScript, когда мы должны их использовать и как мы их реализуем, прежде чем углубляться в некоторые подробности, касающиеся некоторых популярных шаблонизаторов. Мы собираемся сосредоточиться на усах , руле и шаблоне jQuery .
Что такое шаблоны JavaScript?
Шаблоны JavaScript — это метод отделения структуры HTML от содержимого, содержащегося в нем. Системы шаблонов обычно вводят некоторый новый синтаксис, но с ними обычно очень просто работать, особенно если мы ранее использовали системы шаблонов где-то еще (например, Twig в PHP). Интересно отметить, что замена токенов обычно обозначается двойными фигурными скобками ( >
Когда мы должны использовать шаблоны JavaScript?
Как только мы обнаружим, что HTML включен в строки JavaScript, мы должны начать думать о том, какие преимущества могут дать нам шаблоны JavaScript. Разделение проблем имеет первостепенное значение при создании поддерживаемой кодовой базы, поэтому следует изучить все, что может помочь нам достичь этого. В интерфейсной веб-разработке это проявляется при отделении HTML от JavaScript (это работает в обоих направлениях, так как мы не должны включать встроенный JavaScript в HTML).
Некоторыми распространенными сценариями, которые могут извлечь выгоду из шаблонов JavaScript, являются веб-приложения в реальном времени (например, приложение для потоковой передачи в реальном времени для комментариев к событиям) или интернационализация (i18n), которые довольно часто требуют, чтобы различный контент отображался с использованием одного и того же форматирования.
Как мы реализуем шаблоны JavaScript?
Мы углубимся в это с конкретными примерами библиотеки, но по сути это так же просто, как включение выбранной библиотеки, выборка нашего шаблона и его рендеринг вместе с некоторыми данными.
Большинство библиотек поддерживают как встроенные, так и внешние шаблоны. Встроенные шаблоны отлично подходят для случаев, когда у нас очень мало шаблонов или мы знаем, что будем использовать включенные шаблоны при каждой загрузке страницы, но в целом наши шаблоны должны быть внешними. Внешние шаблоны приносят много преимуществ, в основном то, что шаблоны никогда не будут загружаться на клиент, если они не нужны странице.
Какой шаблонизатор страниц для своего веб-проекта выбрать из всего этого зоопарка? Обо всем этом в нашем новом материале.
Быстрый и лаконичный JavaScript-шаблонизатор для Node.js и браузера.
Пример кода
Dust.js – JavaScript-шаблонизатор от Linkedin. Он происходит от семейства ctemplate и спроектирован, чтобы работать асинхронно как на сервере, так и в браузере. Главное достоинство Dust в том, что он позволяет сильно сократить объем логики в шаблоне. Вместо типичного вида шаблона:
Dust позволяет делать так:
dōmo позволяет совмещать html-разметку и css в JavaScript-логике и делать это как в браузере, так и на сервере.
Пример кода
Этот шаблонизатор позволяет создавать JavaScript-шаблоны страницы и на сервере, и на клиенте, а также обладает чистым синтаксисом.
Пример кода
Marco – это легковесный и быстрый html-шаблонизатор от eBay. Он работает на Node.js и поддерживает потоковую передачу данных, асинхронный рендеринг и пользовательские теги.
Пример кода
Простой однофайловый компонент, который срендерит кнопку и счетчик, он будет показывать, сколько раз на кнопке кликнули.
Шаблонизатор с малым количеством логики. Работает с огромным количеством языков и фреймворков, вроде Node.js, а также поддерживается многими известными редакторами кода, например Emacs, Atom и Vim.
Пример кода
Handlebars.js – самое известное расширение Mustache. Оно обратно совместимо с Mustache, и, так же как и родитель, разделяет основную логику и разметку.
Пример кода
Наиболее сложный, расширяемый и функциональный из современных JavaScript-шаблонизаторов. Разработан Mozilla, совместим с Node.js.
Пример кода
В JavaScript-шаблонизаторе Template7 основное внимание уделяется разработке под мобильные платформы, а его синтаксис напоминает синтаксис Handlebars.
Пример кода
Главный принцип шаблонизатора Haml (HTML abstraction markup language) – разметка должна быть красивой.
Пример кода
Бывший шаблонизатор Jade, ныне известный как Pug, обладает самым чистым синтаксисом среди перечисленных в этой подборке. Он вдохновлен Haml, но имеет меньшее количество служебных символов, а вложенность в нем регулируется так же как и в Python – отступами.
5 последних уроков рубрики "Разное"
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг - это будущее Ваших сайтов
Разработка веб-сайтов с помощью онлайн платформы Wrike
Создание вебсайта - процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
Вопрос по сабжу. После разморозки в веб-деве с удивлением обнаружил, что еще и такое есть.
В каких задачах без шаблонизации js точно не обойтись?
Что почитать на эту тему?
На ночь глядя, мне кажется, что из javascript сделали bloatware, раз уже мы дошли до подобного :)
Так JS-фреймворкам нужен шаблонизатор для View. Например, Underscore со своим шаблонизатором, Handlebars, Mustache. А вот Angular.JS так вообще сам себе шаблонизатор )
Чтобы потом было какие проблемы решать, вроде той, например: Как оптимизировать AJAX для ПС :>
Вот чтобы было удобно отображать полученные данные и запилили шаблонизаторы на фронтенде. Впрочем, если тебе удобнее var result = " . " + data.var1 + . , никто не запрещает.
Для локализации используется, например.
эволюция парадигмы разработки в вебе, полное разделение фронтенда и бекенда, возможность посадить людей за разные участки которые не пересекаются, меньше багов, меньше проблем, быстрее разработка, больше профит, лучше UX (это если мы берем шаблонизацию на JS в рамках Single Page Application)
глянь handlebars для примера просто, думаю там все понятно
Спасибо за ответ. Как все усложнилось то за прошедшие 6 лет.
ЧСХ, используют это в основном там, где не надо.
Короче говоря оно надо, чтобы при необходимости проще было запихнуть данные в JSON -> HTML.
Такое вот у него в жизни назначение.
umren , подскажи пожалуйста какой js-фреймворк целесообразно изучать новичку.
Ну, естественно, кроме jquery :-)
Ты имеешь ввиду структурный, который позволяет вывести организацию кода на новый уровень?
я думаю проще всего начинать с backbone, там меньше магии, больше кода пишешь.
Как ты выходишь из подобных положений?
Изучать AngularJS, потом ReactJS.
А мне бэкбон больше нравится, больше свободы.
Ток он чота лежит прям щас ))
Хорошо, предположим, что фронтенд полностью реализован на AngularJS, например.
Что ложиться на server-side, какие конкретно участки веб-логики?
Что ложиться на server-side, какие конкретно участки веб-логики?
REST на бекенде в виде апи и все, что тебе еще от него нужно? надо ведь где-то все хранить, почту отправлять, rabbit mq забивать и мемкешы засирать в том числе.
То есть минимальная серверная логика, которая дергает БД и отдает результат во фронтенд?!
Это если очень упрощенно представить.
И вообще, что можно почитать о грамотной архитектуре построения веб-приложений?
Есть какие-то общие архитектурные решения?
И вообще, что можно почитать о грамотной архитектуре построения веб-приложений?
слишком opinionated, можно отслеживать общие тенденции если читать все доступные источники и слушать гуру от сообщества.
Есть какие-то общие архитектурные решения?
мне кажется тут просто решает опыт.
То есть минимальная серверная логика, которая дергает БД и отдает результат во фронтенд?!
Это тоже слишком общее утверждение? Хочу проверить свою систему понятий, прежде чем двигаться дальше.
посмотри на любой более менее нормальный rest api, вот представь что ты реализуешь такой же, на бекенде, а фронтенд к нему стучится и просто забирает данные, все манипуляции с этими данными уже происходят на фронтенде, в этом основная идея.
Читайте также: