jqoteplus
jqoteplus 是一个易用高效的JavaScript模板(client-side templating)
基于jQote2,根据天朝特殊环境针对ie进行了优化并简化了接口。
出于性能考虑加入了预编译工具,将模板转换静态的js文件。
快速上手
引用jQuery,jquteplus
模板定义
模板的逻辑语法基于tag定义,默认是%
,一共两种定义方式<%
%>
和<%=
%>
。
在<%
和%>
之间执行任意的JavaScript代码,<%=
则表示输出=
第一个语句的内容。其他内容不做解析直接输出
在任意你可以获取到的容器上编写你的模板。
渲染
html节点:
Javascript:
var data = title: 'Demo' name: 'Len' title: 'Demo2' ; var html = ; ;
结果:
Demo hello, Len Demo2 hello, World
进阶
你也可以将模板定义在js中或者动态加载的结果中,再进行模板的编译调用。重复调用使用$.jqote(template, data)
的效率会比$(template).jqote(data);
好
var template = '<div>whos u <%=this.name%></div>'; var data = name: 'daddy' ; var html = $; ;
jqoteplus是前端模板,所以你也可以嵌套调用模板
var template = 'jqoteplus is <%=this.name%> !<%=$("#demo").jqote(this.content);%>'; var data = name: 'amazing' content: title: 'Demo' name: 'Len' ; var html = $; ;
API快速上手
预览
$ $ $ $
$.jqote(template, data[, tag])
编译并且执行模板方法。返回执行结果(String)
Demo:
var template = "<h1><%=this.title%></h1>" + "<div>hello, <%=this.name || 'World'%></div>"; var data = title: 'Demo' name: 'Len' ; var html = $; ;
$.jqotec(template[, tag])
编译jqoteplus方法,返回编译后的方法
Demo:
var template = "<h1><%=this.title%></h1>" + "<div>hello, <%=this.name || 'World'%></div>"; var lambda = $;
$.jqotefn(template)
jqoteplus使用 $.jqotecache
缓存已经编译的结果,这个方法可以获取缓存中的模板函数,没有编译过返回false
Demo:
var template = "<h1><%=this.title%></h1>" + "<div>hello, <%=this.name || 'World'%></div>"; var data = title: 'Demo' name: 'Len' ; var html = $; $;
$.jqotetag(tag)
设置模板编译的tag,默认tag为%
。
Demo:
$;
预编译
jqoteplus预编译是基于Grunt的一个工具,jqoteplus-build
编译后根据模板的id,可以直接调用模板。
$;
License
jqoteplus.js is available under the terms of the MIT License.