任务事物都自己的特性,同理任何一门开发语言都有自己的语法,对应的任意一个框架也会有自己的一套语法。 不管是学编程语言或是框架。就是要遵循它的规则。今天我们来说说
【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本身的实现模板解析比这个要复杂太多。这个案例只是解析一下它的实现基本原理。
不阅读下别人的代码。你都不知道自己有多糟糕。紧跟大神的步伐。加油!!!
领取专属 10元无门槛券
私享最新 技术干货