JavaScript模板技术
<html>
<head>
<style type="text/css">
table.user_form {
border-collapse:collapse;
border-top:solid 1px blue; border-left:solid 1px blue;
margin:0; padding:0;
}
table.user_form td {
border-collapse:collapse;
border-bottom:solid 1px blue; border-right:solid 1px blue;
padding:3px;
}
.container { margin:10px; }
ul.#user_list { margin:0; padding:0; }
#user_list li { margin:0; padding:0; }
</style>
<script type="text/javascript">
// Simple JavaScript Templating
// Originally from John Resig - http://ejohn.org/ - MIT Licensed
// Fixed by Neil (in Rick Strahl's blog: http://www.west-wind.com/Weblog/posts/509108.aspx)
// Modified and commented by Richie for clear understanding - http://www.cnblogs.com/RicCC
// Another open issue: javascript code in template can not contain the char: #
(function() {
var cache = {};
this.apply_template = function(template_id, data) {
var fn = cache[template_id];
if (!fn) {
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
var template = document.getElementById(template_id).innerHTML;
fn = new Function("data", "var p=[]; with(data){p.push('" +
// Convert the template into pure JavaScript
template
//remove chars \r, \t and \n from template
.replace(/[\r\t\n]/g, " ")
//replace ' in javascript code (those between <# and #>) with \t
.replace(/'(?=[^#]*#>)/g, "\t")
//replace ' in html code (those outside <# and #>) with \'
//' in javascript code was replaced in previous step
.split("'").join("\\'")
//recovery ' in javascript code
.split("\t").join("'")
//...<#= data[i].name #>... => p.push('...',data[i].name,'...');
.replace(/<#=(.+?)#>/g, "',$1,'")
.split("<#").join("');")
.split("#>").join("p.push('")
+ "');}return p.join('');");
cache[template_id] = fn;
}
return fn(data);
};
})();
//examples
var users = [
{ id: 8901, url: "google.com", name: "Chris", birthday: new Date(1986, 3, 20) },
{ id: 1402, url: "sina.com", name: "Kevin", birthday: new Date(1960, 3, 20) },
{ id: 2129, url: "riccc.cnblogs.com", name: "Richie", birthday: new Date(1979, 9, 10)}];
function show_user_list() {
var container = document.getElementById("user_list");
if (container.innerHTML != "") return;
container.innerHTML = apply_template("template_user_list", users);
}
function show_user_form(id) {
var u;
for (var i = 0; i < users.length; i++)
if (users[i].id == id) {
u = users[i];
break;
}
var container = document.getElementById("user_form");
if (container.id == u.id) return;
container.innerHTML = apply_template("template_user_form", u);
}
</script>
</head>
<body>
<script type="text/html" id="template_user_list">
<#
for ( var i = 0; i < data.length; i++ ) {
var testStr1 = 'test single quote char in javascript code';
#>
<li>
<a href="<#=data[i].url#>#test"><#=data[i].name#></a>,
<input type="button" value="user detail" onclick="show_user_form(<#= data[i].id #>);" />
</li>
<#
}
#>
</script>
<script type="text/html" id="template_user_form">
<table id="u<#=id#>" class="user_form">
<tr>
<td align="right">ID:</td>
<td><#=id#></td>
</tr>
<tr>
<td align="right">Name:</td>
<td style='color:red;font-weight:600;'><#=name#></td>
</tr>
<tr>
<td align="right">Web Page:</td>
<td><#=url#></td>
</tr>
<tr>
<td align="right">Birthday</td>
<td><#=birthday#></td>
</tr>
</table>
</script>
<input type="button" value="show users" onclick="show_user_list();" /><br />
<div class="container">
<p>User Lists:</p>
<ul id="user_list"></ul>
</div>
<div id="user_form" class="container"></div>
</body>
</html>
<head>
<style type="text/css">
table.user_form {
border-collapse:collapse;
border-top:solid 1px blue; border-left:solid 1px blue;
margin:0; padding:0;
}
table.user_form td {
border-collapse:collapse;
border-bottom:solid 1px blue; border-right:solid 1px blue;
padding:3px;
}
.container { margin:10px; }
ul.#user_list { margin:0; padding:0; }
#user_list li { margin:0; padding:0; }
</style>
<script type="text/javascript">
// Simple JavaScript Templating
// Originally from John Resig - http://ejohn.org/ - MIT Licensed
// Fixed by Neil (in Rick Strahl's blog: http://www.west-wind.com/Weblog/posts/509108.aspx)
// Modified and commented by Richie for clear understanding - http://www.cnblogs.com/RicCC
// Another open issue: javascript code in template can not contain the char: #
(function() {
var cache = {};
this.apply_template = function(template_id, data) {
var fn = cache[template_id];
if (!fn) {
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
var template = document.getElementById(template_id).innerHTML;
fn = new Function("data", "var p=[]; with(data){p.push('" +
// Convert the template into pure JavaScript
template
//remove chars \r, \t and \n from template
.replace(/[\r\t\n]/g, " ")
//replace ' in javascript code (those between <# and #>) with \t
.replace(/'(?=[^#]*#>)/g, "\t")
//replace ' in html code (those outside <# and #>) with \'
//' in javascript code was replaced in previous step
.split("'").join("\\'")
//recovery ' in javascript code
.split("\t").join("'")
//...<#= data[i].name #>... => p.push('...',data[i].name,'...');
.replace(/<#=(.+?)#>/g, "',$1,'")
.split("<#").join("');")
.split("#>").join("p.push('")
+ "');}return p.join('');");
cache[template_id] = fn;
}
return fn(data);
};
})();
//examples
var users = [
{ id: 8901, url: "google.com", name: "Chris", birthday: new Date(1986, 3, 20) },
{ id: 1402, url: "sina.com", name: "Kevin", birthday: new Date(1960, 3, 20) },
{ id: 2129, url: "riccc.cnblogs.com", name: "Richie", birthday: new Date(1979, 9, 10)}];
function show_user_list() {
var container = document.getElementById("user_list");
if (container.innerHTML != "") return;
container.innerHTML = apply_template("template_user_list", users);
}
function show_user_form(id) {
var u;
for (var i = 0; i < users.length; i++)
if (users[i].id == id) {
u = users[i];
break;
}
var container = document.getElementById("user_form");
if (container.id == u.id) return;
container.innerHTML = apply_template("template_user_form", u);
}
</script>
</head>
<body>
<script type="text/html" id="template_user_list">
<#
for ( var i = 0; i < data.length; i++ ) {
var testStr1 = 'test single quote char in javascript code';
#>
<li>
<a href="<#=data[i].url#>#test"><#=data[i].name#></a>,
<input type="button" value="user detail" onclick="show_user_form(<#= data[i].id #>);" />
</li>
<#
}
#>
</script>
<script type="text/html" id="template_user_form">
<table id="u<#=id#>" class="user_form">
<tr>
<td align="right">ID:</td>
<td><#=id#></td>
</tr>
<tr>
<td align="right">Name:</td>
<td style='color:red;font-weight:600;'><#=name#></td>
</tr>
<tr>
<td align="right">Web Page:</td>
<td><#=url#></td>
</tr>
<tr>
<td align="right">Birthday</td>
<td><#=birthday#></td>
</tr>
</table>
</script>
<input type="button" value="show users" onclick="show_user_list();" /><br />
<div class="container">
<p>User Lists:</p>
<ul id="user_list"></ul>
</div>
<div id="user_form" class="container"></div>
</body>
</html>
参考：JavaScript Micro-Templating
