本文實(shí)例講述了JavaScript模板引擎原理與用法。分享給大家供大家參考，具體如下：

一、前言

什么是模板引擎，說的簡(jiǎn)單點(diǎn)，就是一個(gè)字符串中有幾個(gè)變量待定。比如：

var tpl = 'Hei, my name is <%name%>, and I/'m <%age%> years old.';

通過模板引擎函數(shù)把數(shù)據(jù)塞進(jìn)去，

var data = {  "name": "Barret Lee",  "age": "20"};var result = tplEngine(tpl, data);//Hei, my name is Barret Lee, and I'm 20 years old.

那這玩意兒有什么作用呢？其實(shí)他就是一個(gè)預(yù)處理器（preprocessor），搞php開發(fā)的童鞋對(duì)Smarty必然是十分熟悉，Smarty是一個(gè)php模板引擎，tpl中待處理的字符通過數(shù)據(jù)匹配然后輸出相應(yīng)的html代碼，加之比較給力的緩存技術(shù)，其速度和易用性是非常給力的！JS Template也是一樣的，我們的數(shù)據(jù)庫(kù)里保存著數(shù)以千萬(wàn)計(jì)的數(shù)據(jù)，而每一條數(shù)據(jù)都是通過同一種方式輸入，就拿上面的例子來說，我們不可能在數(shù)據(jù)庫(kù)里存幾千條"Hei, my name..."，而是只保存對(duì)應(yīng)的name和age，通過模板輸出結(jié)果。

JS模板引擎應(yīng)該做哪些事情？看看下面一串代碼：

var tpl = '<% for(var i = 0; i < this.posts.length; i++) {' +　  'var post = posts[i]; %>' +  '<% if(!post.expert){ %>' +    '<span>post is null</span>' +  '<% } else { %>' +    '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><% post.expert %> at <% post.time %></a>' +  '<% } %>' +'<% } %>';

一個(gè)基本的模板引擎至少可以保證上面的代碼可以正常解析。如送入的數(shù)據(jù)是：

var data = {  "posts": [{    "expert": "content 1",    "time": "yesterday"  },{    "expert": "content 2",    "time": "today"  },{    "expert": "content 3",    "time": "tomorrow"  },{    "expert": "",    "time": "eee"  }]};

可以輸出：

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >content 1 at yesterday</a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >content 2 at today</a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >content 3 at tomorrow</a><span>post is null</span>