JS模版引擎实现原理
来源:互联网 发布:淘宝全屏店招怎么做 编辑:程序博客网 时间:2024/05/16 15:19
前言
模板引擎我用过的和了解的着实不少,如PHP的smarty、Java的freemark,javaScript的Jade、artTemplate、angularJS的模板引擎等,但一直没有停下里好好思索它们的实现原理。今天有幸看到两篇好文章,写得甚是不错,小生简单剪辑和归纳了一下。不过文章比较长,有耐心的同学可以看看 ^_^
模板简介
模板通常是指嵌入了某种动态编程语言代码的文本,数据和模板通过某种形式的结合,可以变化出不同的结果。模板通常用来定义显示的形式,能够使得数据展现更为丰富,而且容易维护。例如,下面是一个模板的例子:
<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));
可见,我们只用了很少的代码就实现了一个简易的模板。
总结
模板引擎的实现原理可以概括为5句话:
- 正则抠出要匹配的内容
- 装入数组
- 分辨js逻辑部分
- 引擎函数
- 把data扔进去
使用场景
毕竟是前端代码,所以写出来是要为前端服务的,平时我们处理的一般是一个html的模板,通常的情况下,模板代码是放在script标签或者textarea中,所以首先是要获取到这里头的东西,然后再来做解析。
另外还有一点很重要,就是在单页应用开发的时候前端模板引擎的数据如果要利用ajax从服务器端获取,那么这个ajax就不能是异步的了,而且必须是整个单例中最先加载的才行。因此对于单页应用开发,模板引擎只能做首屏数据渲染,所有的异步操作都是无法应用模板引擎的(当然如果你手动调用模板函数也是可以做到的)。不过介于以上我的弱点,我强烈建议大家用 angularJS的模板引擎,它可以实现双向数据绑定,从而避免了一大堆的DOM操作。
遗留的问题
还有几个细节的问题需要注意:
- 因为<%或者%>都是模板的边界字符,如果模板需要输出<%或者%>,那么需要设计转义的办法。
- 如果数据对象中包含有null,显然不希望最后输出’null’,所以需要在function_body的代码中考虑null的情况。
- 在模板中每次使用obj的形参引用数据,可能不太方便,可以在function_body添加with(obj||{}){…},这样模板中可以直接使用obj的属性。
- 可以设计将render返回出去,而不是返回转化的结果,这样外部可以缓存生成的函数,以提高性能。
@ 参考 P_Chou javascript模板引擎和实现原理
@ 参考 小胡子哥 javascript模板引擎原理
- JS模版引擎实现原理
- js模版引擎。
- js模版引擎介绍
- node.js 模版引擎
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- artTemplate 前端js模版引擎
- js的模版引擎laytpl
- js 模版引擎jade使用语法
- 介绍一款js模版引擎handlebars
- js template模版引擎 为什么要用
- handlebars.js模版引擎入门案例
- 利用js模版引擎渲染html页面
- 最简单的JS模版引擎
- Js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- hdoj 1689 Just a Hook 【线段树区间更新求和】
- data race check with valgrind
- Java中获取完整的url
- DMA的基本概念
- NSIndexSet基本用法
- JS模版引擎实现原理
- android获取屏幕宽高
- sift源码+opencv+gtk+VS2013
- 对域约束的认识
- HDU1863
- ---数据处理---懒加载
- android基础知识点总结:Android部分基础控件使用总结(111页word下载)
- EF 未应用自动迁移,因为自动迁移会导致数据丢失的解决办法
- 链表学习之猴子选大王