现有的模板解决方案
现在已经有了许多JavaScript的解决方案模板，从这方面说，标准化的模板解决方案必然是大势所趋。在本节中，我们向你简要描述四个最流行最有趣的模板。现有的模板解决方案能解决什么？那些特色在jQuery核心中有意义。

微模板

John Resig的微型模板引擎非常小（未压缩仅2KB）。然而，这点小小的代码已经抓到了渲染一个模板的核心功能。

下面是一个用微模板引擎显示单个JavaScript产品对象的例子。

<script src="../jquery-1.4.1.js" type="text/javascript">>;/script>;
<script src="MicroTemplating.js" type="text/javascript">;</script>;
<script type="text/javascript">;
    var product = { name: "Laptop", price: 788.67 };
    $(showProduct);
    function showProduct() {
        $("#results").html( tmpl("productTemplate", product) );
    }
    function formatPrice(price) {
        return "$" + price;
    }
</script>;

tmpl()方法用来从一个product模板和product对象生成一个字符串。其结果分配给一个名叫results的div元素的innerHTML。

product模板在页面body的SCRIPT中定义。

<script type="text/html" id="productTemplate">
    Product Name: <%= name %>
    <br />
    Product Price: <%= formatPrice(price) %>
</script>
<div id="results"></div>

注意，SCRIPT的type属性为“text/ html”。用这种方式来声明web浏览器会忽略SCRIPT里的内容，将其内容当作字符串来对待。

注意，模板包含代表产品名称和价格属性的表达式。调用JavaScript的formatPrice（）方法来格式化产品的价格。在模板里你可以调用任何JavaScript函数。

这里是如何渲染一个product对象数组的示例：

function showProducts() {
    // parse the template
    var template = tmpl("productTemplate");
    // loop through the products
    var results = '';
    for (var i = 0; i < products.length; i++) {
        results += template(products[i]);
    }
    // show the results
    $("#results").html(results);
}

tmpl()函数支持currying(关于什么currying，可以在网上查阅资料)。如果没有提供数据给tmpl()函数，他将返回一个javascript函数，代表解析的模板。

在上面的代码中，模板被解析，然后为每一个product调用模板方法生成一个字符串。最后，字符串分配给名叫results的div元素的innerHTML。
jTemplates

jTemplates是一个功能丰富的模板引擎，它作为一个jQuery插件来执行。jTemplates支持很多先进的功能，包括：

外部模板－－您可以通过提供的URL从外部文件加载模板，外部文件可以包含多个模板；
外部数据－－您可以从外部URL加载数据；
实时刷新－－你可以自动定期的更新模板内容；
HTML编码－－你可以阻止诸如<和>的编码字符对JavaScript插入的攻击；
Includes－－您可以在一个模板中包含另一个模板；
调试模式－－您可以在出错的地方终止模板引擎，并显示错误信息。
下面示例中的代码演示了如何使用jTemplates显示产品清单。

<script src="../jquery-1.4.1.js" type="text/javascript"></script>
<script src="jquery-jtemplates_uncompressed.js" type="text/javascript"></script>
<script type="text/javascript">
    var data = {
        products: [
            { name: "Laptop", price: 788.67 },
            { name: "Comb", price: 2.50 },
            { name: "Pencil", price: 1.99 }
        ]};
    $(showProducts);
    function showProducts() {
        // attach the template
        $("#results").setTemplateElement("template");
        // process the template
        $("#results").processTemplate(data);
    }
    function formatPrice(price) {
        return "$" + price;
    }
</script>

setTemplateElement()方法给HTML元素指定一个模板，processTemplate()方法使用所提供的数据处理模板。

上面的代码中，加载的模板为名为textarea的元素，下面就是模板在页面主体中呈现的外观。

<textarea id="template" style="display:none">
    {#foreach $T.products as product}
    <div>
        Product Name: {$T.product.name}
        <br />
        Product Price: {formatPrice($T.product.price)}
    </div>
    {#/for}
</textarea>

注意，一个jTemplate模板可以包含诸如#foreach、#for、and #if的特殊命令。至于调用formatPrice()函数，它表明模板也可以包含任意JavaScript函数的调用。