java调用js模板引擎_JavaScript模板引擎用法实例

本文实例讲述了JavaScript模板引擎用法。分享给大家供大家参考。具体如下：

这里介绍的这个模板引擎写得短小精悍，非常值得一看

tmpl.js文件如下：

// Simple JavaScript Templating

// 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("

.replace(/((^|%>)[^\t]*)'/g, "$1\r")

.replace(/\t=(.*?)%>/g, "',$1,'")

.split("\t")

.join("');")

.split("%>")

.join("p.push('")

.split("\r")

.join("\\'") +

"');}return p.join('');"

); // Function ends

// Provide some basic currying to the user

return data ? fn(data) : fn;

};

})();

index.html文件如下：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

JavaScript tmpl Use Demo

// 用来填充模板的数据

var users = [

{ url: "http://baidu.com", name: "jxq"},

{ url: "http://google.com", name: "william"}

];

$(function() {

// 调用模板引擎函数将数据填充到模板获得最终内容

$("#myUl").html(tmpl("user_tmpl", users));

});

希望本文所述对大家的javascript程序设计有所帮助。