JavaScript模版引擎的基本實作方法淺析_基礎知識

模板分離了資料與展現，使得展現的邏輯與效果更容易維護。利用javascript的Function對象，一步一步建構一個極為簡單的模板轉化引擎

範本簡介
模板通常是指嵌入了某種動態程式語言程式碼的文本，資料和模板透過某種形式的結合，可以變化出不同的結果。模板通常用來定義顯示的形式，能夠使得資料展現更為豐富，而且容易維護。例如，下面是一個模板的例子：

<ul>
 <% for(var i in items){ %>
 <li class='<%= items[i].status %>'><%= items[i].text %></li>
 <% } %>
</ul>

如果有以下items資料：

items:[
 { text: 'text1' ,status:'done' },
 { text: 'text2' ,status:'pending' },
 { text: 'text3' ,status:'pending' },
 { text: 'text4' ,status:'processing' }
]

透過某種方式的結合，可以產生下面的Html程式碼：

<ul>
 <li class='done'>text1<li>
 <li class='pending'>text2<li>
 <li class='pending'>text3<li>
 <li class='processing'>text4<li>
</ul>

如果不使用模板，想要達到同樣的效果，即將上面的數據展現成結果的樣子，需要像下面這樣做：

var temp = '<ul>';
for(var i in items){
 temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
}
temp += '</ul>';

可以看出使用模板有以下好處：

簡化了html的書寫
透過程式設計元素（如循環和條件分支），對資料的展現更具控制力的能力
分離了數據與展現，使得展現的邏輯與效果更容易維護
模板引擎
透過分析模板，將資料和模板結合在一起輸出最後的結果的程式稱為模板引擎，模板有很多種，相對應的模板引擎也有很多種。比較古老的模板稱為ERB，在許多的web框架中被採用，例如：ASP.NET 、 Rails … 上面的例子就是ERB的例子。在ERB中兩個核心的概念：evaluate和interpolate。表面上evaluate是指包含在中的部分，interpolate是指包含在中的部分。從模板引擎的角度，evaluate中的部分不會直接輸出到結果中，一般用於製程控制；而interpolate中的部分將直接輸出到結果。

從模板引擎的實作來看，需要依賴程式語言的動態編譯或動態解釋的特性，以簡化實作和提高效能。例如：ASP.NET利用.NET的動態編譯，將模板編譯成動態的類，並利用反射動態執行類別中的程式碼。這種實作其實是比較複雜的，因為C#是一門靜態的程式語言，但是使用javascript可以利用Function，以極少的程式碼實作一個簡易的模板引擎。本文就來實現一個簡易的ERB模板引擎，以展現javascript的強大。

範本文字轉換
針對上面的例子，回顧一下使用模板和不使用模板的差異：

範本寫法：

<ul>
 <% for(var i in items){ %>
 <li class='<%= items[i].status %>'><%= items[i].text %></li>
 <% } %>
</ul>

非模板寫法：

var temp = '<ul>';
for(var i in items){
 temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
}
temp += '</ul>';

仔細觀察，實際上這兩種方法十分“相似”，能夠找到某種意義上的一一對應。如果能夠將模板的文字變成程式碼執行，那麼就能實現模板轉換。在轉化過程中有兩個原則：

遇到普通的文字直接當成字串拼接
遇到interpolate(即)，將其中的內容當成變數拼接在字串中
遇到evaluate(即)，直接當成代碼
將上面的例子依照上述原則進行變換，再增加一個總的函數：

var template = function(items){
 var temp = '';
 //开始变换
 temp += '<ul>';
 for(var i in items){
 temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
 }
 temp += '</ul>';
}

最後執行這個函數，傳入資料參數即可：

var result = template(items);

javascript動態函數
可見上面的轉換邏輯其實十分簡單，但是關鍵的問題是，範本是變化的，這意味著產生的程式碼也必須是在執行時產生並執行的。還好javascript有許多動態特性，其中一個強大的特性就是Function。 我們通常使用function關鍵字在js中宣告函數，很少用Function。在js中function是字面語法，js的運行時會將字面的function轉換成Function對象，所以實際上Function提供了更為底層和靈活的機制。

用 Function 類別直接建立函數的語法如下：

var function_name = new Function(arg1, arg2, ..., argN, function_body)

例如：

//创建动态函数 
var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
//执行 
sayHi('Hello','World');

函數體和參數都能夠透過字串來建立！ So cool！有了這個特性，可以將模板文字轉換成函數體的字串，這樣就可以創建動態的函數來動態的呼叫了。

實現思路
首先利用正規式來描述interpolate和evaluate，括號用來分組捕獲：

var interpolate_reg = /<%=([\s\S]+&#63;)%>/g;
var evaluate_reg = /<%([\s\S]+&#63;)%>/g;

為了對整個模板進行連續的匹配將這兩個正則式合併在一起，但是注意，所有能夠匹配interpolate的字符串都能匹配evaluate，所以interpolate需要有較高的優先級：

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>/g

設計一個函數用於轉換模板，輸入參數為模板文字字符串和資料物件

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>/g
//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){ ... }

使用replace方法，进行正则的匹配和“替换”，实际上我们的目的不是要替换interpolate或evaluate，而是在匹配的过程中构建出“方法体”：

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>/g
//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){
 var index = 0;//记录当前扫描到哪里了
 var function_body = "var temp = '';";
 function_body += "temp += '";
 text.replace(matcher,function(match,interpolate,evaluate,offset){
 //找到第一个匹配后，将前面部分作为普通字符串拼接的表达式
 function_body += text.slice(index,offset);
 
 //如果是<% ... %>直接作为代码片段，evaluate就是捕获的分组
 if(evaluate){
  function_body += "';" + evaluate + "temp += '";
 }
 //如果是<%= ... %>拼接字符串，interpolate就是捕获的分组
 if(interpolate){
  function_body += "' + " + interpolate + " + '";
 }
 //递增index，跳过evaluate或者interpolate
 index = offset + match.length;
 //这里的return没有什么意义，因为关键不是替换text，而是构建function_body
 return match;
 });
 //最后的代码应该是返回temp
 function_body += "';return temp;";
}

至此，function_body虽然是个字符串，但里面的内容实际上是一段函数代码，可以用这个变量来动态创建一个函数对象，并通过data参数调用：

var render = new Function('obj', function_body);
return render(data);

这样render就是一个方法，可以调用，方法内部的代码由模板的内容构造，但是大致的框架应该是这样的：

function render(obj){
 var temp = '';
 temp += ...
 ...
 return temp;
}

注意到，方法的形参是obj，所以模板内部引用的变量应该是obj：

<script id='template' type='javascript/template'>
 <ul>
 <% for(var i in obj){ %>
  <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
 <% } %>
 </ul>
</script>

看似到这里就OK了，但是有个必须解决的问题。模板文本中可能包含\r \n \u2028 \u2029等字符，这些字符如果出现在代码中，会出错，比如下面的代码是错误的：

temp += '
 <ul>
 ' + ... ;

我们希望看到的应该是这样的代码：

temp += '\n \t\t<ul>\n' + ...;

这样需要把\n前面的转义成\即可，最终变成字面的\\n。

另外，还有一个问题是，上面的代码无法将最后一个evaluate或者interpolate后面的部分拼接进来，解决这个问题的办法也很简单，只需要在正则式中添加一个行尾的匹配即可：

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>|$/g;

相对完整的代码

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>|$/g


//模板文本中的特殊字符转义处理
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
var escapes = {
  "'":   "'",
  '\\':   '\\',
  '\r':   'r',
  '\n':   'n',
  '\t':   't',
  '\u2028': 'u2028',
  '\u2029': 'u2029'
 };

//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){
 var index = 0;//记录当前扫描到哪里了
 var function_body = "var temp = '';";
 function_body += "temp += '";
 text.replace(matcher,function(match,interpolate,evaluate,offset){
 //找到第一个匹配后，将前面部分作为普通字符串拼接的表达式
 //添加了处理转义字符
 function_body += text.slice(index,offset)
  .replace(escaper, function(match) { return '\\' + escapes[match]; });

 //如果是<% ... %>直接作为代码片段，evaluate就是捕获的分组
 if(evaluate){
  function_body += "';" + evaluate + "temp += '";
 }
 //如果是<%= ... %>拼接字符串，interpolate就是捕获的分组
 if(interpolate){
  function_body += "' + " + interpolate + " + '";
 }
 //递增index，跳过evaluate或者interpolate
 index = offset + match.length;
 //这里的return没有什么意义，因为关键不是替换text，而是构建function_body
 return match;
 });
 //最后的代码应该是返回temp
 function_body += "';return temp;";
 var render = new Function('obj', function_body);
 return render(data);
}

调用代码可以是这样：

<script id='template' type='javascript/template'>
 <ul>
 <% for(var i in obj){ %>
  <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
 <% } %>
 </ul>
</script>

...

var text = document.getElementById('template').innerHTML;
var items = [
 { text: 'text1' ,status:'done' },
 { text: 'text2' ,status:'pending' },
 { text: 'text3' ,status:'pending' },
 { text: 'text4' ,status:'processing' }
];
console.log(template(text,items));

可见，我们只用了很少的代码就实现了一个简易的模板。

遗留的问题
还有几个细节的问题需要注意：

• 因为8cf5f6c35ca23753fe8175505a949eed都是模板的边界字符，如果模板需要输出8cf5f6c35ca23753fe8175505a949eed，那么需要设计转义的办法
• 如果数据对象中包含有null，显然不希望最后输出'null',所以需要在function_body的代码中考虑null的情况
• 在模板中每次使用obj的形参引用数据，可能不太方便，可以在function_body添加with(obj||{}){...}，这样模板中可以直接使用obj的属性
• 可以设计将render返回出去，而不是返回转化的结果，这样外部可以缓存生成的函数，以提高性能