1. Зачем вам нужно использовать шаблонизатор?
Относительно того, зачем использовать механизм шаблонов, согласно предложению, которое я часто говорю своим студентам: не изобретайте велосипед.
Проще говоря, самая существенная роль шаблона — «переход от статики к динамике», все, что для этого хорошо, является преимуществом, а что не хорошо — недостатком.
Для достижения цели «превратить статику в динамику» есть несколько моментов:
1. Ремонтопригодность (легко изменить потом);
2. Масштабируемость (если вы хотите увеличить функцию, удобно увеличить спрос);
3. Повышена эффективность разработки (лучше организована логика программы и удобна отладка);
4. Выглядит удобно (легко не так написать);
Из приведенных выше четырех пунктов преимущества переднего шаблонизатора составляют не один и не два пункта.
На самом деле, самый важный момент:Отделение представления (включая логику рендеринга презентации) от логики программы, Слишком много преимуществ разделения, таких как последующее обслуживание и модификация кода, добавление кода, отладка кода, а режимы разработки приложений (MVC, MVVM) намного удобнее.
2. Причины выбора рулей
1. Самый популярный в мире шаблонизатор
Handlebars — самый популярный механизм шаблонов в мире, поэтому он заслуживает того, чтобы быть самым популярным механизмом шаблонов в мире.
Handlebars были представлены во многих интерфейсных фреймворках, таких как MUI и AmazeUI и т. д. Рекомендуется использовать Handlebars.
Взяв в качестве примера AmazeUI, документация AmazeUI предоставляет шаблон компиляции для его Handlebars специально для веб-компонентов.
2. Простой синтаксис
Основной синтаксис руль является чрезвычайно простым. Используйте {{значение}}, чтобы обернуть данные. Ручки автоматически сопоставляют значение и объект ответа. Ниже приведен самый простой шаблон:
3. Введение в использование рулей
1. Загрузите рули
Скачать с официального сайта Handlebars:http://handlebarsjs.com./installation.html
Скачать через нпм:npm install --save handlebars
Скачать через Bower: bower install --save handlebars
Скачать через Гитхаб:https://github.com/daaain/Handlebars.git
Представляя CDN:https://cdnjs.com/libraries/handlebars.js
2. Знакомство с рулем
Вы можете импортировать его через тег
3. Создайте шаблон
- Шаг 1: Оберните необходимый шаблон с помощью
- Шаг 2: Заполните тип и идентификатор в теге
- Тип типа может быть любым типом MIME, кроме text/javascript, но рекомендуется использовать type="text/template", что более семантично.
- Идентификатор используется при последующей компиляции, что позволяет скомпилировать код.
- Шаг 3: Вставьте нужный нам html-код в тег
4. Скомпилируйте шаблон в JS-коде
Возьмите приведенный выше код в качестве примера, чтобы объяснить:
- Шаг 1: Получите содержимое шаблона и поместите его в tpl.Здесь содержимое, заполненное $("#myTemplate"), — это идентификатор, который вы использовали для создания шаблона на предыдущем шаге.
- Напоминание: здесь я использую селектор jQuery для получения, конечно, вы можете использовать собственный селектор DOM javascript для получения, например: docuemnt.getElementById('myTemplate') и document.querySelector('#myTemplate')
- Шаг 2: Используйте метод Handlebars.compile() для предварительной компиляции, и параметр, переданный этому методу, является полученным шаблоном.
- Шаг 3: Используйте метод шаблона () для компиляции и получения объединенной строки, и параметры, передаваемые на этот метод, являются шаблон, предложенным на предыдущем шаге
- Шаг 4: Вставьте скомпилированную строку в html-документ, куда вы хотите ее вставить, вот метод html(), предоставляемый jQuery, Точно так же вы также можете использовать собственный innerHTML
4. 5 общих функций в практическом применении
1.Templates
Когда вы импортируете библиотеку, мы можем с удовольствием писать шаблоны. Рекомендуемый способ — добавлять шаблоны через теги скрипта специального типа. Атрибут type очень важен, иначе браузеры будут рассматривать их как разбор javascript.
Шаблоны имеют простой для понимания синтаксис и могут использовать HTML, обычный текст и выражения.Выражения обычно заключаются в две или три пары фигурных скобок и могут содержать переменные или функции. Шаблон должен быть скомпилирован, прежде чем его можно будет использовать, как показано в следующем коде.Обратите внимание, что мы используем jquery только для удобства работы с dom, handlebars может хорошо работать и без jquery.
2. Expressions
В показанном выше примере любой html-код в выражении будет автоматически игнорироваться, что является очень полезной функцией, но иногда нам нужно разобрать html, поэтому нам нужно использовать три фигурные скобки {{{ }}} , как показано на код ниже.
Кроме того, выражения handlebars допускают вложенные значения, что может облегчить нам доступ к любому значению объекта javascript.
3. Context
Handlebars использует мощные функции Mustache, и контекст — одна из них. Мы можем поместить данные для передачи в этот объект javascript и использовать такие методы, как #each и #with, чтобы легко использовать данные объекта. Прочитав следующий кейс, вы поймете
4. Helpers
Handlebars не позволяет использовать javascript в шаблонах, а вместо этого предоставляет ряд функциональных функций (помощников), которые можно вызывать в шаблонах для облегчения повторного использования кода и создания сложных шаблонов. Формат для вызова помощников с использованием выражений аналогичен, {{helpername}}, и параметры также могут быть переданы, {{helpname 12345}}.
Разработайте новый помощник, используйте функцию registerHelper, следующий код демонстрирует, как создать новую функцию функции, как использовать встроенную функцию функции
5. Block helpers
Вспомогательные функции блоков похожи на обычные функциональные функции, но имеют открывающие и закрывающие теги (аналогичные встроенным #if, #each и т. д.), которые изменяют содержимое содержащегося HTML-кода. В то время его было немного сложнее создать, и он был более мощным. Используйте их часто для повторного использования функциональности, создания больших фрагментов многократно используемого HTML и т. д.
Также используйте Handlebars.registerHelper() для создания помощника блока, разница в том, что нам нужно использовать второй параметр, функцию обратного вызова. Взгляните на код ниже
Теперь вы в основном понимаете общие функции рулей, также через официальный сайт Handlebars.js вы можете получить больше кейсов и официальных документов
Адрес: http://handlebarsjs.com/
наконец
Механизм шаблонов — это необходимое знание для нас, чтобы заниматься интерфейсной разработкой, и это помогает нам быстро разрабатывать и создавать более качественный и качественный код.
я здесь«8 баллов, которые научат вас легко писать отличный код на Javascript»В нем говорилось о том, как писать наш код JavaScript, вы можете взглянуть.