2011-12-15 19:35 湯姆大叔閱讀(10686) 評論(14) 收藏舉報

有時候，我們不需要太牛逼太強大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我們只是需要在簡單的模板里綁定一些非常簡單的字段，本文將使用非常簡單的技巧來幫你實現這個小功能。

首先我們先來定義我們需要的模板，在id為template的script塊里：

<!doctype html>
<html>
<head>
   <meta charset=utf-8>
   <title>Simple Templating</title>
</head>
<body>
 
  <div class="result"></div>
 
  <script type="template" id="template">
    <h2>
      <a href="{{href}}">
        {{title}}
      </a>
    </h2>
    <img src="{{imgSrc}}" alt="{{title}}">
  </script>
 
</body>
</html>

然后，我們需要通過Ajax等其它方式獲取所需要的數據，這里為了展示方便，我們使用了自己定義的數組：

  var data = [
    {
      title: "Knockout應用開發指南",
      href: "http://www.rzrgm.cn/TomXu/archive/2011/11/21/2257154.html",
      imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_knockout2.jpg"
    },
    {
      title: "微軟ASP.NET站點部署指南",
      href: "http://www.rzrgm.cn/TomXu/archive/2011/11/25/2263050.html",
      imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg"
    },
    {
      title: "HTML5學習筆記簡明版",
      href: "http://www.rzrgm.cn/TomXu/archive/2011/12/06/2277499.html",
      imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png"
    }
  ],

我們有2種方式來綁定這些數據到模板上，第一種是非常簡單的hardcode方法，第二種是自動識別變量式的。

我們先來看第一種方式，是通過替換花括號里的值為data里所對應的值來達到目的：

template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
i = 0, len = data.length,
fragment = '';
 
for ( ; i < len; i++ ) {
    fragment += template
      .replace( /\{\{title\}\}/, data[i].title )
      .replace( /\{\{href\}\}/, data[i].href )
      .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
}
 
result.innerHTML = fragment;

運行效果：http://jsfiddle.net/TomXu/3GKw2/

第二種方式比較靈活，是通過正則表達式來替換所有花括號的值，而無需一個一個替換，這樣相對來說比較靈活，但是要注意模板標簽可能在數據里不存在的情況：

template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
attachTemplateToData;
 
// 將模板和數據作為參數，通過數據里所有的項將值替換到模板的標簽上（注意不是遍歷模板標簽，因為標簽可能不在數據里存在）。
attachTemplateToData = function(template, data) {
        var i = 0,
            len = data.length,
            fragment = '';
 
        // 遍歷數據集合里的每一個項，做相應的替換
        function replace(obj) {
            var t, key, reg;
 　　　　　　
　　　　　　　//遍歷該數據項下所有的屬性，將該屬性作為key值來查找標簽，然后替換
            for (key in obj) {
                reg = new RegExp('{{' + key + '}}', 'ig');
                t = (t || template).replace(reg, obj[key]);
            }
 
            return t;
        }
 
        for (; i < len; i++) {
            fragment += replace(data[i]);
        }
 
        return fragment;
    };
 
result.innerHTML = attachTemplateToData(template, data);

運行效果：http://jsfiddle.net/TomXu/HjSLf/

這樣，我們就可以做到，無限制定義自己的標簽和item屬性了，而無需修改JS代碼。

更多關于模板引擎的信息，你可以訪問如下2個地址，這2個引擎都不錯哦。

HandleBars.js
Mustache.js

參考原文：http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/

同步與結束語

本文已同步至目錄索引：《大叔手記全集》
大叔手記：旨在記錄日常工作中的各種小技巧與資料（包括但不限于技術），如對你有用，請推薦一把，給大叔寫作的動力

刷新頁面返回頂部

湯姆大叔的博客

大叔手記（7）：構建自己的JavaScript模板小引擎

同步與結束語

About