现有的模板解决方案

现在已经有了许多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。

出处：Denis'Blog
责任编辑：moby

上一页 jQuery模板提案 [1] 下一页 jQuery模板提案 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。