Ktemplate

简单,高效,支持预编译、子模板、sourcemap的js模板引擎

Download .zip Download .tar.gz View on GitHub

简介

ktemplate 是基于 nodejs 的 js 模版引擎。

它的语法简单,学习成本低,支持预编译,支持子模板,还支持 sourcemap 调试。

它没有重新定义语法,而是采用了标准的js代码加html代码。

原理

使用 ktemplate 语法的模板,会通过模板引擎的编译,转变成一个js函数,函数包含一个参数 _data。调用该函数,传入数据,返回的是拼凑好的html代码。

例如:

<div id="test">
    hi, <%= hi %><br>
    <a href="javascript:void(0)"><%= hello %></a>
</div>

经过编译,会生成方法:

function anonymous(_data) {
    var htmlCode = "";
    with (_data || {}) {
        htmlCode += '<div id="test">\r\n    hi, ';
        htmlCode += hi;
        htmlCode += '<br>\r\n    <a href="javascript:void(0)">';
        htmlCode += hello;
        htmlCode += "</a>\r\n</div>";
    }
    return htmlCode;
}

所以,最终使用的只是js方法,性能问题不需要考虑。

语法

输出

输出标示符会将<%= %>内的正规的js的值,输出到其所在的位置。

<div>
<%= _data.content %>
</div>

如果以上 _data.content = "hello ktemplate"; 那么,最终的结果将是:

<div>
hello ktemplate
</div>

js语句

<% %>内可以写任何符合的 js 语句,例如:

<%var a =3; %>
<%var b=4; %>
<%= a+b %>

最终会输出7.

需要注意的是,每行必须有闭合符号 %>。

子模板

ktemplate 比其他模板还有一个优势,就是支持子模板。 子模板可以保证一个逻辑相关的模板不会太大,以至于很难维护。语法是:<%== url(data) %>。

url 代表子模板的相对地址,data是指传给子模板内的数据。

例如,调用模板的时候,数据如下:

{
 "head":"这是一个实例",
  "content":{
     "name":"子模板的数据"
   }
}

你建了两个ktemplate模板 a.html

<%= _data.content.name %>

b.html

<%= head %>
<%== ./a(_data.content) %>

其中,b.html 中引用了 a.html 模板,并且将数据的 content属性传给了子模板。最终渲染结果:

这是一个实例
子模板的数据

数据

在 ktemplate 中,为了在写模板的时候省去写 _data 等参数的麻烦,在编译过程中,加入了with(_data){...}。

优点是可以在套模板的时候省略_data,缺点是with会在运行时添加一层作用域。

Contributors

authors : KnightWu