现在的web开发用到javascript越来与多,其中jquery已经是事实上最流行的javascript library了
经常我们会使用javascipt来操作 dom/html 例如 html="<a href='#'>test </a>";
不过这样的代码难以维护和阅读
JQuery1.4.3 以及以上的版本已经支持了template engine的功能 (当然,还有很多第三方的实现,例如microsoft template engine, 不过我还是喜欢build-in的功能,,不要额外下载js文件 不用担心兼容性的问题)
说了这么多,还是尽快给一个demo让大家对template engine有一个快速的印象吧
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<ul id="movieList">
</ul>
<script>
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976"}];
$("#movieTemplate").tmpl(movies).appendTo("#movieList");
</script>
</body>
</html>
1. 定义一个template ， 如上代码中 id="movieTemplate" 所示
2. 使用数据 movies 借由模板生成最终的html 然后
3. 将html附加到元素movieList内
代码简洁优雅， 不需要拼字符串，样式和逻辑分割的比较彻底