jQuery 模板:jQuery Templates Proposal

导言（

Introduction）

这个提案描述了如何在

jQuery 的核心库中增加模板支持。更为特别是，这个提案描述

了一个新的

jQuery 方法－－名叫 render()，该方法可以使你用一段 HTML 代码渲染一个

Javascript　对象和 Javascript 数组作为一个模板。

该提案的目的在于使插件开发者可以利用标准的方法声明和渲染模板。有一个标准的方

法声明和渲染模板对每一个人都很有裨益：
1

插件开发者可以构建丰富的、数据驱动的插件，如

DataGrid 插件。插件开发者可以在

jQuery 的核心库对模板支持的基础上构建插件，这样每一次开发新的插件时，可以避免重
新实施渲染模板代码。
2

插件用户可以利用一个标准的语法声明模板。插件用户每次创建模板时不需学习一种新

的方法，每次都是从使用新的插件开始。

该提案分两个主要部分。第一部分包含现有模板解决方案简要调查，第二部分是我们的

建议，声明和渲染一个模板的方法如何添加到

jQuery 的核心库中。

现有的模板解决方案

现在已经有了许多

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">