本文實例講述了JavaScript模板引擎應(yīng)用場景及實現(xiàn)原理。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)建站是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),虛擬空間、主機租用、主機托管，四川、重慶、廣東電信服務(wù)器租用,眉山聯(lián)通機房，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國大陸、港澳臺以及歐美等多個國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。
一、應(yīng)用場景
以下應(yīng)用場景可以使用模板引擎：
1、如果你有動態(tài)ajax請求數(shù)據(jù)并需要封裝成視圖展現(xiàn)給用戶，想要提高自己的工作效率。
2、如果你是拼串族或者數(shù)組push族，迫切的希望改變現(xiàn)有的書寫方式。
3、如果你在頁面布局中，存在共性模塊和布局，你可以提取出公共模板，減少維護的數(shù)量。
二、實現(xiàn)原理
不同模板間實現(xiàn)原理大同小異，各有優(yōu)缺，請按需選擇，以下示例以artTemplate模板引擎來分析。
2.1 模板存放
模板一般都是放置到textarea/input等表單控件，或者script[type="text/html"]等標簽中，如下：
//textarea或input則取value，其它情況取innerHTML
2.2 模板函數(shù)
一般都是templateFun("id", data);其中id為存放模板字符串的元素id，data為需要裝載的數(shù)據(jù)。
2.3 模板獲取
一般都是通過ID來獲取，document.getElementById("ID"):
//textarea或input則取value，其它情況取innerHTML var 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;
例如上例中：”{{if isAdmin}}”最終被解析成”if(isAdmin){”，”{{/if}}“被解析成“}”。
2.5 模板編譯——字符串拼接成生成函數(shù)的過程
這步的主要操作就是字符串的拼接成生成函數(shù)，看看artTemplate的部分源碼：
function compiler (source, options) {
/*
openTag: '<%', // 邏輯語法開始標簽
closeTag: '%>', // 邏輯語法結(jié)束標簽
escape: true, // 是否編碼輸出變量的 HTML 字符
cache: true, // 是否開啟緩存（依賴 options 的 filename 字段）
compress: false, // 是否壓縮輸出
parser: null // 自定義語法格式器 @see: template-syntax.js
*/
var debug = options.debug;
var openTag = options.openTag;
var closeTag = options.closeTag;
var parser = options.parser;
var compress = options.compress;
var escape = options.escape;
var line = 1;
var uniq = {$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1};
//isNewEngin在6-8返回undefined
var isNewEngine = ''.trim;// '__proto__' in {}
var replaces = isNewEngine
? ["$out='';", "$out+=", ";", "$out"]
: ["$out=[];", "$out.push(", ");", "$out.join('')"];
var concat = isNewEngine
? "$out+=text;return $out;"
: "$out.push(text);";
var print = "function(){"
+ "var text=''.concat.apply('',arguments);"
+ concat
+ "}";
var include = "function(filename,data){"
+ "data=data||$data;"
+ "var text=$utils.$include(filename,data,$filename);"
+ concat
+ "}";
var headerCode = "'use strict';"
+ "var $utils=this,$helpers=$utils.$helpers,"
+ (debug ? "$line=0," : "");
var mainCode = replaces[0];
var footerCode = "return new String(" + replaces[3] + ");"
// html與邏輯語法分離
forEach(source.split(openTag), function (code) {
code = code.split(closeTag);
var $0 = code[0];
var $1 = code[1];
// code: [html]
if (code.length === 1) {
mainCode += html($0);
// code: [logic, html]
} else {
mainCode += logic($0);
if ($1) {
mainCode += html($1);
}
}
});
var code = headerCode + mainCode + footerCode;
上例中模板中的模板字符串代碼會被拼接成如下字符串：
'use strict';
var $utils = this,
$helpers = $utils.$helpers,
isAdmin = $data.isAdmin,
$escape = $utils.$escape,
title = $data.title,
$each = $utils.$each,
user = $data.user,
name = $data.name,
i = $data.i,
$out = '';
if (isAdmin) {
$out += '\n\n ';
$out += $escape(title);
$out += '
\n 然后會被生成如下函數(shù)：
var Render = new Function("$data", "$filename", code);
/*Outputs:
function anonymous($data, $filename) {
'use strict';
var $utils = this,
$helpers = $utils.$helpers,
isAdmin = $data.isAdmin,
$escape = $utils.$escape,
title = $data.title,
$each = $utils.$each,
user = $data.user,
name = $data.name,
i = $data.i,
$out = '';
if (isAdmin) {
$out += '\n\n ';
$out += $escape(title);
$out += '
\n 2.5 裝載數(shù)據(jù)，視圖呈現(xiàn)
/*Outputs:User lists
三、常見JavaScript模板引擎及測試對比
artTemplate —— 高性能JavaScript模板引擎(騰訊CDC)
Velocity.js —— 來自淘寶的JS 模板引擎
JavaScript Templates —— 輕量、快速、強大、無依賴模板引擎
Juicer —— 高效、輕量的Javascript模板引擎
mustache.js —— Logic-less {{mustache}} templates with JavaScript
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
