JavaScript模板引擎 tileTemplate

码农软件 · 软件分类 · 模板引擎 · 2019-08-23 08:44:14

软件介绍

tileTemplate 是一个简单的、高性能的Javascript模板引擎。

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

    主要特性

  • 简单小巧,精简后只有4.58K,开启gzip后只有2.3K;

  • 原生语法,高性能预编译和渲染模板 (性能测试)

  • 安全机制,过滤和转义危险语句(安全测试)

  • 支持各种模块化标准(CommonJS / AMD / CMD 等)( Require.js示例 Sea.js示例 )

  • 支持在 Node.js 环境下运行,同时也支持Express.js (v1.5.0+);

  • 支持调试,精确定位并通过控制台输出和显示错误或异常信息(查看调试);

  • 支持所有主流的浏览器(IE6+);

  • 支持 include 和自定义标签语法;

    下载和安装

    通过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.tile"));

// 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('Server running at 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('Listening on port %d', server.address().port);
});




主要语法

    tileTemplate 目前只支持原生语法。

    文本输出:

<%=变量%>
<img src="<%=avatar%>" />

    JS语句:

<% if (list.length > 0) { %>
<p>Total: <%=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 '<img src="'+img+'" alt="em'+content+'"/>';
    } else {
        return content.toString();
    }
});

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

#使用标签语句
<%=tag:em:12%>
<%=tag:em:haha%>
<%=tag:em:哈哈%>    
<%=tag:time%>

注:自定义标签语句只能输出字符串。

本文地址:https://www.codercto.com/soft/d/12975.html

走进搜索引擎

走进搜索引擎

梁斌 / 电子工业出版社 / 2007-1 / 49.80元

《走进搜索引擎》由搜索引擎开发研究领域年轻而有活力的科学家精心编写,作者将自己对搜索引擎的深刻理解和实际应用巧妙地结合,使得从未接触过搜索引擎原理的读者也能够轻松地在搜索引擎的大厦中邀游一番。《走进搜索引擎》作为搜索引擎原理与技术的入门书籍,面向那些有志从事搜索引擎行业的青年学生、需要完整理解并优化搜索引擎的专业技术人员、搜索引擎的营销人员,以及网站的负责人等。《走进搜索引擎》是从事搜索引擎开发的......一起来看看 《走进搜索引擎》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具