本文實例講述了JavaScript模板引擎應(yīng)用場景及實現(xiàn)原理。分享給大家供大家參考，具體如下：

一、應(yīng)用場景

以下應(yīng)用場景可以使用模板引擎：

1、如果你有動態(tài)ajax請求數(shù)據(jù)并需要封裝成視圖展現(xiàn)給用戶，想要提高自己的工作效率。
2、如果你是拼串族或者數(shù)組push族，迫切的希望改變現(xiàn)有的書寫方式。
3、如果你在頁面布局中，存在共性模塊和布局，你可以提取出公共模板，減少維護(hù)的數(shù)量。

二、實現(xiàn)原理

不同模板間實現(xiàn)原理大同小異，各有優(yōu)缺，請按需選擇，以下示例以artTemplate模板引擎來分析。

2.1 模板存放

模板一般都是放置到textarea/input等表單控件，或者script[type="text/html"]等標(biāo)簽中，如下：

<script id="test" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul>   {{each user as name i}}     <li> {{i + 1}} ：{{name}}</li>   {{/each}} </ul> {{/if}}</script>//textarea或input則取value，其它情況取innerHTML

2.2 模板函數(shù)

一般都是templateFun("id", data);其中id為存放模板字符串的元素id，data為需要裝載的數(shù)據(jù)。

2.3 模板獲取

一般都是通過ID來獲取，document.getElementById("ID"):

//textarea或input則取value，其它情況取innerHTMLvar html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;

2.4 模板解析——處理html語句和邏輯語句及其他格式化處理

這步的主要操作其實多余的空格，解析出html元素和邏輯語句及關(guān)鍵字。例如：artTemplate.js中的代碼實現(xiàn)：

defaults.parser = function (code, options) {  // var match = code.match(/([/w/$]*)(/b.*)/);  // var key = match[1];  // var args = match[2];  // var split = args.split(' ');  // split.shift();  //if isAdmin  code = code.replace(/^/s/, '');  //["if", "isAdmin"]  var split = code.split(' ');  //if  var key = split.shift();  //isAdmin  var args = split.join(' ');  switch (key) {    case 'if':      //if(isAdmin){      code = 'if(' + args + '){';      break;    case 'else':      if (split.shift() === 'if') {        split = ' if(' + split.join(' ') + ')';      } else {        split = '';      }      code = '}else' + split + '{';      break;    case '/if':      code = '}';      break;    case 'each':      var object = split[0] || '$data';      var as   = split[1] || 'as';      var value = split[2] || '$value';      var index = split[3] || '$index';      var param  = value + ',' + index;      if (as !== 'as') {        object = '[]';      }      code = '$each(' + object + ',function(' + param + '){';      break;    case '/each':      code = '});';      break;    case 'echo':      code = 'print(' + args + ');';      break;    case 'print':    case 'include':      code = key + '(' + split.join(',') + ');';      break;