详细介绍参考 http://ejohn.org/blog/javascript-micro-templating/，这个模板引擎写得短小精悍，非常值得一看
1. [代码]tmpl.js
01 |
// Simple JavaScript Templating |
02 |
// John Resig - http://ejohn.org/ - MIT Licensed |
03 |
(function() {
|
04 |
var cache = {};
|
05 |
06 |
this.tmpl = function tmpl(str, data) {
|
07 |
|
08 |
// Figure out if we‘re getting a template, or if we need to
|
09 |
// load the template - and be sure to cache the result.
|
10 |
var fn =
|
11 |
!/\W/.test(str)
|
12 |
?
|
13 |
cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML)
|
14 |
:
|
15 |
// Generate a reusable function that will serve as a template
|
16 |
// generator (and which will be cached).
|
17 |
new Function(
|
18 |
"obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +
|
19 |
|
20 |
// Introduce the data as local variables using with(){}
|
21 |
"with(obj){p.push(‘" +
|
22 |
|
23 |
// Convert the template into pure JavaScript
|
24 |
str
|
25 |
.replace(/[\r\t\n]/g, " ")
|
26 |
.split("<%").join("\t")
|
27 |
.replace(/((^|%>)[^\t]*)‘/g, "$1\r")
|
28 |
.replace(/\t=(.*?)%>/g, "‘,$1,‘")
|
29 |
.split("\t")
|
30 |
.join("‘);")
|
31 |
.split("%>")
|
32 |
.join("p.push(‘")
|
33 |
.split("\r")
|
34 |
.join("\\‘") +
|
35 |
"‘);}return p.join(‘‘);"
|
36 |
); // Function ends
|
37 |
38 |
// Provide some basic currying to the user
|
39 |
return data ? fn(data) : fn;
|
40 |
};
|
41 |
})(); |
2. [代码]index.html 跳至 [1] [2] [全屏预览]
01 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
02 |
"http://www.w3.org/TR/html4/loose.dtd">
|
03 |
<html xmlns="http://www.w3.org/1999/xhtml">
|
04 |
<head>
|
05 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
06 |
<title>JavaScript tmpl Use Demo</title>
|
07 |
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
08 |
<script src="./tmpl.js" type="text/javascript"></script>
|
09 |
<!-- 下面是模板user_tmpl -->
|
10 |
<script type="text/html" id="user_tmpl">
|
11 |
<% for ( var i = 0; i < users.length; i++ ) { %>
|
12 |
<li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
|
13 |
<% } %>
|
14 |
</script>
|
15 |
<script type="text/javascript">
|
16 |
// 用来填充模板的数据
|
17 |
var users = [
|
18 |
{ url: "http://baidu.com", name: "jxq"},
|
19 |
{ url: "http://google.com", name: "william"}
|
20 |
];
|
21 |
|
22 |
$(function() {
|
23 |
// 调用模板引擎函数将数据填充到模板获得最终内容
|
24 |
$("#myUl").html(tmpl("user_tmpl", users));
|
25 |
});
|
26 |
</script>
|
27 |
</head>
|
28 |
<body>
|
29 |
<div>
|
30 |
<ul id="myUl">
|
31 |
</ul>
|
32 |
</div>
|
33 |
</body>
|
34 |
</html> |