I've had a little utility that I've been kicking around for some time now that I've found to be quite useful in my JavaScript application-building endeavors. It's a super-simple templating function that is fast, caches quickly, and is easy to use. I have a couple tricks that I use to make it real fun to mess with.
Here's the source code to the templating function (a more-refined version of this code will be in my upcoming book Secrets of the JavaScript Ninja ):
// John Resig - http://ejohn.org/ - MIT Licensed
( function ( ) {
var cache = { } ;
this .tmpl = function tmpl( str, data) {
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/ .test ( str) ?
cache[ str] = cache[ str] ||
tmpl( document.getElementById ( str) .innerHTML ) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function ( "obj" ,
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
str
.replace ( /[ \r\t\n] /g , " " )
.split ( "<%" ) .join ( "\t " )
.replace ( /( ( ^|%>) [ ^\t] *) '/g, "$1\r ")
.replace(/\t =(.*?)%>/g, "' ,$1 ,'")
.split("\t ").join("' ) ;")
.split(" %>").join(" p.push ( '")
.split("\r ").join("\\ ' ")
+ " ');}return p.join(' ');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();
You would use it against templates written like this (it doesn't have to be in this particular manner - but it's a style that I enjoy):
<div id ="<%=id%> " class="<%=(i % 2 == 1 ? " even" : " ")%> ">
<div class=" grid_1 alpha right">
<img class=" righted" src=" <%=profile_image_url%> "/>
</div>
<div class ="grid_6 omega contents" >
<p> <b> <a href ="/<%=from_user%> "><%=from_user%> </a> :</b> <%=text%> </p>
</div>
</div>
</script>
You can also inline script:
Quick tip: Embedding scripts in your page that have a unknown content-type (such is the case here - the browser doesn't know how to execute a text/html script) are simply ignored by the browser - and by search engines and screenreaders. It's a perfect cloaking device for sneaking templates into your page. I like to use this technique for quick-and-dirty cases where I just need a little template or two on the page and want something light and fast.
and you would use it from script like so:
results.innerHTML = tmpl( "item_tmpl" , dataObject) ;
You could pre-compile the results for later use. If you call the templating function with only an ID (or a template code) then it'll return a pre-compiled function that you can execute later:
for ( var i = 0 ; i < users.length ; i++ ) {
html += show_user( users[ i] ) ;
}
相关推荐
史上最短小精悍的javascript编写的俄罗斯方块游戏,只用了60行代码,绝对值得学习
史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码
短小精悍的Javascript书籍 掌握了基本够用了。
Tomjson,一个"短小精悍"的 json 解析库,tomjson使用Java语言编写,主要作用是把Java对象(JavaBean)序列化为json格式字符串,将json格式字符串序列化为相对应的Java对象(JavaBean)。项目地址:...
C/C++超实用的代码算法,代码虽然不长却很能体现思想
支持复制到剪贴板或直接打印, 可以为用户节省大量不贵的时间和繁琐的操作,是一个检索、转换复杂数据并将其转换为其他格式的方法,想知道数据提取软件有哪些吗,威航软件园推荐大家试试短小精悍的Text Template ...
本书是XMPP高级编程:使用JavaScript和jQuery书籍的英文版。如果你不想敲代码的话可以下载该资料。xmpp协议扩展易用,就是协议体用于通信的时候没有protocolBuffer短小精悍,但个人认为xmpp的应用空间较大,可转为 ...
短小精悍的PDF阅读工具 短小精悍的PDF阅读工具 短小精悍的PDF阅读工具
JavaScript拖拽实现(附注释),最经典!最简单!短小精悍!
C语言编程宝典 较为精辟的讲述c语言,可谓短小精悍
原生ajax库,实现jsonp跨域,短小精悍。
195KB教程,短小精悍,跟着教程走,花很短的时间成为JavaScript脚本高手。
本人一直用的FTP 简单好用 绿色无毒 推荐需要FTP功能使用此软件
短小精悍的md5计算工具,单文件,随身带。可以校验。
短小精悍的MPEG转换工具,虽然很小,但功能强大,转换速度很快!
短小精悍的PC系统信息监控工具
短小精悍的前端缓存插件,解决前端缓存问题
这里介绍的这个模板引擎写得短小精悍,非常值得一看 tmpl.js文件如下: // Simple JavaScript Templating // John Resig - http://ejohn.org/ - MIT Licensed (function() { var cache = {}; this.tmpl = ...
短小精悍的云风SQL连接器,用于连接SQL服务器!方便快捷!
短小精悍的CSS电子参考书,网站开发人员枕头必备,错不了。