Atitit.模板引擎原理以及常見模板技術javascript
1.1. 模板引擎基本原理1html
3. 支持兩種類型的錯誤捕獲,一是渲染錯誤(Render Error)與編譯錯誤(Syntax Error)。2程序員
3.1. 一、渲染錯誤2正則表達式
雖然每一個引擎從模板語法、語法解析、變量賦值、字符串拼接的實現方式各有所不一樣,但關鍵的渲染原理仍然是動態執行 javascript 字符串。jsp
, Discuz的模板解析是用正則表達式替換一些模板中的規定的語言標記,而後呢,寫到forumdata/templates中,再用include引用到index, forumdisplay等等中,和smarty的原理基本上相同
那麼,這個聯合頁面listnews.php的代碼就很簡單了
<?
Include(‘getnews.php');//獲取數據
Include(‘shownesw.php');//顯示數據
?>
做者:: ★(attilax)>>> 綽號:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ) 漢字名:艾龍, EMAIL:1466519819@qq.com
轉載請註明來源: http://blog.csdn.net/attilax
總結
使用PHP標籤的模板系統,可以很好的實現美工和程序的分離,同時方便程序員和美工人員的分工合做,好比在上面的例子中shownews.php由美工人員來維護,getnews.php由程序人員來維護。而listnews.php就能夠由系統設計人員來維護了。固然這中間須要增長一些約定的文檔。
最簡單的方式就是經過replace函數了:
前端模板引擎不像後端模板引擎,它是動態解析,因此調試器沒法定位到錯誤行號,而 artTemplate 經過巧妙的方式讓模板調試器能夠精肯定位到引起渲染錯誤的模板語句,例如:
經過splitor 《%%》區分代碼和模板,而後把木板str out,在不個代碼eval給掛。。
渲染錯誤通常是由於模板數據錯誤或者變量錯誤產生的,渲染的時候只有遇到錯誤纔會進入調試模式從新編譯模板,而不會影響正常的模板執行效率。模板編譯器根據模板換行符記錄行號,編譯後的函數相似:
當執行過程遇到錯誤,立馬拋出異常模板對應的行號,模板調試器再根據行號反查模板對應的語句並打印到控制檯。
編譯錯誤通常是模板語法錯誤,如不合格的套嵌、未知語法等。因爲 artTemplate 沒有進行完整的詞法分析,故沒法肯定錯誤源所在的位置,只能對錯誤信息與源碼進行原文輸出,供開發者判斷。
for($i = 0; $i < $nest; $i++) {<br> |
070 |
|
071 |
$template = preg_replace("/[\n\r\t]*\{loop\s+(\S+)\s+(\S+)\}[\n\r]*(.+?)[\n\r]*\{\/loop\}[\n\r\t]*/ies","stripvtags('\n<? if(is_array(\\1)) { foreach(\\1 as \\2) { ?>','\n\\3\n<? } } ?>\n')", $template);<br> |
072 |
|
073 |
$template = preg_replace("/[\n\r\t]*\{loop\s+(\S+)\s+(\S+)\s+(\S+)\}[\n\r\t]*(.+?)[\n\r\t]*\{\/loop\}[\n\r\t]*/ies","stripvtags('\n<? if(is_array(\\1)) { foreach(\\1 as \\2 => \\3) { ?>','\n\\4\n<? } } ?>\n')", $template);<br> |
074 |
|
075 |
$template = preg_replace("/[\n\r\t]*\{if\s+(.+?)\}[\n\r]*(.+?)[\n\r]*\{\/if\}[\n\r\t]*/ies", "stripvtags('\n<? if(\\1) { ?>','\n\\2\n<? } ?>\n')" |
微軟已經有一套模板引擎T4,在設計ASP.NET MVC 3時又設計一套模板引擎Razor
2.裝入數組
var r = [];
r.push('Posts: ' );
r.push(for(var i = 0; i < post.length; i++) {);
r.push('<a href="#">');
r.push(post[i].exper);
r.push('</a>');
r.push(});
有人看到上面的代碼就要笑了,第三行和最後一行代碼的邏輯明顯是不正確的嘛,那腫麼辦呢?呵呵,很簡單,不放進去就好了唄,
var r = [];
r.push('Posts: ' );
for(var i = 0; i < post.length; i++) {
r.push('<a href="#">');
r.push(post[i].exper);
r.push('</a>');
}
這樣的邏輯就十分完善了,不存在太多的漏洞,可是這個轉化的過程是如何實現的?咱們必須仍是要寫一個解析的模板函數出來。
不過咱們並須要for,if,switch等這些東西也push到r數組中去,因此呢,還得改善下上面的代碼,若是在line中發現了包含js邏輯的代碼,咱們就不該該讓他進門:
regOut = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;
var add = function(line, js) {
js? code += line.match(regOut) ? line + '\n' : 'r.push(' + line + ');\n' :
code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
};
因此咱們只剩下最後一步工做了,把data扔進去!
參考
JavaScript模板引擎原理,幾行代碼的事兒 - Javascript教程_JS教程_技術文章 - 紅黑聯盟.html