前端高手之路 实现Vue模板解析器

任务事物都自己的特性，同理任何一门开发语言都有自己的语法，对应的任意一个框架也会有自己的一套语法。 不管是学编程语言或是框架。就是要遵循它的规则。今天我们来说说

【Vue】的模板字符串

写过Vue代码的对上面的代码应该很熟悉了，但是童鞋们是否想过这种功能是如何实现的呢？往下看。来，一起撸吧。

这个{}就是我们今天要说的模板字符串。很明显，它是通过{{}}双花括号包裹起来的 。我们的目的就是要找到双花括号中间的内容。接触过angularjs1.x的童鞋对这个应该不陌生吧。要解析得到html当中的文本，很容易就让我们想到用正则表达式了。

分析：

1、获取到#app下面所有的节点。

2、编译。 判断节点的类型（分文本节点和标签节点两大部分）。

3、如果是标签节点，就递归调用

4、通过匹配到的字符串去data对象中替换对应的值即可。

可能会遇到的问题

1、正则表达式要怎么写？正则可谓是很多前端开发者的一大痛点了。不要方，一步步的来，先来个简单的，先匹配前后的双花括号

var reg = /{{ }}/; //由于{{}}都是特殊字符，所以我们要在前面加了反斜杠进行转义。

就是辣么简单。接着我们需要去掉{{}}面的空格,var reg = /{{ s* s*}}/;最后是要匹配的核心，varreg = /{}/;加了()括号是为了分组。拿到（）里面的非空字符串。最后我们通过RegExp.$1 获取到每一个括号里面的内容。

2、节点类型如何判断？我们知道每一个html的dom节点都有一个nodeType类型。nodeType = 1 表示标签节点 nodeType = 3 表示文本节点 。至于其它的代表什么我没查，我比较懒，你们自己查去。

3、递归。好多童鞋被这个递归算搞得晕头转向的。我总结递归需要注意的有3点

递归函数一定会有一个终止的条件。

递归函数内部会不停的调用自身。

递归函数内部的调用一定和最外层的调用的实参不一样。不然会走进一个死循环里去了。

说了那么多，再不贴完整代码，估计会被打。

运行结果毫无悬念正常输出：

今天这个只是实现一个简单的模板解析器，当然Vue本身的实现模板解析比这个要复杂太多。这个案例只是解析一下它的实现基本原理。

不阅读下别人的代码。你都不知道自己有多糟糕。紧跟大神的步伐。加油！！！