JavaScript模版引擎的基本实现方法浅析


Posted in Javascript onFebruary 15, 2016

模板分离了数据与展现,使得展现的逻辑和效果更易维护。利用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]+?)%>/g;
var evaluate_reg = /<%([\s\S]+?)%>/g;

为了对整个模板进行连续的匹配将这两个正则式合并在一起,但是注意,所有能够匹配interpolate的字符串都能匹配evaluate,所以interpolate需要有较高的优先级:

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/g

设计一个函数用于转化模板,输入参数为模板文本字串和数据对象

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

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

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>/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]+?)%>|<%([\s\S]+?)%>|$/g;

相对完整的代码

var matcher = /<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/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));

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

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

  • 因为<%或者%>都是模板的边界字符,如果模板需要输出<%或者%>,那么需要设计转义的办法
  • 如果数据对象中包含有null,显然不希望最后输出'null',所以需要在function_body的代码中考虑null的情况
  • 在模板中每次使用obj的形参引用数据,可能不太方便,可以在function_body添加with(obj||{}){...},这样模板中可以直接使用obj的属性
  • 可以设计将render返回出去,而不是返回转化的结果,这样外部可以缓存生成的函数,以提高性能
Javascript 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
常规表格多表头查询示例
Feb 21 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 #Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 #Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 #Javascript
极易被忽视的javascript面试题七问七答
Feb 15 #Javascript
在JavaScript中使用JSON数据
Feb 15 #Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 #Javascript
轻松搞定jQuery.noConflict()
Feb 15 #Javascript
You might like
PHP通用检测函数集合
2006/11/25 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
SQL语言面试题
2013/08/27 面试题
存储过程和sql语句的优缺点
2014/07/02 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
洗发露广告词
2014/03/14 职场文书
护士长竞聘书
2014/03/31 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2015年财政所工作总结
2015/04/25 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
python flappy bird小游戏分步实现流程
2022/02/15 Python
Python&Matlab实现樱花的绘制
2022/04/07 Python
零基础学java之循环语句的使用
2022/04/10 Java/Android