OSCHINA-MIRROR/tianqiq-tpl.js

tpl.js

##简介

tpl.js — это компактный (компактный, быстрый, простой) движок шаблонов JavaScript, который можно использовать в различных средах JavaScript.

##Характеристики

Использование JavaScript в качестве языка шаблонов, практически без затрат на обучение.
Небольшой размер, высокая скорость работы.
Чрезвычайно простой синтаксис, обеспечивающий удобство написания шаблонов.
Совместимость с различными стандартами (AMD, CMD).
Открытый исходный код MIT, без ограничений.

##Синтаксис

###Обзор В tpl.js синтаксис шаблона основан на строках, которые делятся на строки операторов JavaScript и строки вывода. Строки операторов JavaScript компилируются и выполняются во время выполнения, а строки вывода выводятся как HTML.

###Конкретный синтаксис

Каждая строка рассматривается как операторский блок, и все пробелы перед и после строки удаляются.
Если строка не начинается с символа «<» (левая угловая скобка), она считается строкой JavaScript; в противном случае она считается выходной строкой.
Если строка начинается с восклицательного знака «!», она также считается выходной строкой. Например, !aa, но анализирует выражение @{exp}.
В выходных строках выражения @{exp} используются для вывода переменных JavaScript. Например: @.item.name, @.name, @func(item), @list[i].
Если в выражении exp нет специальных символов, таких как «"», «'», «<», «>» и т. д., фигурные скобки {} можно опустить. Например: .item.name @.name @func(item) @list[i]
Если строка начинается с двух восклицательных знаков «!!», она считается чистой выходной строкой, и выражение @ не анализируется. Например: !!abc@def.
Если вы не хотите, чтобы tpl.js анализировал строку, содержащую символ @, используйте обратную косую черту «\» для экранирования. Например: @abc.

#Пример

<html>
<head>
<meta charset="utf8"/>
<script type="text/javascript" src="tpl.js"></script>
</head>
<body>
Данные находятся в этом файле
<div class="users">
	<script type="tpl">
			<table>
				for(var i=0;i<users.length;i++){
					var user = users[i];
						<tr>
    						<td>@user.name</td>
    						<td>@{user.age}year</td>
							<td>@user.sex</td>
							<td>@user.email\@126.com<td>
						</tr>
				}
			<table>
	</script>
</div>

<p></p>
Получение данных через AJAX<br>
<script type="tpl" data-data-url='./users.js'>
	!!@D.length вывод без изменений<br/>
	!@D.length анализ и вывод<br/>
	 <select>
			for(var i=0;i<D.length;i++){
					var user = D[i];
						<option value="@user.age" age="@user.age">
							@.name
						</option>
			}
	 </select>
</script>
 
<div id="result">

</div>


Получение данных через AJAX<br>
<script type="tpl" id="id" data-data-url='./users.js' data-tpl-url='./u.html?v'>

</script>
 


<script type="text/javascript">
	var beg = new Date().getTime();
    var users=[
        {
            name:'name',
            age:12,
            sex:'boy',
            email:'nimei'
        }, {
            name:'name1',
            age:12,
            sex:'boy',
            email:'nimei'
        }
    ];
		
    tpl.render(); //автоматическая визуализация всех тегов &lt;script type="tpl"&gt; на странице
    
    var tplText= "<ul>\n"
                +"for(var i=0;i<tplData;i++){\n"
                + "<li>@i</li>\n"
                +"}\n"
                + "<ul>\n";
	/*
    var func = tpl.func(tplText); //компиляция шаблона в функцию, получение параметра D в шаблоне
    var html = func(12);//вызов функции шаблона и передача параметра 12, где D становится 12 в шаблоне
    document.getElementById('result').innerHTML=html; //установка сгенерированного HTML в качестве содержимого веб-страницы
    */
	
	var html = tpl.html(tplText,12);//передача шаблона и параметров напрямую, получение HTML
	document.getElementById('result').innerHTML=html;
    document.write("Время: "+ (new Date().getTime()-beg).toString() +" миллисекунд");
</script>
</body>
</html>

##API

tpl.html(tplText,daata)

Получение HTML-кода путём передачи шаблона tplText и данных data.
tpl.func(tplText)

Компиляция tplText в функцию. Параметр в шаблоне ссылается на параметр D. Вызов возвращает HTML-код после компиляции шаблона.
tpl.render(nodes,finishCallBack)

Автоматическая визуализация всех тегов <script type="tpl"> на странице. Гарантирует сохранение исходной структуры HTML DOM. Эквивалентно замене исходного тега <script type="tpl">. Если вы не хотите визуализировать шаблон, добавьте атрибут norender. Если узлы не переданы, визуализируются все теги <script type="tpl">; если передаются узлы, выбираются только теги узлов и игнорируется атрибут norender.
tpl.serv(tplUrl,data,callback)

Получение HTML-кода после передачи адреса шаблона tplUrl и данных data, callback принимает скомпилированный HTML-код в качестве первого параметра.

###Заключение Приведённый выше документ содержит полный синтаксис tpl.js. Приглашаем всех протестировать и оставить отзыв. Исходный код доступен по адресу: https://git.oschina.net/tianqiq/tpl.js

OSCHINA-MIRROR/tianqiq-tpl.js

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/tianqiq-tpl.js .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/tianqiq-tpl.js