00:00
好的,在之前的课程当中呢,我们去呃了解了什么是模板引擎,然后也知道了musttash这个模板引擎的一个基本的语法啊,那么从这节课开始呢,我们就终于要讲最重要的知识了啊,我们并不局限于说模板引擎的语法,而是我们要看它的底层实现机理啊。呃,为什么要去讲它的底层实现机理,乃至于要手写一个masterdash这个库呢?原因很简单啊,原因就是说咱们很多同学啊都比较这个。呃,浮躁啊,就是说想去追求这个。啊,Voe的底层源码,Voe view的底层源码啊,说为了面试,但实际上呢,你为了面试的话,你就必须要一步一步的把路走扎实啊,言外之意就是说你既然想追求底层源码好,那咱们就先把第一步这个模板引擎这一步啊,咱们给它走稳,所以马大SH这个库呢,实际上它的思想,还有它的一些设计风格,实际上都被view啊所借鉴,那咱们必须要把这个库,咱们要给他攻破,给他拿下啊。
01:02
好了,那么master大的一个底层核心机理呢,我们来看一下啊,那么咱们先告诉他结论,结论呢就是不能啊,不能用这个简单的正则表达式的这个思路来实现,注意这里是不能啊。好,那为什么呢?咱们来看,如果简单的情况下,比如说现在这个模板字符串,就是我买了一个C啊,好木。对吧?好,然后再给一个数据,C是华为手机,目的是开心,那这种情况下呢,其实正则表达式是可以完成这个数据绑定的啊,就是所谓的数据注入的啊,就是把这个数据填充进去,我买了一个华为手机,好开心,哎,那这种情况是可以用正则,但是复杂的情况下啊,当情况复杂的时候,好,当这个情况复杂的时候呢,正则表达式的思路肯定就不行了。啊,比如你这里带循环,那正则表达式不行啊,那同学们肯定会好奇,到底这个正则表达式是什么啊,那这样咱们呢,老师先把这种简单情况下,用正则的一个数据填充给大家写一写。
02:02
对吧,哎,咱们给大家写一写,然后呢,呃,但是他他整个master大库不是简单政则啊,大家不要误会,我们在这里写一写的话,只是为了满足大家的一个好奇心。哎,对吧,哎,满足大家一个好奇心啊,就是如何识别这个双大括号啊,把thing填进去,把目的呢填进去啊,就如何让咱们的JS识别这双大括号啊,然后能够抓取这个S和目的啊能填进去对吧?好,那咱们现在去啊VS扣的。咱们赶紧去看一看啊,到底怎么样去弄。诶,这有点切不过来了。嗯。好了,咱们切过来了啊,然后咱们现在把这个案例新建一个,这叫零九,哎,那咱们就看。看一下就是演示一下正则表达式啊的这样的一个,呃,实现简单的这样的一个模板啊,模板的一个数据填充吧。好,那咱们先来看一下啊,那这个就很简单啊,我们从PPT上把这句话抄下来,那这个就是咱们的templatet啊,我们给它,嗯,以字符串的形式,好,那咱们现在的话呢,就需要有一个数据,数据的话我们也给它复制下来啊。
03:15
对吧,哎,数据。那现在的任务呢,就是写一个函数,这个函数能够识别这个收纳括号,然后把这个数据弄过去啊,那它的机理其实就是replace方法。对吧,哎,Replace方法啊,比如说咱们现在可以写一个啊叫啊我爱对吧,哎,我爱这个啊,我爱上硅谷啊,咱们写一个叫我爱上硅谷。好,那这样的话,在我爱上硅谷啊,那这个时候的话,我可以把这个,呃,然后咱们再可以写一个对吧,哎,我也爱打篮球啊行。那我现在呢,可以把这句话当中的我字替换成你啊,那这个时候怎么办呢?其实很简单,那这个时候呢,实际上是可以用这个replace方法啊,Replace方法就是replace啊,但是你不能写一个我逗号你啊。
04:09
为什么呢?因为这样的话呢,它只能替换第一个我这个字。啊,我先把上边这个注掉啊,跟上边没关,咱们先讲讲replace方法。那这样的话呢,咱们来呃,运行一下这个网页,我们来看一下现在的这个情况。你会发现它是你爱上硅谷啊,我也爱打篮球是吧,那这个时候实际上你就会发现这个地方呢,是一个拟字,但这个地方并没有替换成拟字,那通常情况下我们要把两个地方都换成拟字的话呢,我们这个时候要用正则。啊,然后这块要加G,哎,换成正则的写法,然后这块要加G啊G呢就表示global全局啊,就要全局去寻找,那这样的话,你看是不是就你爱上硅谷,你也爱打篮球对吧?所以这个replace大家一定要记住,就第一个一般来说我们会用正则来去写啊。然后接下来的问题呢,就比较好玩了,就接下来的问题就是说我不想啊,傻傻傻的替换成你,那这个时候呢,他其实可以给他写一个函数。
05:08
哎,这个函数啊,那什么意思呢?就是说replace,它第一个参数是正则,第二个参数是个函数,那这个函数返回的东西,比如说咱们写的它。啊特一个他那这个时候是不是就变成了他爱上硅谷,他也爱打篮球。就把这个我换成了他,那你说老师你为什么不直接写一个他呢。对吧,为什么要写一个函数写return呢?那原因很简单啊,就是因为啊,我们如果写成函数的形式呢,那么这个函数在这里啊,它能收一个参。收一个参数,收的这个参数是什么呢?咱们你看拿ABC来表示一下,咱们输出一下啊,ABC你大概就能知道。看见了吗?那这个地方就是A,这个就是B,这个就是C。对吧,那你发没发现这个A,是不是就是说你匹配的这个东西对吧?哎,你当前匹配的这个字。
06:01
对吧,然后B呢,就是这个字的位置,C就是它的原串。啊,那不仅如此呢,其实它还能进行一个补货功能,哎,那咱们现在就直接啊,不不藏着掖着了,咱们现就直接啊,咱们来看。我们直接把这个temp,哎,我们现在给他啊打点这个replace替换。好吧,来替换啊,那这个时候呢,我们就可以让正则去寻找这个双大括号和这个呃,就是结尾这个双大括号中间的东西,那中间的东西呢,可以用圆括号来进行一个补货。啊,咱们来看怎么玩,那就是双大括号啊,大括号前头可以加反斜杠,当然也可以不加,因为大括号在正则当中没有意义。但是最好加上啊,就是最好加上就这种符号啊,这种符,哎哎,好像讲错了啊,不对啊上呃,那个老师刚才口误啊,这个大括号其实在正则当中是有意义的,谁说没有意义,因为大括号是不是表示次数。
07:00
对吧,哎,一个东西循环次数啊,所以大括号前呢,要去加上这个反斜线来表示转移。好,然后呢,那里面的内容是随便的内容啊,那一般来说是字母字母我们就杠W就行。哎,就是字母数字啊什么的,就这里头的代号就杠W,那它是加,为什么要写个加呢?因为它可能有一个字母或者多个好,然后结束大括号,那这个时候实际上呢,你这个正则没有写完整,因为这里啊。杠W加这里啊,它少了一个圆括号。啊,那这个圆括号就表示什么呢?表示捕获,就是说我要捕获这里面的文字。能明白吗?我要捕获这里边儿的文字。啊,捕获这里边的文字,好,那这个时候呢,咱们给它返回成,就随便成一个成一个五角星吧。好,然后ABC参数啊,咱们看一下,那这个时候最终它就变成了,我买了一个五角星,好五角星对吧,它的确把这个部分换成了五角星啊,没有任何问题啊,他这个啊正则表达式写的很好,那这个时候问题来了,就说老师你为什么不直接在这里写一个五角星。
08:09
对吧,你直接在这里写一个五角星不就完了吗?我买了一个五角星和五角星,那为什么要写成函数呢?哎,就回到刚才那问题了啊,那这个时候这ABC3个参数很关键,因为你看A参数。发现了吗?就是说他寻找到的这个部分啊,然后B参数就是他捕获的东西。对吧,C参数呢,哎,就是它出现的位置。啊,那所以说这里这就有意义,然后还有D参数啊,D参数实际上就是咱们。就是它这个原创,哎,就是它完整的原字符串。所以它这个参数是什么意思呢?A呢,就是表示你捕获到的这部分,就是你捕获到的啊,不是说错了,就是不是你捕获就是你替换到的啊,你查找到的匹配的这部分。对吧,哎,就匹配的这这部分,哎,这部分的一个东西啊,所以这个咱们就叫啊find就是你找到的啊匹配的部分,然后第二部分呢,就是你捕获到的。
09:06
啊,就你捕获到,就是这个圆括号中捕获到的,那这个变量呢,咱们通常叫DOLLAR1。哎,通常这个变量咱们,哎,比如说你也可以叫补货叫captured对吧,随便啊,因为这是行餐,可以随便起名叫什么都行。叫什么东西啊,Cap就抓到,但是一般来说可以叫DOLLAR1 dollar1就表示第一个圆括号中补到的啊,如果它有更多的圆括号呢?那实际上这块就是DOLLAR2到三就可以排下来啊,但现在只有一个圆括号啊,那这个参数啊,就表示的是这个位置,这个参数是原原字符号,其实它俩没用对吧。好,所以这里DOLLAR1是很有用的,那你看他是不是就抓到了这个thing和木的呀。对吧,抓取到了四目,但是这个还是五角星,那这个时候你看你是不是要如果啊,也就是说如果它是这个DOLLAR1是thing这个词,那就要替换成这个词,华为手机。如果DOLLAR1呢,是木的这个词。
10:01
对吧,木的这个单词,那这个时候我们就需要给它替换成开心两个字,所以说这个时候你要返回什么?对,你是不是要返回data中的DOLLAR1这个东西啊。对吧?哎,我要给他返回贝塔中的DOLLAR1这个东西。看见了吗?啊,DOLLAR1的这个东西。啊,德塔中的DOLLAR1这个东西,当然这块不能打点啊,你打点错了,因为咱们说过这个DOLLAR1是个变量,变量是不能被对象打点了。啊,你要表示DOLLAR1这个这个这个属性,那你要加方括号。那这样的话呢,DOLLAR1他可能会抓到这个thing这个词啊,那他就会匹配华为手机对吧?诶木的这个词呢,就是开心,所以这么写,你看它就填充上去了。啊,所以这个呢,就是一个最简单的一个模板引擎实现机理,但是咱们main touch底层不是这个,因为这个太简单了啊,它没法实现什么循环呀,啊这种这种东西还甚至包括循环嵌套,他肯定没法实现呀。
11:03
对吧,哎,但是大家要理解啊,然后这个时候你就可以封装成函数啊,比如说咱们这个函数叫function render。哎,然后第一个呢,就是template ST啊,然后第二个就是data啊啊,然后就可以return。哎,Return这个,然后那咱们就可以测试这个函数啊template啊往里填。是吧,然后这就result。然后可以输出啊。哎,封装成函数更专业一点嘛,没问题吧,哎,我花了一个啊摸买了一个thing对吧,哎,花了。啊,叫money。Money。圆啊,好木的对吧,哎,我买了一个白菜。啊,花了五块钱啊,对不起,这是money。哎,然后这是木的。啊,好激动是吧。
12:00
哎,这个五可以是数字啊,好,没问题,我买这个白菜花了五元,好激动。哎,没问题。啊,它这个是可以进行这样填充的,所以这是一个最简单的一个模啊,最简单的一个模板引擎的一个实现激励啊,利用的是咱们的正则表达式当中的这个replace函数啊,Replace这个方法啊。哎,那么replace它,呃,Replace的第二个参数呢,可以是一个函数。啊,一个函数,然后这个函数呢。提供啊补货啊的这样的一个东西的这样的一个参数,哎,就是DOLLAR1。哎,然后呢,再结合data对象,哎,即可进行一个智能的一个替换,所以这很很很很好玩啊,这个正则也很简单。啊也很简单,就匹配这个大括号啊,然后捕获这个杠W加,就这里边的东西嘛。
13:00
好,然后捕获到的东西呢,用Dollar一来表示,然后返回这个对象的DOLLAR1。啊,这样子去书写。所以里外里他是什么意思呢,就把这件事儿给他说简单一点呢,就是说他就是一个最朴素的啊,就是最朴素的,然后这样子的一个,呃,一个这样子的一个,呃,模板引擎的这样的一个实现的一个东西。啊,非常的朴素啊,好,那这个代码大家也会留给大家啊,咱们都是开源免费的,所有这些案例资料啊,大家都可以看,哎,那这个大家可以试着写写啊,嗯,但是呢,回到咱们的PPT当中,其实就给你泼了一盆冷水啊,因为这种比较简单的这种情况下,你是可以用这种模式去实现的。对吧,但是当这个情况复杂的时候呢,正则正则的思路肯定是不行的。啊,比如这样的模板字符串,比如下面这样的啊,就是这样的模板字符串。啊,那你怎么用正则来实现对吧?啊,我我这个景AR它没法替换呀,因为它还有一个开始和一个结尾标记,然后它还有居中的东西,你你你你你怎么用正则去replace,他没办法呀。
14:08
这个班大家能绕过来吗?那所以说呢,你这就是啊,咱们要去学习马大CH这个库,哎,马大这个库到底啊,应该他是怎么手写的对吧?哎,那他是到底怎么实现的啊啊这就是我们必须要去说的,好,那他到底怎么实现的呢?它是由这张图啊这样的一个思路,哎,它有一个tokens做过渡啊来去呃实现的啊那这张图的话,我们这样视频呢,咱们单独录制啊,然后咱们啊下一个视频当中给大家详细讲解这个tokens到底是什么,好吧,哎,咱们把这个ma库机理给你讲清楚啊。
我来说两句