简介
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