EasyTemplateJS 模板引擎使用手册

EasyTemplateJS(EasyTemplate JavaScript)是一款小巧,纯粹,高性能的 JavaScript 模板引擎。

JavaScript 模板引擎作为数据与界面分离工作中最重要一环。使用 JavaScript 模板函数能够避免在 JavaScript 中拼接 HTML 字符串带来的不便和低维护性的缺点,利用反向思路,在 HTML 中嵌入 JavaScript 脚本,就像利用 JSPASP 技术编程一样。EasyTemplate 能够提供超高性能的渲染引擎,在 JavaScript 中使用模板技术来简化操作,并增强程序设计的灵活性。

The latest version: 2.1.1-RELEASE

特点

Performance test comparison/性能测试对比

从渲染性能上来说, EasyTemplateJS 和 artTemplate 都是使用预先静态编译原理,可以说已经接近的性能极限,是当前性能最高的模板引擎。一些实现较差的引擎不仅可能影响客户体验,还会会引起浏览器崩溃或异常终止,百度的引擎则性能较差,对浏览器渲染执行影响巨大。

Performance test comparison

使用

1. 引入JS文件

2. TemplateJS 模板表达式

TemplateJS 支持三类模板表达式,表达式不允许嵌套或交叉:

  1. 脚本表达式

    %{ JavaScript Script }%: 执行任意的 JavaScript 代码(作用JSP的<% %>小脚本相同),JS脚本中的 <> 等特殊符号,也可使用对应字符实体代替。

  2. 输出表达式

    {expression}: 插入要输出的变量(作用与 JSP 的 <%=expression%> 相同)。

  3. 转义输出表达式

    {-expression}: 用法与{expression}相同,输出数据时会自动转义特殊字符为字符实体。

3. 使用实例

EasyTemplateJS 向外暴露了一个名为Et的对象,用来完成模板操作。

// 1. 直接执行模板
var result = Et.template(tmplText, data);

// 2. 模板编译
var compiled = Et.template(tmplText);
// 编译后执行
var res2 = compiled(data);
var res3 = compiled(data2);
var res4 = compiled(data3);

4. 使用 out 输出信息

您也可以在JavaScript代码中使用 out 函数输出信息,这样不用断开您的代码块,有时候这会比使用 {name} 更方便清晰。

<!-- 使用 out 输出 -->
<script id="tmpl3" type="text/tmpl">
    %{ 
        for(var i=0; i < people.length; i++){ 
            // out function
            out( "<li>"+i+ " = "+people[i]+ "</li> "); 
        } 
    }% 
</script>
var res4 = Et.template("%{ out('Hello: '+name); }%", {
        name: "JACK"
    });
console.info(res4); //Hello: JACK

5. 模板表达式闭合标签自定义

由于某些模板定义和执行块在某些动态页面(JSP, ASP)中具有特殊涵义,所以在某些页面中使用模板符号会引起错误。EasyTemplate允许改变模板设置, 使用别的符号来嵌入代码。

为什么选择 %{}%, {} 作为闭合标签?

EasyTemplateJS 没有选择常用的 <%%>${} 作为模板引擎的默认闭合标签,因为在 JSPASP 等动态页面中,<%%>${} 都本身是动态特殊标记,当在 JSP 页面定义模板标签时,会对 JSP 解析造成影响,导致编译错误。所以 EasyTemplate 选择了尽量不会与其他语言冲突的 %{}% {}

尽管如此,但是如果您更喜欢使用 <%%>${},本身 EasyTemplate 模板标签是对外允许自定义的,您可以修改为 <%%>,以兼容你旧的模板代码。

注意: 如果您绝对修改模板表达式的闭合标签,您需要小心检查您的定义逻辑是否合理。

Et.tmplSettings 默认配置:

Et.tmplSettings={
    // 脚本表达式开始结束标记%{ JS script }%
    scriptBegin:"%{",
    scriptEnd:"}%",
    // 输出表达式开始结束标记 {name}
    outBegin:"{",
    outEnd:"}",
    // 转义输出表达式开始结束标记 {-name}
    escapeOutBegin:"{-",
    escapeOutEnd:"}"
}

重新定义示例:

// 修改脚本表达式开始结束标记
var userSettings=
{
    // 脚本表达式开始结束标记 <% JS script %>
    scriptBegin:"<%",
    scriptEnd:"%>",
    // 输出表达式开始结束标记 <%=name %>
    outBegin:"<%=",
    outEnd:"%>",
    // 转义输出表达式开始结束标记 <%-name %>
    escapeOutBegin:"<%-",
    escapeOutEnd:"%>"
}
// 全局修改
Et.tmplSettings=userSettings;

// 测试
console.info(
    Et.template(
        "hello: <%= name %>, <%- name %>",  // templateText
        {name: '<MoMo>'} // data
    )
);          
// 局部修改测试
console.info(
    Et.template(
        "hello: <%= name %>, <%- name %>",  // templateText
        {name: '<MoMo>'},                   // data
        userSettings                        //settings
    )
);  

6. API

Et 暴露了有限的几个 API:

模块化支持

结束

官方主页

留言评论

如果您有更好意见,建议或想法,请联系我。

The official home page

Comments

If you have more comments, suggestions or ideas, please contact me.

Email:inthinkcolor@gmail.com

http://www.easyproject.cn

支付宝钱包扫一扫捐助:

我们相信,每个人的点滴贡献,都将是推动产生更多、更好免费开源产品的一大步。

感谢慷慨捐助,以支持服务器运行和鼓励更多社区成员。

支付宝钱包扫一扫捐助

We believe that the contribution of each bit by bit, will be driven to produce more and better free and open source products a big step.

Thank you donation to support the server running and encourage more community members.

PayPal