tileTemplate

Простой и высокопроизводительный шаблонизатор на JavaScript.

一个简单的、高性能的JavaScript模板引擎。

注：测试结果会因环境而有所不同，仅供参考。

Основные характеристики

• Простой и компактный, после оптимизации размер составляет всего 4.58K, а после сжатия gzip — всего 2.3K;
• Исходный синтаксис, высокая производительность благодаря предварительной компиляции и рендерингу шаблонов (тест производительности);
• Механизм безопасности, фильтрует и экранирует опасные выражения (тест безопасности);
• Поддерживает различные стандарты модульности (CommonJS / AMD / CMD и др.) (пример Require.js) и (пример Sea.js);
• Работает в среде Node.js, также поддерживает Express.js;
• Поддержка отладки, точное определение местоположения и вывод ошибок или исключений через консоль (просмотр отладки);
• Поддерживаются все основные браузеры (IE6+);
• Поддерживается include и пользовательские теги;

Загрузка и установка

• Исходный код tiletemplate.js;
• Сжатая версия tiletemplate.min.js;

Установка с помощью npm:

npm install tiletemplate

Установка с помощью bower:

bower install tiletemplate

Использование

Создание шаблона:

<!-- type можно определить произвольно text/xxxx -->
<script id="test-tpl" type="text/tileTemplate">
    <h1><%=title%></h1>
    <ul> 
        <% for (i = 0, len = list.length; i < len; i ++) { %>
            <li>
                Пользователь: <%=list[i].user%>
                Сайт: <a href="<%=list[i].site%>"><%=list[i].site%></a>
            </li>
        <% } %>
    </ul>
</script>

Предварительная компиляция шаблона:

// Возвращает функцию
var compiler = tileTemplate.compile(document.getElementById('test-tpl').innerHTML);

Рендеринг шаблона:

var data = {
    title : "Заголовок XXX",
    list : []
}; 

for (var i = 0; i < 10; i ++) {
    data.list.push({
        index: (i+1),
        user: '<strong style="color:red">tileTemplate '+(i+1)+'</strong>',
        site: 'https://github.com/pandao/tileTemplate'
    }); 
};

// Вывод HTML
// document.getElementById('output').innerHTML = compiler(data);
document.getElementById('output3').innerHTML   = tileTemplate.render("test-tpl", data);

Примечание: Также поддерживается использование в Require.js и Sea.js.

В Node.js

var tileTemplate = require("../src/tiletemplate.node");

// После установки через npm
// var tileTemplate = require('tiletemplate');

// Установка базового пути
tileTemplate.config("basePath", __dirname + "/tpl/");

// tileTemplate.render(имя файла/шаблон, данные, кодировка);
// console.log(tileTemplate.render("Hello <%=str%>", {str:"wolrd!"}));

// Предварительная компиляция определённого шаблона для циклического рендеринга
//var compiler = tileTemplate.compile(tileTemplate.readFile("list"));

// Начиная с версии v1.5.0 не нужно указывать расширение, по умолчанию используется tile.html, можно настроить отдельно
var html = tileTemplate.render("test", data);
var http = require('http');

http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(html);
}).listen(8888);

console.log('Сервер работает на http://127.0.0.1:8888/');

Примечание: Метод tileTemplate.readFile(имя файла, кодировка) доступен только в Node.js.

В Express.js

var express      = require('express');
var app          = express(); 
var tileTemplate = require("tiletemplate");

// Инициализация поддержки Express
tileTemplate.expressInit(app, __dirname + "/tpl/");

app.get('/', function (req, res) { 
    res.render('index', data);   // начиная с версии v1.5.0 не требуется указывать расширение, по умолчанию используется tile.html, можно настроить отдельно
});

var server = app.listen(3000, function() {
    console.log('Прослушивание порта %d', server.address().port);
});

Основной синтаксис

tileTemplate в настоящее время поддерживает только исходный синтаксис.

Вывод текста:

<%=переменная%>
<img src="<%=аватар%>" />

Выражения JavaScript:

<% if (list.length > 0) { %>
<p>Всего: <%=list.length%> </p>
<% } else { %>
<p>Пока нет</p> 
<% } %>

<% var total = list.length; %>

<%=(list.index>1?'>1':'<1')%>
...

Комментарии к переменным:

<%=#переменная%>

Строчные комментарии:

// Комментарий
//<%=(list.index>1?'>1':'<1')%>
<% /* Комментарий */ %>
<!-- HTML комментарий --> **Вложенный шаблон (поддерживает многоуровневое вложение):**

<% include('шаблонid') %>

Экранирующие символы (по умолчанию не экранирует символы, нужно добавить @ перед нужными символами):

<img src="<%=@avatar%>" />

Назначение: фильтрация и предотвращение XSS-атак. Например, когда значение avatar равно http://xxxx/xx.jpg" onload="alert(123).

Пользовательские теги:

Определение тегов

tileTemplate.tag("em", function(content) {
if(content == 12) { var img = "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif"; return ''; } else { return content.toString(); } });

tileTemplate.tag("time", function() { return " time: " + (new Date).getTime(); });

Использование тегов

<%=tag:em:12%> <%=tag:em:haha%> <%=tag:em:哈哈%>
<%=tag:time%>

Примечание: пользовательские теги могут выводить только строки.

Основные методы

Параметры по умолчанию:

settings = { debug : false, // включение функции отладки, по умолчанию отключена, в рабочей среде это может повысить производительность и скорость; в процессе разработки рекомендуется включить; cached : true, // включение кэширования, по умолчанию включено, более высокая производительность filter : true, // фильтрация опасных выражений в шаблонах, таких как alert и т. д. openTag : "<%", // открывающий тег шаблона closeTag : "%>" // закрывающий тег шаблона }

Изменение и настройка параметров:

Изменение параметров с помощью методов set или config, config — псевдоним

Пакетная настройка

tileTemplate.set({ openTag : "{{", closeTag : "}}" });

tileTemplate.config({ openTag : "{{", closeTag : "}}" });

Индивидуальная настройка

tileTemplate.set("openTag", "{{"); tileTemplate.config("openTag", "{{");

Рендеринг шаблона:

@id String — идентификатор шаблона, либо можно передать шаблон напрямую @data Key/Value — данные, передаваемые в шаблон @filename String — если шаблон не получается через идентификатор, а передается напрямую, необходимо задать имя шаблона

tileTemplate.render(id, data, filename);

Предварительная компиляция шаблона:

@tpl String — содержимое шаблона @data Key/Value — данные, передаваемые в шаблон, по умолчанию {} @options Key/Value — параметры конфигурации, по умолчанию {include: false, name : "tile" + guid}, соответственно, наличие вложенных шаблонов и имя вложенного шаблона

tileTemplate.compile(tpl, data, options);

Создание пользовательских тегов:

@name String — имя тега @callback Function — метод обработки тега, параметр — content, представляет собой параметр, переданный в тег

tileTemplate.tag(name, callback);

Очистка кеша определенного шаблона:

@id String — идентификатор шаблона или имя файла

tileTemplate.clear(id);

Расширение tileTemplate:

tileTemplate.xxx = xxxx;

Или

tileTemplate.extend({ xxx : "xxxx" add : function() { } });

Журнал обновлений

Посмотреть журнал обновлений

Лицензия

The MIT License (MIT)

Copyright (c) 2014 Pandao