JavaScript 微型模板引擎

时间：2010-8-11 作者：smarteng 分类： WEB相关

// 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("<%").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;

};

})();[break]

------------------------------------------------------------------------

用法:

<html>

<head>

这里包含这个JavaScript 模板引擎

</head>

<body>

<div><b>example 1:</b></div>

<% for ( var i = 0; i < users.length; i++ ) { %>

<% } %>

</script>

var users = new Array(2);

users[0] = {url:"http://www.baidu.com", name:"baidu"};

users[1] = {url:"http://www.google.com/hk/", name:"google"};

var results = document.getElementById("show");

results.innerHTML =tmpl("user_tmpl", users);

</script>

<div><b>example 2:</b></div>

<div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">

</div>

</div>

</script>

var items = {"id":1, "i":2, "profile_image_url":"http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", "from_user":"http://www.google.com.hk", "text":"google"};

var result_item = document.getElementById("result_item");

result_item.innerHTML = tmpl("item_tmpl", items);

</script>

this is a script template test

</body>

</html>

短小精悍，灰常不错！~

上一篇:CSS兼容IE/Firefox 下一篇:使用PHP Header要注意的几个问题