JavaScript模板引擎应用场景及实现原理详解


Posted in Javascript onDecember 14, 2018

本文实例讲述了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,   // 是否编码输出变量的 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 <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模板引擎及测试对比

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
详解React 服务端渲染方案完美的解决方案
Dec 14 #Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 #Javascript
JS实现的A*寻路算法详解
Dec 14 #Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 #Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 #Javascript
javascript中的event loop事件循环详解
Dec 14 #Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 #Javascript
You might like
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
浅析php header 跳转
2013/06/17 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
利用Python获取操作系统信息实例
2016/09/02 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
夜大自我鉴定
2013/10/31 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
员工晚婚的请假条
2014/02/08 职场文书
教师职称自我鉴定
2014/02/12 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
广播体操口号
2014/06/18 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
医生个人年终总结
2015/02/28 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
《雷雨》教学反思
2016/02/20 职场文书
小学语文教学反思范文
2016/03/03 职场文书