Laytpl - это разрушительный шаблонный двигатель JavaScript. Он использует умные методы реализации, чтобы сделать свой собственный размер небольшим и изысканным. Мало того, что он имеет максимальную производительность, но также имеет почти все функции традиционного фронтального двигателя. Вся магия преобразования создается менее чем 1 КБ кода, что кажется революцией или нет, но нет никаких сомнений в том, что Laytpl действительно представляет его миру самым легким способом. Если вы никогда не подвергались воздействию этого приложения, это не имеет значения. Следующая история сделает вас неспособными подождать, чтобы выбрать Laytpl, и с тех пор вы можете лучше понять данные о странице и достичь пика вашей жизни!
Преимущество Laytpl
• Отличное выступление, почти в 1 раза быстрее, чем ArtTemplate и Dot, которые известны как король производительности, и в 20-40 раз быстрее, чем Baidutemplate, KissyTemplate и т. Д., Чем больше масштаб данных и частота рендеринга, тем более очевидна.
• Объем просто мал до крайнего, менее 1 кб, и в будущем он станет меньше.
• У него есть механизмы безопасности, такие как Escape, и имеет относительно научные функции отчетности об ошибках.
• Нативный JavaScript может быть написан произвольно в шаблоне, чтобы полностью обеспечить гибкость шаблона
• Поддержка приложения на платформе Node.js
• Поддерживать все древние или современные основные браузеры
Как использовать
Кода -копия выглядит следующим образом:
// Шаг 1: Напишите шаблон. Вы можете использовать тег сценария для хранения шаблонов, например:
<script id = "demo" type = "text/html">
<h1> {{d.title}} </h1>
<ul>
{{# for (var i = 0, len = d.list.length; i <len; i ++) {}}
<li>
<pan> имя: {{d.list [i] .name}} </span>
<pan> City: {{d.list [i] .city}} </span>
</li>
{{#}}}
</ul>
</script>
// Шаг 2: Создайте представление. Используется для отображения результатов.
<div id = "view"> </div>
// Шаг 3: рендеринг шаблона
var data = {
Название: 'Front-End Siege',
Список: [{name: 'xianxin', City: 'Hangzhou'}, {name: 'xie liang', city: 'beijing'}, {name: 'qianqian', город: 'Hangzhou'}, {name: 'dem', city: 'beijing'}]]]
};
var getTpl = document.getElementbyId ('demo'). innerHtml;
Laytpl (getTpl) .render (data, function (html) {
document.getElementbyId ('view'). innerHtml = html;
});
Описание документации
1. Шаблон Синтаксис
Вывод нормального поля без ухода HTML: {{D.Field}}
Вывод нормального поля и Escape html: {{= d.field}}
Javascript Script: {{# javascript ratement}}
2. Встроенный метод
1): Laytpl (шаблон); // основная функция, вернуть объект
var tpl = laytpl (шаблон);
tpl.render (данные, обратный вызов); // Метод рендеринга, возвращает результаты рендеринга, поддерживает два режима: асинхронные и синхронные
а): асинхронно
tpl.render (data, function (result) {
console.log (результат);
});
б): синхронно
var result = tpl.render (data);
console.log (результат);
2): laytpl.config (опции); // Инициализировать конфигурацию
Параметры - это объект
{open: 'Start Tag', Close: 'Close Tag'}
3): laytpl.v // Получить номер версии
Что следует отметить
1. Просто введите Laytpl.js напрямую, и вы также можете использовать SeaJ и другую модульную нагрузку напрямую.
2. Laytpl можно использовать по желанию, как в бизнесе, так и на личных платформах.
3. Обязательно сохраните источник в любом случае и не удаляйте комментарии заголовка Layoutpl.js.
Официальный веб -сайт: http://sentsin.com/layui/laytpl/
Скачать: //www.vevb.com/codes/207072.html