一、前言
什麼是模板引擎，說的簡單點，就是乙個字串中有幾個變數待定。比如：
var tpl = 'hei, my name is <%name%>, and i\'m <%age%> years old.';
通過模板引擎函式把資料塞進去，
var data = ;
var result = tplengine(tpl, data);
//hei, my name is barret lee, and i'm 20 years old.
那這玩意兒有什麼作用呢？其實他就是乙個預處理器（preprocessor），搞php開發的童鞋對smarty必然是十分熟悉，smarty是乙個php模板引擎，tpl中待處理的字元通過資料匹配然後輸出相應的html**，加之比較給力的快取技術，其速度和易用性是非常給力的！js template也是一樣的，我們的資料庫裡儲存著數以千萬計的資料，而每一條資料都是通過同一種方式輸入，就拿上面的例子來說，我們不可能在資料庫裡存幾千條"hei, my name..."，而是只儲存對應的name和age，通過模板輸出結果。
js模板引擎應該做哪些事情？看看下面一串**：
var tpl = '<% for(var i = 0; i < this.posts.length; i++) else %>' +
'<% } %>';
乙個基本的模板引擎至少可以保證上面的**可以正常解析。如送入的資料是：
var data = ,,,]
}; 可以輸出：
content 1 at yesterday
content 2 at today
content 3 at tomorrow
post is null
先戳這個demo看看。
下面就具體說說這個模板引擎的原理是啥樣的。
二、js模板引擎的實現原理
1.正則摳出要匹配的內容
針對這一串**，通過正則獲取內容
var tpl = 'hei, my name is <%name%>, and i\'m <%age%> years old.';
var data = ;
最簡單的方式就是通過replace函式了：
var result = tpl.replace(/<%([^%>]+)?%>/g, function(s0, s1));
通過正則替換，我們很輕鬆的拿到了result，你可以去試一試，他正式我們想要的結果。但是這裡又有了乙個問題，改一下data和tpl，
var tpl = 'hei, my name is <%name%>, and i\'m <%info.age%> years old.';
var data =
}; 再用上面的方式去獲取結果，呵呵，不行了吧~ 這裡data["info.age"]本身就是undefined，所以我們需要換一種方式來處理這個問題，那就是將它轉換成真正的js**。如：
return 'hei, my name is ' + data.name + ', and i\'m ' + data.info.age' + ' years old.'
但是接著又有乙個問題來了，當我們的**中出現for迴圈和if的時候，上面的轉換明顯是不起作用的，如：
var tpl = 'posts: ' +
'<% for(var i = 0; i < post.length; i++) %>'
如果繼續採用上面的方式，得到的結果便是：
return 'posts: ' +
for(var i = 0; i < post.length; i++)
這顯然不是我們原因看到的，稍微觀察一下上面的結構，如果可以返回乙個這樣的結果也挺不錯哦：
'posts: '
for(var i = 0; i < post.length; i++)
但是我們需要得到的是乙個字串，而不是上面這樣零散的片段，因此可以把這些東西裝入陣列中。
2.裝入陣列
var r = ;
r.push('posts: ' );
r.push(for(var i = 0; i < post.length; i++) );
有人看到上面的**就要笑了，第三行和最後一行**的邏輯明顯是不正確的嘛，那腫麼辦呢？呵呵，很簡單，不放進去就行了唄，
var r = ;
r.push('posts: ' );
for(var i = 0; i < post.length; i++)
這樣的邏輯就十分完善了，不存在太多的
漏洞，但是這個轉化的過程是如何實現的？我們必須還是要寫乙個解析的模板函式出來。
3.分辨js邏輯部分
var r = ;
tpl.replace(/<%([^%>]+)?%>/g, function(s0, s1));
完蛋了，這裡貌似又要回到上面那可笑的邏輯有錯誤的一步啦... 該怎麼處理比較好？我們知道，js給我們提供了建構函式的「類」，
var fn = new function("data",
"var r = ; for(var i in data) return r.join(' ')");
fn(); // barretlee 20
知道了這個就好辦了，我們可以把邏輯部分和非邏輯部分的**鏈結成乙個字串，然後利用類似fn的函式直接編譯**。而/<%([^%>]+)?%>/g，這乙個正則只能把邏輯部分匹配出來，要想把所有的**都組合到一起，必須還得匹配非邏輯部分**。replace函式雖然很強大，他也可以完成這個任務，但是實現的邏輯比較晦澀，所以我們換另外一種方式來處理。
先看乙個簡單的例子：
var reg = /<%([^%>]+)?%>/g;
var tpl = 'hei, my name is <%name%>, and i\'m <%age%> years old.';
var match = reg.exec(tpl);
console.log(match);
看到的是：
[ 0: "<%name%>",
1: name,
index: 16,
input: "hei, my name is <%name%>, and i'm <%age%> years old."
length: 2
] 這。。。我們可是想得到所有的匹配啊，他竟然只獲取了name而忽略了後面的age，好吧，對正則稍微熟悉點的童鞋一定會知道應該這樣處理：
var reg = /<%([^%>]+)?%>/g;
while(match = reg.exec(tpl))
關於正規表示式的內容就不在這裡細說了，有興趣的同學可以多去了解下match,exec,search等正則的相關函式。這裡主要是靠match的index屬性來定位遍歷位置，然後利用while迴圈獲取所有的內容。
4.引擎函式
所以我們的引擎函式雛形差不多就出來了：
var tplengine = function(tpl, data);
while(match = reg.exec(tpl))
add(tpl.substr(cursor, tpl.length - cursor)); //**的最後一截 如:" years old."
code += 'return r.join("");'; // 返回結果，在這裡我們就拿到了裝入陣列後的**
console.log(code);
return tpl;
}; 這樣一來，測試乙個小demo:
var tpl = '<% for(var i = 0; i < this.posts.length; i++) else %>' +
'<% } %>';
tplengine(tpl, data);
返回的結果讓人很滿意：
var r=;
r.push("");
r.push(" for(var i = 0; i < this.posts.length; i++) else ");
r.push("");
r.push(" } ");
r.push("");
return r.join("");
不過我們並需要for，if，switch等這些東西也push到r陣列中去，所以呢，還得改善下上面的**，如果在line中發現了包含js邏輯的**，我們就不應該讓他進門：
regout = /(^( )?(if|for|else|switch|case|break|))(.*)?/g;
var add = function(line, js) ;
所以我們只剩下最後一步工作了，把data扔進去！
5.把data扔進去
沒有比完成這東西更簡單的事情啦，通過上面對function這個函式的講解，大家應該也知道怎麼做了。
把回車換行以及tab鍵都給匹配掉，讓**更加乾淨一點。那麼最終的**就是：
var tplengine = function(tpl, data) ))(.*)?/g,
code = 'var r=;\n',
cursor = 0;
var add = function(line, js)
while(match = reg.exec(tpl))
add(tpl.substr(cursor, tpl.length - cursor));
code += 'return r.join("");';
JavaScript 模板引擎
做的乙個模板引擎繫結json資料的乙個模板引擎，小巧便捷，簡單易懂，適合json小資料 編號 星期次數 營銷型別 操作 function temp json,id g innerhtmls innerhtmls.replace replace,value html innerhtmls doc.in...
手寫JavaScript模板引擎
這次的模板是類似下面這樣的 var str 今天是 天氣 我今天的計畫是,var reg g console.log str.match reg 上面的是通過正則進行匹配到的，很明顯匹配到了 這樣子的，w是匹配單詞，但是下面的模板就沒辦法都匹配了 var str 今天是 天氣 我今天的計畫是,var...
JavaScript筆記5 模板引擎
我們通常會遇到這樣一種情況，在寫前台頁面 html jsp等 時需要動態顯示div等頁面元素。比如下面的例子 當變數content是字串型別時，將資訊顯示到頁面上。我們可以用模板引擎來解析並填充這個模板，最後返回給我們最終想要的結果。網路上有很多比較好用的模板引擎，他們雖然有自己的模板語法，但是萬變...