首頁 > 開發者 > JavaScript
標籤：javascript
有時候，我們不需要太牛逼太強大的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.cnblogs.com/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.cnblogs.com/TomXu/archive/2011/11/25/2263050.html", imgSrc: "http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg" }, { title: "HTML5學習筆記簡明版", href: "http://www.cnblogs.com/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/
第二種方式比較靈活，是通過Regex來替換所有花括弧的值，而無需一個一個替換，這樣相對來說比較靈活，但是要注意模板標籤可能在資料裡不存在的情況：
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代碼。
著作權聲明：本文為博主http://www.zuiniusn.com原創文章，未經博主允許不得轉載。
構建自己的JavaScript模板小引擎
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
