jQuery Templates 是一个 jQuery 的官方插件，中文叫 jQuery 模板，用途是简化 data to html 操作。说明不如演示，看下例：<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
发现端倪没？有个 script 的 type 居然是 text/x-jquery-tmpl，恩，这就是模板了。
这不是一篇关于 jQuery Templates 介绍文章，更多基础内容可以看官方 API 和黑暗執行緒 blog 的相关文章。
本文想探讨的是对于一个比较复杂的站点，应该如何管理 jQuery 模板。
jQuery 模板有3种储存方式：
- 像上例一样，直接放在 <script type=”text/x-jquery-tmpl”> 中；
- 直接放到 HTML DOM 中隐藏起来；
- 保存在字符串中。
其中3是下下之选，因为保存在字符串中很多字符需要转义、不能换行、难以阅读和修改，有违模板简化 data to html 的初衷，而且如果需要多处代码使用一个模板，会不够灵活。
2会将无意义的模板写入 DOM 中，可能会被搜索引擎抓取，而且还要多一步解除隐藏的操作，不如直接用1。
1也有自身的问题，模板是和特定 js 操作关联在一起的，如果分离两者，后台得判断页面需要输出哪些模板，这多少会增加后台复杂度。当然也可以不做判断直接输出所有模板，这会无谓的增加文件大小，如果模板很多，这样也不可取。
其实可以把模板单独放到一个文件中，需要时才用 ajax 获取然后插入 dom。如果模板很多也可以拆分成多个文件按需加载。这样有2个好处，1是模板不占用 html 的字节，2是像 css 和 js 一样，浏览器可以缓存起来。
然后我们可以写一个简单的插件来管理模板获取。
//jQuery.getTmpl.js by Frully
(function ($) {
var _tmpls = {}; //保存已获取模板的信息 url: deferred
$.getTmpl = function (url) {
var tmpls = _tmpls,
tmpl = tmpls[url];
if (!tmpl) { //如果模板不存在，获取并插入 DOM
tmpls[url] = tmpl = $.get(url).done(function (data) {
$(data).appendTo('body');
});
}
return tmpl; //返回 deferred 对象
};
}(jQuery));
调用方法：
$.getTmpl('temp1.tpl').done(function () { //载入成功时调用
//do something
}).fail(function () { //载入失败时调用
//do something
}).always(function () { //无论成功失败与否都调用（jQuery1.6 新增）
//do something
});
$.when($.getTmpl('temp2.tpl'), $.getTmpl('temp3.tpl')).done(function () {
//当两个模板均载入成功时调用
//do something
});
有几个方法看起来有些奇怪？这是 jQuery 1.5 的新特性 Deferred（其中 .always() 是1.6 新增）。网上有不少相关资料，欲知详细请自行搜索。使用 Deferred 能书写出很优雅的代码，如果你无法使用 jQuery 1.5+，只能修改插件以参数传入回调函数了。
]]>
