简单,高效,支持预编译、子模板、sourcemap 调试的js模板引擎
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
lib
test
.gitignore
.npmignore
Readme.md
index.js
package.json

Readme.md

简介

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