本文实例讲述了JavaScript模板引擎应用场景及实现原理。分享给大家供大家参考，具体如下：
一、应用场景
以下应用场景可以使用模板引擎：
1、如果你有动态ajax请求数据并需要封装成视图展现给用户，想要提高自己的工作效率。
2、如果你是拼串族或者数组push族，迫切的希望改变现有的书写方式。
3、如果你在页面布局中，存在共性模块和布局，你可以提取出公共模板，减少维护的数量。
二、实现原理
不同模板间实现原理大同小异，各有优缺，请按需选择，以下示例以artTemplate模板引擎来分析。
2.1 模板存放
模板一般都是放置到textarea/input等表单控件，或者script[type="text/html"]等标签中，如下：
<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 模板函数
一般都是templateFun("id", data);其中id为存放模板字符串的元素id，data为需要装载的数据。
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元素和逻辑语句及关键字。例如：artTemplate.js中的代码实现：
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 模板编译——字符串拼接成生成函数的过程
这步的主要操作就是字符串的拼接成生成函数，看看artTemplate的部分源码：
function compiler (source, options) {
/*
openTag: '<%', // 逻辑语法开始标签
closeTag: '%>', // 逻辑语法结束标签
escape: true, // 是否编码上例中模板中的模板字符串代码会被拼接成如下字符串：
'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 <h1>';
$out += $escape(title);
$out += '</h1>\n <ul>\n ';
$each(user, function(name, i) {
$out += '\n <li>';
$out += $escape(i + 1);
$out += ' ：';
$out += $escape(name);
$out += '</li>\n ';
});
$out += '\n </ul>\n\n ';
}
return new String($out);
然后会被生成如下函数：
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 <h1>';
$out += $escape(title);
$out += '</h1>\n <ul>\n ';
$each(user, function(name, i) {
$out += '\n <li>';
$out += $escape(i + 1);
$out += ' ：';
$out += $escape(name);
$out += '</li>\n ';
});
$out += '\n </ul>\n\n ';
}
return new String($out);
}
*/
console.log(Render);
2.5 装载数据，视图呈现
/*Outputs: <h1>User lists</h1> <ul> <li>1 ：zuojj</li> <li>2 ：Benjamin</li> <li>3 ：John</li> <li>4 ：Rubby</li> <li>5 ：Handy</li> <li>6 ：CIMI</li> </ul> */ console.log(new Render(data, filename) + ''); //对象转换为字符串 return new Render(data, filename) + '';
三、常见JavaScript模板引擎及测试对比
artTemplate —— 高性能JavaScript模板引擎(腾讯CDC)
Velocity.js —— 来自淘宝的JS 模板引擎
JavaScript Templates —— 轻量、快速、强大、无依赖模板引擎
Juicer —— 高效、轻量的Javascript模板引擎
mustache.js —— Logic-less {{mustache}} templates with JavaScript
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
