00:01
好,我们呃一起来学习must大sH啊must大sH的这样的一个,呃,基本使用就是它的基本语法,咱们先学会用它,然后下节课呢,我们再去学会啊它的底层原理,再下节课我们啊一起来呃实现马touch的一个底层。好,那么must大是用的话还是很简单的啊,咱们先来介绍一下它,首先先来看一下这个词的音标啊,这个词的音标叫mustach啊,这个T可以发浊辅音叫的音啊,叫mustache mustach。这个U是啊啊啊的音,这个A呢是ii梅花I的音啊。那么它呢?呃,连起来就是mustache mustache啊,Mustache这个she不是车啊,是啊,Mustache。呃,Mustache是胡子的意思啊,因为它的嵌入标记啊,就双大括号。大家可能呃知道咱们vuee是不是也在用这个双大括号,这就是我们要学习mustdash的一个原因啊,这是因为啊,咱们这个massdash这个库呢,是最早的模板引擎库啊,它要比咱们的view啊诞生的早多了。
01:14
啊早多了,呃,然后这个mustdash这个库呢,在当时啊,是非常有创造性和轰动性的啊,因为他给了咱们程序员的一种就是看待模板的这样的一种视角啊,那到底是什么视角,我们后面的课,我们。去给大家介绍这个库的原理啊,我们就能够知道这个库到底为什么是创造性的,轰动性的啊。好,那么这里给了大家呃,Mustdash的一个官方G啊仓库的地址,呃,那咱们可以来去看一下啊。那这个呢,就是mustdash的一个官方的一个地址啊呃,那它这里实际上就写到了,它是一个logic class。啊的一个模板引擎,什么叫logic,就是弱逻辑的啊,就是它这里的这些逻辑呢,可能啊并不是很强,但是呢,它足够用。
02:06
好,然后呢,哎,你可以发现这个底下有一个呃,小老头啊,他这个胡子挺有意思的是吧。所以咱们程序员有的时候还是挺调皮的啊啊master sa是可以在NPM里头使用的啊,也就相当于它是可以提供在node JS环境中使用啊,当然也可以在浏览器中使用,我们一会儿讲解怎么用诶。好,然后这底下的文档我们不看了,我们看一下PPT啊,继续。好,我们看一下PPT。看一下这个mustdash库到底要怎么样的基本使用啊?首先呢,必须要去引入mada库啊,Mala库咱们一会不在NOEJS上去下载,咱们直接用这个boot c dn上去找到它的这个打包好的啊,这个镜像我们直接在浏览器中用啊,那也就是说mustdash这个库又可以在NPM中啊下载,就是提供给node JS环境使用啊,又可以提供给浏览器环境中使用,那这种情况我们就说它是umd的。
03:04
啊,Umd的啊,就说明它是通用的啊,浏览器中也能用,Note环境也能用,那至于umd是怎么实现的啊,我们在它的源啊源码书写的时候呢,老师会讲到大家呢,不要着急啊。好,引入这个库之后呢,我们就可以使用它的模板语法啊,来去去写一个模板。那比如说刚才的案例呢,我们就可以这么样去书写模板。双大括号井号AR,双大括号斜线AR。啊这样来,那这样的话,你就会发现,实际上这个井号AR就表示我要开始循环一个数组到斜线AR呢,就表示中间的部分,哎,要循环循环迭代谁呢?循环迭代这个AR数组,也就是说AR数组比如说有三项小明小红小强嘛,对吧?哎,那这个时候呢。这个时候这里边的这个呃,内容就会被循环三次。
04:03
啊,被循环迭代三次,好,那么每循环一项的话呢,那这里面呢,诶就可以去访问每一项的内幕属性,SS属性和A属性啊注意在uee当中是不是叫item.name呀,哎,这里是不需要写item点前缀的啊,然后vuee呢,实际上去做循环的话会更简化,就不用写这个标记了,直接在例上是不是加指令是V-for等于item对吧?诶一我这简写啊V-four item。呃,IEA。它是更简化的一种书写的指令的这种形式,但是呢,我们不能直接给大家介绍这个V-for啊,咱们啊可以预告一下咱们后续的课程啊,可以啊,会有模板解析啊,View的一些模板解析的一些内容,但是咱们今天。我们的这次课程呢,啊,咱们的侧重点就是在这个master大sH啊,因为马斯大SH这个东西呢,是非常非常的啊,古老就是很古朴很淳朴啊,啊他算是咱们的模板引擎界的一个鼻祖,那这种开山鼻祖,我们给他研究透啊,咱们才有资格是吧,哎,就才开才有这个资格去研究更深入的啊,这个view view的这种指令,这种写法啊。
05:17
好,那么这个模板语法你写完之后呢,那到底应该怎么样变成咱们的那个,呃,就是数据不是要往里注入吗?对吧,数据注入的意思就指的是填进去啊把数据那怎么填进去呢?这个时候啊,咱们就需要使用这个方法叫mustache啊大写M。哎,那么这个mustdash呢,实际上就是咱们的引的这个包向外暴露的全局变量啊,它可以打点调用render方法,Render表示的是成D啊。它有两个参数,第一个参数就是模板字符串A是什么?对,就是我们刚才的这个模板字符串。啊,第一个参数好,第二个参数呢,就是数据。哎,他这里第二个参数呢,就是数据,就是我们那个数组中的,呃,数据。
06:05
好,那么这个函数运行之后呢,就会返回被填充好的模板。啊,被填充好的不是模板了,就是咱们的盗墓结构,那你看这个力呢,就会被循环,但是由于PPT的版面限制啊,还会循环三次,我们就假装循环两次。哎,然后这些数据呢,就都能被填进去了,那填进去的数据呢,实际上就是在这里的。那你就会发现使用模板引擎呢,确实要比咱们刚才讲的反引号法还要简单,为什么呢?因为反引号法你需要自己写循环语句对吧?哎,但是呢,你使用模板引擎之后,连循环语句都省了。啊,当你就这么想,VE当中啊,V当中是不是。不用写循环语句啊,就直接写V-for就可以了,对吧,V-four其实就呃在模板中帮你循环了,哎,但是不用在JS中呢遍历这个数组了啊好,大家一定要记住是mustach.render啊mustache.render第一个是要填咱们的这个模板字符串,第二个呢,是要填这个数据啊好,那咱们现在多说无益,咱们赶紧去试一试,试一试啊。
07:15
好,那我们先去这个boot c dn啊boot c dn这个网站呢,呃,就是提供了一些这个呃包啊,打包好编译好的这种包啊,那么他们一个在线的一个JS地址。啊,那么这些包呢,都是在浏览器环境中可以使用的,诶啊,那么我们在这里就搜must大啊,诶那一定能搜到,因为这个包呢,它是一个呃,所谓的模板引擎界的一个鼻祖是吧。好,那这个时候我们只需要引入这个JS文件就可以了,咱们可以先看一眼它啊,它的源代码其实啊,就是不算多也不算少。就是模板已经被编译好了啊,不是编译好打包好点面点JS嘛,就是已经被压缩混淆压缩了啊。
08:00
那么在这里呢?这是它的源代码。哎,源代码啊,源代码的话呢,呃,我们呃在下个视频当中,老师会带着大家去告诉大家它,呃这个这个包的底层原理。对吧,然后呢,再下个视频,我们就会带着大家手写实现这个包啊。那么咱们现在只需要使用这个对吧,压缩后的啊,或者啊,或者就直接使用它这个。啊,这个呃,Master大点JS对吧,哎,呃,我们直接给他这样咱们按理说可以直接复制script的标签,但是为了咱们下个视频呢,就是。嗯,方便去大概看一下他的那个源代码,所以我们还是,呃,把这里边的JS对吧,哎,把这里面的JS文件啊,咱们全都复制。复制啊,哎,然后咱们自己去这个什么对吧,哎,自己咱们去新建这个。
09:00
呃,自己咱们去新建一个JS文件出来啊。哎,我们把刚才这块咱们直接去新建一个文件夹。啊,就叫JS Le,好,然后再去新建一个文件啊,文本文件,咱们就叫mustdash.js。好,这个单词比较难拼啊,大家要呃,试着背一背这个单词MU对吧?好,那么这样的话呢,大家就可以看见啊,那这样的话你就会发现,实际上它就是一个呃,Master大的一个源代码啊,我们在下个视频呢,会告诉大家它的一个底层逻辑是什么。那现在的话我们不要着急啊,看它的底层逻辑,先看它怎么样使用,怎么使用呢,还是非常简单的啊,咱们写个零四叫mata基本使用啊。好,我们来看一下,首先呢,需要先去引这个包。
10:00
好,引完这个包之后呢,你就会发现它就提供了啊mustache。这样子的一个全局对象。我们可以运行一下。我们来看。哎,这个对象啊,就master大是提供了,好,那它上面呢,实际上是有这个render方法的,Render方法是非常有用的一个方法。好,那咱们现在呢,就需要用mustache。对吧,点render啊好,它的两个参数,第一个参数呢,是模板字符串,我们给它定义出来。Template ST是吧?哎,模板字符串啊。好,那他的模板字符串呢,我们就可以啊,从之前的案例当中,我们就可以给他啊复制出来。好,当然了,这个时候我们要去给他补一个,比如说连个ul咱们都可以补出来啊。然后。哎,我们要去循环,循环的话呢,那就井号AR。
11:01
在AR。对吧,这就能循环了,然后把这个力搁进去啊,搁进去之后呢,这里边是双大括号,直接内幕就可以。哎,不需要打点啊,非常的简单,这个也是内幕。这个呢,是。这个呢是H。啊,这个是H。好,那这个实际上模板标记呢,就是循环。啊,井号AR就是循环的开始啊,斜线AR呢就是循环的结束。是这样子的。好,那么第一个参数就有了。第二个参数就是数据啊。数据的话,咱们也从之前的案例复制过来。哎。那就二者合一了啊,就都够了。啊,那么模板字符串也有了,咱们这个数据也有了,那现在它生成的就是咱们的最后要的这个do的字符串。
12:01
哎,最后它生成的就是倒字数差,咱们可以看一下运行结果。诶刷新啊,但它并没有啊,并没有因为这个data有问题,你这个data它实际上循环的是AR对吧,所以这个要给他加一个AR啊这样。因为它这循环的是A嘛。啊,我们要data是个对象,是个AR嘛,然后给他这样子啊,这样子弄好,那你可以看见它是不是就好了。对吧,哎,这个ul啊,这个ul。啊,然后里头的循环了三个力,小明的,小红的,小强的,诶很神奇,为什么呢?因为我们确实没有在JS当中写负循环。啊,我们在这里没有写负数循环,咱们刚才的这个,呃,ES6的反引号法,你看还在写负数循环呢,还在拼这个HTML呢,对吧。模板引擎呢,它就给你封装的更好,这个井号AR和斜线AR对吧,它就告诉你这里边儿的东西呢,能够循环啊,循环几次呢,就要看数组的长度,数组现在有三项。
13:13
诶,数组现在有三项,那我们现在是不是它就会循环这三项啊,循环这一项两项三项。对吧,哎,循环这三项,那循环迭代这三项的话,那循环迭代这三项的话,大家是不是会发现一个,呃,很有意思的一个现象,就是他把这个模板引擎它这块封装的就很好,就如同咱们以后要说的这个编译啊,就模板编译就是V-four这个指令似的。啊,非常的好用。但是呢,它现在生成的是模板字符串,而不是一个DOM字符串,这个DOM字符串现在并没有显示在页面上,那只差一步了,哎,就是我们再给它放一个,比如说container放一个容器。啊,然后我们把这个do加进去就可以了。对吧,哎,那我们就把container,我们先得到get by ID啊。
14:05
然后我们让这个container inner HTML就等于do就可以了。姆啊,写错了。哎,他就进去了。非常的好用。好,那么这就是一个它的一个最常见的循环啊的使用,那我们继续看PPT啊,它还有别的使用方法。那它还可以不循环啊,不循环就非常简单了,比如说写一个叫我买了一个thing好mood啊这样的一个模板。啊,我买了一个东西好心情,Mood是心情的意思,那这个时候我们直接把一个对象,Thing是华为手机,Mood是开心,哎传给他,那这个时候他就会返回,我买了一个华为手机好开心。对吧,哎,就是不循环啊,不循环好,那这个时候我们来看一看啊,这个第一个就是循环啊,这个对象数组。
15:07
好,我们另存为零,五号案例叫不循环。不循环。啊,那不循环就很简单,就这块儿就直接来一个对吧?哎,来一个就是非常简单的一个模板啊一。叫我买了一个,呃,我买了一个这个C。啊,好木的呀。是吧,哎,那这个地方呢,我们就可以写data,告诉他thing是什么,Thing是一个华为手机,好mood呢是开心。这样的。啊,这样子的华为手机开心。嗯,对吧。这样子的啊。我买了一个S,好木的呀。嘿嘿。啊,这样子,那这样的话到姆呢就能够。
16:01
同时要他,要他。对吧,诶一定记住render啊,一手拽着模板字符串,一手拽着数据啊,然后能够把这个数据完成注入。哎,那这样的话,你就会发现。是吧,这是这个字就合上了啊,没有问题。好,那么它还可以循环简单数组。比如现在我们要循环苹果、鸭梨,西瓜这个数组,注意这个数组现在呢,它并不是那个一个对象数组啊,就是这个数组当中的每一项都不是对象,都是普通的字符串。那么这个时候在循环这个数组的时候呢,我们只需要写点。哎,写点表示它的每一项就可以了。啊,叫循环简单数组。好,我们把这个试一试啊,写一个点。这个叫循环简单数组。零六。好,那循环简单数组的话,我们在这里就可以,比如说直接写一个ul。
17:03
啊杠ul。然后呢,在这里呢,写一个力杠力好,那这里实际上就要去循环AR。然后我们把这个双大括号点写进去。啊,那你这个数据当中呢,这个数组它就是一个简单的,比如说ABC。哎,那这个点就表示像啊,你这不能写name了。为啥呀?对,因为这个数组不是对象数组啊,没有内幕属性,所以点就表示这个项本身。啊,然后底下呢,又是传数据,传数据传模板字符串,模板字符串数据啊,然后写在网页上。哎,那这样ABC就能循环出来啊。哎,没有什么毛病。对吧,哎,没有毛病啊。好,然后它这个数组呢,还可以嵌套啊,咱们来看一下嵌套的情况啊,咱们写个零七。
18:01
哎,叫数组的嵌套。啊,数组的一个嵌套的一个情况。哎,什么叫数组的嵌套呢?咱们来看一下这个数据啊,这个数据比如说我们现在是一个数组套数组的情况。啊,就比如说这个数组当中,你看我们再去写,哎,第一个name,比如说等于小明。然后呢,他的age是12岁,然后我们可以写他的hobbies。啊对他的爱好,他的爱好呢是游泳。对吧,哎,然后羽毛球。啊,他喜欢游泳和羽毛球。对吧,哎,然后呢,是小红还有小强。小红11岁,小强13岁啊好小红呢,喜欢编程啊,还有呃,写写写作文啊啊,然后还可以喜欢这个,呃,看报纸是吧?诶。好,然后小强的话呢,他就比较喜欢,比如说啊打台球。
19:03
啊,他就一个爱好吧。那现在呢,就是数组当中有对象,对象当中呢又有数组的情况。啊,是这样子的。那么在这种情况下呢,实际上啊,我们的模板呢,也能出色的完成工作。哎,模板也能出色的完成工作啊,那我们这个时候这个模板怎么办呢?那很简单。就是呃,外层是AR对吧,那这个时候里头呢,实际上就是内幕。啊内。啊,然后就会写的爱好,是啊,我们可以再去。对,可以再去创建一个这个列表,或者创建一个无序列表也行啊,再去创建一个无序列表吧。啊啊,有序列表说错了啊好,然后在这里呢,再去循环,这里循环谁呀,是不是要循环hobbies呀。对吧,循环这个hobbies。啊,那这里是不需要用item打点的啊,因为呃,Must touch的语法就是这样子的,它不需要打点,哎,直接写井号。
20:07
好,然后呢,这里斜斜线就行。那这里呢,又是一个力,所以它是一个嵌套啊,然后里头是普通的列表项,所以打点就可以了,这里打点,因为这是普通的一个数组项嘛,对吧?哎,所以他这个时候就形成了一个非常方便的啊,就是数组的嵌套,所以呢,咱们啊,咱们先看效果吧。哎,这个效果就OK,咱们看一下。对吧,小明的爱好是两个,小红是三个,小强是一个啊。所以你现在就会发现模板引擎确实好用啊,就是说呃,它确实是省掉了这个循环啊,呃,那么你可能认为解负循环不难,但是你发没发现当这个呃,就是模板这个复杂的时候。你写for循环的嵌套,当然也可以完成问题,对吧,你写for循环嵌套啊,也可以完成这个这个问题,可是呢,当这个复杂的时候,模板引擎肯定还是最简单的。
21:06
对吧?哎,模板引擎肯定还是最简单的啊,所以这个是呃,一个非常非常有意思的一个事情,就是这为什么要用模板引擎啊,就好比咱们v v vuee框架当中是不是V-for和V-four是可以嵌套使用的,对吧?所以这个就说服你了啊,有同学可能说老师ES6这个啊就很好用。哎,ES6这个就很好用啊,ES6这个for循环啊,它这里头拼接这个字符串就很简单,但是如果这里头再有循环语句呢。那是不是就懵了啊,所以说还是模板引擎是最好用的,就是它不用让你去纠结那个循环语句的那种嵌套啊,非常非常的好用,对吧?哎,所以这种嵌套是可以的啊。好,我们也看见了PPT上啊,哎,也把这个数组的嵌套啊给整理出来了啊。
22:01
好,那么呃,最后咱们再来看一下,就是马touch库呢,也可以用布尔值啊,就是显表示跟咱们那个V-if类似的功能。就是如果你这个井号后边是个布尔值。你看布尔false或者true,那么这个时候呢,它就可以决定这个井号和这个斜线啊,这个里面,哎里面啊,大家注意看。那内容是否显示啊,所以你看这个一现在是不显示的,为什么?因为这个M现在是false。对吧,哎,M是false啊,所以这个就是一个布尔值,好,那我们现在可以把这个布尔值咱们也给当个例子给大家加上去啊。咱们来试一试布尔值。好,布尔值的话,我们来试一试,比如说啊,当然它不能写复杂逻辑啊,大家不要去写什么,呃,就是当前的这项,什么百分号二等于等于零不行啊,就是mustin touch,它是不能写这个,呃,表达式的啊,就它的双搭括号中是不能写表达式的,咱们给大家说一说吧,比如说它是不能够直接算,连一加一都不能算的啊。
23:08
对吧,哎,双大括号一加一,他连这个一加一都不能算的。咱们可以看一下,它是没有反应的啊,没有反应的,并且不但没反应,哎哎,它也不报错啊,它是没有反应的。对吧,哎,这个A后边这二算不出来啊,所以mustin touch它是一个啊,逻辑很弱的,这样的一个模板引擎,它不如vuee啊,所以vuee的话,咱们不能先学他,不能先去学vuee的模板技术,因为他确实比master touch要复杂,一定先学简单的东西啊。对吧,Master是一个简单的东西啊。好,所以呃,这个里头呢,你看它没有这种语法啊,那我们最后看一下这个。啊,就是它的这个。布尔值啊,井号M。好,然后这是杠M。哎,然后你好,那这里呢,我们M如果是true。啊,你好,是能看见的,如果这个M是false的话呢,你好是看不见的。
24:04
对吧,看不见的话,你就会发现这个body container当中呢是没有的啊,诶它是有的,它其实是display的。发现了吧,啊,它是的啊。Dis down是什么意思,是不是叫隐藏啊,不过他这个隐藏的话呢,呃,即使你把它这个Dis都去掉。啊,你发现没发现那个H1还是没有。啊,还是没有,所以他这两个只是模板的一个占位的一个东西啊。哎,那本质上讲你懂的对吧,它就相当于咱们的VE中的V-E啊,这个一就没有上树。嗯,那么这个几个案例呢,咱们就讲完了,就是master的一个基本使用,大家一定要注意啊,这个双大括号井和双大括号斜杠是一对的。啊,它一定要在循环的时候,要有开始就有结束,这个大家一定要注意啊,然后并且还要注意什么呢?就是反引号,咱们不是ES6才有吗?那咱们之前就没有这个反引号。
25:02
啊,就在咱们呃呃,这这几年之前,肯定就没有这个反引号,只能有单引号或者双引号,那这个时候你就会发现它就不能换行嘛,咱们说过。那这个时候这个模板字符串怎么办呢?对,有神人啊,告诉你了,他可以写在一个script的标签中。啊,写在script标签中,然后它的type呢,可以是乱码。啊,只要他的type不是text的杠javascript,哎,那他就不会被当做JS来解析。啊,所以他这里头就可以加上一个template。那这样的话就表示这里的内容呢,是模板啊,这里是模板。我可以把模板搁到这里头啊,那这里头你随随便写它是不会报错的。啊,并且也不会被页面上显示,咱们再看一下零四号案例啊。你看他是不会报错。然后呢,呃也不会,就是呃造成任何的错误,也不会执行这个代码。
26:03
啊,这里头哪怕你写JS他也不会执行,不会执行也不会显示出来,因为你这个script标签表示脚本啊,那浏览器会说,诶,你这个脚本是这个脚本,这个脚本我不认识。啊,这后边你可以瞎写啊,对吧,哎,我怎么给摁错键了啊。你可以瞎写,就只要这里不是T的杠javascript就行。啊,Javascript就麻烦了,他就执行了对吧,那一般来说可以写temp temp类表示模板啊。那这样的话呢,就有工程师非常聪明,就可以把这字符串搁进去。看见没有?就搁进去,然后可以给他起ID。啊,就搁到这里头,那搁到这个script标签里头哈,它好处呢,你看它是不是有智能感应这个标签还是红红绿绿的。对吧,非常的有智能感应,并且打起来也爽,div.box你看它就能生成就很快。啊,然后呢,这里边的这个。
27:02
呃,东西又不会被当做JS执行,就相当于我们现在找了一个不会显示在页面上的,也不会执行的一个容器,存储了这个模板字符串。啊,你说这是谁想出来的,真是个天才。对吧,谁想出来的,真是个天才啊,那这样的话我们就不用这个反引号了,我们就可以直接让他从呃,Document的my get啊。My template。哎,当中去读那HTML不就行了吗。啊,就是读这个script。这个script当中的啊,内部HTML代码不就行了吗。哎,那这个案例你看刷新就好了。啊,然后你要改模板的话啊,比如说要在这里写个哈哈,你看他这还是能改的。啊,所以这就解决了反引号的问题,就是你可以用这样的一个地方来去存储模板字符串,对吧?诶是不是很巧妙呢?啊,用这样的一个地方去存储模板地图串啊type。
28:08
啊,非常非常的巧妙。它是一个很好很好的这样的一个啊,一个这个东西啊。好了,那么这节课呢,我们就通过了几个案例啊,来给大家简单的介绍了这个must touch啊,它的一个基本的使用,大家会发现其实呢,就是一个方法,就是must render。对吧?哎,Master render啊,那你就会领略到在VE的V-for之前啊,我们的世界。这个模板引擎。啊,我们的世界到底是怎么样子的?好,那么下节课呢,我们就要探求不是用它了啊,而是它的底层激励啊,啊,叫探求marin touch的底层激励,哎,然后呢,在下节课我们就要开始着手去书写marin touch的一个底层了啊,着手去书写马in touch的一个底层了啊。
我来说两句