00:00
好的,那么关于我们这个类啊接口啊,呃,这个抽象类啊,这些东西我们暂时呢,先说这么多,那接下来呢,我们来进入到我们下一个环节啊,我们来做一个这个小的练习,通过这个练习,我们来巩固一下我们这个TS这个知识,那么TS的话,其实它还有很多很多的东西在里面,但是嗯,有一些东西常用,有些东西其实它不是那么的常用,所以我们学习TS主要是现在来讲,如果你是第一次接触的话,我们重点在于什么呢?重点还是在于学会用TS啊,你要能知道怎么把TS去引入到你现有的项目当中,引入TS以后有什么好处,我怎么用TS思维去写这个代码,这些东西是非常非常重要的,因为你说我这TS,我这整的特别明白了,但是呢,我不会用TS去写我现在项目的代码,那你学完了没用,二一个你说我这个TS我学会了,但是我写代码的时候。
01:01
我的确是用TS写的,但是我用S写的时候,我用的还是GS的思维,那这样TS他也没用,所以我们必须首先要学会用TS,然后要学会TS的一个思维。呃,那么怎么才叫以TS的思维去写这个代码呢?这个话题它很大,我们不可能一下子给它说清楚,那我们要学会它的话,我们就需要通过练习去去巩固这些东西,那到底怎么样是TS思维,那简单总结起来,其实最简单的层面去讲吧,其实就是一句话,任何东西,所有的东西都要写到某一个类里,写什么代码一定要先写类,不要像我们写GS的时候,我直接在全局作用语里,我写个变量,写什么东西不要出现那种情况,任何代码一定要都有它的这个类,所谓面向对象,所有东西都要通过这个对象,那下一个问题就是这个对象我们要如何设计,所以他这个东西其实我们关键是所谓的TS思维,其实主要还是在于我们这个面向对象的思维,好了啊,我们废话也不多说了,我们直接来整就行了,你们现在主要还是把这个TS给它用。
02:17
用熟了,用熟了啊,然后我们再慢慢的一步一步的去,诶提升好,那我们这回要做的一个练习的是这么一个小游戏,叫做这个贪食蛇啊,我们很熟悉的一个游戏啊,很简单,并不难,但是的话叫麻雀虽小,五脏俱全,虽然很简单,但是我们也是把它当成一个正式的项目。去认真的去去完成它,那我们要做这个项目呢,首先我们要做第一件事儿,就是我们需要先完成对这个项目的一个搭建,所以在这儿呢,我们来先来新建一个项目。你有一个product,那这个的话是我们的这个叫做什么呀?诶这个叫做chas,就我找一下吧,这个叫做我们在哪呢?我确定一下叫做chapter,呃,零二里边CHAPTER02里面我们叫做一个什么呢?诶叫做一个part two啊,零二里边的第二个部分啊,第二部分我们直接在这个当前窗口去打开,那这个呢,就作为我们的这个项目来来使用。
03:20
好,那项目创建完了,那我们接下来要对项目做一个搭建,我们说了要把它当成一个正式的项目去做,那正式的项目我们当然离不开这个webpa,用这个we,我们需要在它里面去引入一系列的一个工具,那我们来,那我就不再一个一个去了,因为我们之前入过,所以我直接把我们之前写的那个配置文件我给它找到,在哪呢?在这个code里边,我们这个拆零一,我记得是PART3,我们写过几个啊,我把这几个配置文件CTRLCCTRL给它粘过来,所以之前写过了,我们就不要再写一遍了,哎,改吧改吧,我们这就用了啊,那这里边我们看一下,首先看一下packageson package认的还叫part three,这这这我们改一下,改成part two,当然你改的话,我这块是分成了第一部分,第二部分,你在改的时候呢,你可以不这么写,你可以直接写什么呀,写这个项目的名字,比如说我们这个项目叫snake,你可以就直接写name呢,就叫做这个哎,Snake。
04:20
根据你的实际情况去去考虑,然后ts con呢,这块倒是也没啥可可说的,唯一我想加一个就是那个no I mean on error,就是有错的时候呢,不要给我进行编译,那这样避免我们这个错误代码被打包啊,被打包那好,那这样的话,我们这个整个这配置文件其实基本上就是这样了,然后呢,我们来下载一下它的依赖,下载依赖的话,我们可以在这直接执行NPM音store或者NP mi,直接把它这个package里面的所有依赖给它下载下来就OK了,那还有一个选择可以用这个CNPM,那我个人建议的话,在我们这个web里的话,尽量免去使用CM,因为我我我们我发现的话,其实当我们用CM去下这个以后的话,呃,可能是由于CM是一个镜像服务提供的文件,它的相对来比下载完个相对来这个乱。所以如果你用的是CM下。
05:20
依赖的话,会出现一种情况,就是在这个web STEM里边,它会一直,它会左下角这有一个小圈,会一直转,一直转,显示一直在做这个文件同步,文件同步一直在转,一直在转很久很多都转不完,所以的话用用CNPM会带来这样一个问题,但是用这个NPM就没有这个问题,所以我建议你们用的时候直接就执行NP mi就可以了,所以我就直接进入项目回车NP mi,让它自动去下载依赖啊,当然你说老师我用的不是web,我用的是这个we code,那你用那个东西没关系,这个可能算是web里边的一个小bug啊,用的时候注意一下就行了,如果你仔细看的话,其实我在做那个之前那个项目,实际上它也存在有这个问题,就是它会一直转一直转啊,这种情况出现。
06:12
啊,我们这个包啊,它稍微有点多啊,稍微等一下,让他去下载一下啊,下载一下NPM当然没有CNPM那么快了,所以你们用NPM的时候,诶,别着急,慢慢来,反正这东西也不是老下,我们就是搭建项目完了以后下一套就行了,OK,这个包呢,现在我们就已经下载完了,Notedus这是已经有了,还有一个小技巧,你说老师我不愿意输命令,不愿意输命令啊,你可以右键点那个packageson,它这是不是有一个run NP啊,哎,你可以用这个图形化命令方式去点它也行啊,也行,然后搭建完了以后我们来试试啊,试试在这里边我们创建一个SRCSRC里边我们先创建一个网页的模板,我们叫做一个index,在这里边呢,我们叫一个贪食蛇。
07:00
贪食蛇,然后呢,在它里边我们再创建一个新的TS文件,我们叫做一个index.ts诶干嘛呢,随便写点代码啊,来一个123.1个log,诶随便写点代码干啥呢?试一下好不好使。来个123啊试试干嘛呢,好不好使,你看然后呢,我们直接执行一个n PM run,一个build啊run build对我们项目进行一个构建回车。哎,还是稍微的等一下。打包完了以后,如果没问题的话,它会生成这个Dis的文件,我们来看一下,OK,那这样我们这个文件是不是就等于已经编译成功了,诶编译成功了,我们这个项目的基本结构在这里就已经,诶没有问题了啊还有一种编译方式就是你可以右键点这个package Jason,它有一个这个。Package杰森有一个这个run就是受n PM scripts,你点它的话,它可以显示出你所设置的命令,然后你想执行哪个去双击哪个就可以啊,多种方式根据自己的需要去选择啊好,那接下来我们再来看。
08:08
其实呢,你会发现,当我们这个项目搭建过一次以后,我们下次再搭建的话,这个工作会简单的多得多,诶,会方便的多得多,会非常的省事,但是的话,其实我们次搭建那个项目的话,它并不并不完整啊,并不完整,为什么并不完整呢?因为我们上次去搭建这个we t,在我们真正写项目的时候,还有很多其他的外部资源,像图片啊,像这个这个这个CSS啊,这些东西都会涉及到,我们今天做这个练习的话,它不涉及到图片,但是一定离不开这个CSS。但是呢,我们现在的webpa当中没有对这个CSS的一个处理能力,所以接下来我们要在我们的webpa里边去引入一些我们这个CS,那现在的我们其实用C个CSS一个预处理的一个语言,像呀ste点,那这里的话,我这次我选择的是这个lesss,你说老师我想用别的,用别的话你可以自己去查一下怎么配置,其实啊,基本套路都是一样的,没有什么太大区别,你把这个lesss掌握了,其他的C呀S其实是一样啊一样,那这里边我要配置lesss的话,还是需要先安装我们一个依赖NPM。
09:52
ER是加载器,ER把我们这个心的工具,我们的we进行了整合,等于通过它把我们这个两个工具连接到一起,然后我一个CSCS是一个我们这个CS引入到我们这个项目当中的啊style直接写完了以后直接一回车,这是我们安装的,这一共是四个四个包啊,四个包装完了啊上现在装着,装完了以后肯定我们这儿要去改我们的配置文件,之前呢,我们的这个webpa的配置文件,我们只对TS文件进行处理,那现在的话,我们又需要对这个这个叫一个CSS或者叫lesss文件进行处理,所以呢,我们在下边我们需要添加一个新的规则,新的规则这是干嘛呢?这是来指令设置我们这个lesss文件的一个处理,Lesss文件的处理,首先我们先写上它的一个test。
10:52
T的,我们写一个智能表达式,点一个诶,Lesss,诶,Dollar符,也就是凡是以这个lesss结尾的文件,我们都通过我们这个规则去处理,然后呢,我们来指定一个右子,也就是我们要指定哪些这个,诶这些loader啊,Loader我们这儿一共的话要指定的是。
11:13
三个三个loader啊,现在来讲第一个loader我们要用的是一个less loader less loader,这是我们要用的第一个,他先处理它,处理完了我们来使用这个CSS loader,注意啊,我们这个loader的执行顺序是从下向上执行的,从下执行,所以你现在像我看我配置这个顺序,它就是先执行less load,然后执行s s load,然后执行这个style load,它是这么一个顺序,所以你写的时候一定要注意,你想先执行这个一定要写到最下边,所以现在我们的less文件就是先经过less load,再经过s load,再经过style load,最终的话引入到我们的这个项目当中去啊,那好,那我们来看看这么配置完了生没生效,怎么看呢?首先我们先把我们之前那个网页啊,这是我们之前编辑那个网页,我们给它运行起来。
12:02
运行起来,为什么要运行起来呢?我们要对比一下,看看它这个效果啊,看看我们这个样式到底生没生效,来现在没有样式了,啥也没有对吧?来在这里面src里边我们创建一个新的文件夹,我们叫做一个style style里边我们创建一个CSS啊,样式表我们叫一个index,但是我用的是less,所以index.less在index点里边我们设置一些简单的样式,比如说我就给包设置一个背景颜色号,一个BV,但是注意啊,我这么设置完了以后,我即使编译了这个样式也并不会效,因为我们没有网页入个,所以回到这个index.t,我们来引入这个样式。引入我们样式,引入样式一样的,也是引的,诶impport的谁呢?诶点鞋盖下边的style下边一个引ex.less来引入我们这个less的一个样式,引入完了它就会生效,生效我们这是不是就会看到一个绿色的背景啊来我们重新对它进行一个编译。
13:03
NPM一个build,首先我们先看看编译能不能成功,编译要能成功,我们刷新一下页面,看看我们这个代码能不能跟着就诶就生效了啊,别着急,诶好,编译成功了,然后在这儿我们刷新一下。诶,是不是样式就生效了,那证明我们这个lesss这个东西就已经我们所配置的这一系列的这些,呃,加载器就已经,哎产生作用啊产生作用了,但是呢,这还没完事儿,实际上呢,你如果之前用过webpad的话,你会知道我们这个在打包这个CSS的话,Wepad它是默认把这个CSS是整到什么呢?整到我们这个GS里的,也就是样式实际上是通过GS设置的,所以你要想看到你的样式打包后的样子,你需要看这个帮的点GS里边找到这个样式,这个东西是不是在这儿呢?诶在这呢,好,那是我这说的要说的一个什么问题呢?就是我们之前去引入完,引入完GS,我们需要整一个Bible Bible干嘛呢?Bible帮我们来处理我们这个GS代码的一个兼容性问题,有了Bible以后就可以使得我们的新的,诶,新的语法在旧的浏览器当中它可以支持,那CSS同样也面临这样一个问题啊,我这4S。
14:18
4S33的可能有一些浏览器不支持,或者有一些浏览器里面语法要求比较特殊,那我这里面我怎么能让这些旧版本的浏览器或者语法不一样的浏览器能兼容我的这些样式呢?所以引入这个Les以后,我们还需要在我们webpa当中添加一个和这个Bible类似的一个东西,这个东西可以对我们的CSS代码进行转换啊,也就是它可以把我们新语法转换成一些旧语法,最典型的其实就是我们这个这个CS样式的一个前缀,因为我们这个历史的遗留问题,有一些样式,有一些CSN的样式,在一些旧的浏览器里面,它需要使用这个前缀,而这个前缀我们要自己加会很麻烦,那这些事儿我们就可以交给我们这个post CS去做CSS,对于CSS,就像Bible对于这个GS来来一样,它可以把我们这个CS语法,哎,使得。
15:18
他们这个新版本的CS语法去尽量的去兼容这个旧版本的浏览器,那这样就使得我们这些样式有一个更广的一个什么呀,诶应用的一个范围我也不废话了,我们直接来配置啊,那这里边我们要用这个PSCSS还是需要安装一下它的依赖啊,NP mi,杠D需要这么几个,第一个是PSCSS,它的一个核心工具,第二一个你猜应该也能猜到了,叫做PSCSS,一个loader是pss,一个加载器都是这个套路,一个核心的一个是加载器,然后还有一个,因为我们要涉及到兼容性问题,所以我们这还需要引入一个pre pre env,看着是不是特别眼熟啊,Pre预定义的预制的environment预制环境,Pre environment就是一个预制环境,所以这个插件的话,是表示我们PSCSS里边给我们提供的一个这个这个浏览器的预制环境,那就是你想让你的代码兼容哪些浏览器它。
16:18
在这个环境里,可以给你去一些设置,写完了以后直接回车自动性安装啊,装着我们不着急,装完了以后肯定还要改我们的配置文件,它实际上引入的就是一个加载器啊,引入的就是一个加载器,那这个加载器呢,就叫POSCSS,我们这个posts CSS,我这已经有三个加载器了,我这个posts CSS应该写到哪呢?诶应该写到lesss之前,CSS load之后,为什么呀,因为我们在lesss把我们的代码转换成CSS以后,我们就要立刻的处理它的这些这个这些兼容性的问题,加前缀呀,这些东西,然后再交给CS,交交给stylelo去处理,所以在这儿我们需要去引入我们这个POS的CSS,哎,PSCSS呢,我们这里边要怎么引入呢?它的话。
17:06
你像我们前面几个loader,你直接写一个字符串就直接引入了,而这个post c ss这个加载器,我们需要对它进行一些配置,所以引入起来稍微有点麻烦,我们需要传一个对象,诶对象loader呢,我们刚才已经说了,Loader的话就是PSCSS的一个loader,哎,直接写上它就行了,然后下边我们需要对它进行一个配置,我们要写一个这个options options里边这些就是固定了,叫做一个post的CSS op叫做options post CS配置,注意啊,这个so是大写的,千万别给成小写,整成小写的话,它这块可能就编译不通过,就该给你报错了。然后下一个我们要指定的是我们post CSS当中我们要使用的这些插件,也就是plugins plugins是一个中号,中号里边我们在指定具体的插件,我们要用的是什么呢?第一个我们要其实我们只用这一个,就是我刚才下载那个post CSS的一个。
18:07
Pre的一个V预制环境,然后下边一个我们来设置一下我们这个览器,哎,啥玩意儿跟我们这个一样,在这儿我们来配置一下我们浏览器的一个信息,也就是你要兼容哪些浏览器,它比Bible稍微简单一点,它直接传个字符串就行了啊拉斯特诶2VERSUS。啊,也就是last就是最新的二就是两个S就是版本,就是兼容两个最新版本的浏览器,就是每每就是每一种浏览器的当前的最新两个版本,就是也是相相当于IE11IE10这些浏览器嘛,比较新的,那这样的话,等于其实就包含我们这个主流浏览器的,你说两个不行,你就写三。三你说三点多你写一个也行,根据你自己的需要来,这一块我就不细说了,不耽误时间了,那你说你说老师我不理解,不理解可以看一下的CSS的知识,你说老师不行,我还不理解,还不你给我记住了,完事了,这个我这个格式适用于我们大多数情况,先这么用就行了,后边有什么需要改的,我们再去做处理好,那这一块就写完了,我们再重新对我们项目进行一个编译啊,诶n PM run build重新构建一下,那这里我们就直接看G。
19:26
哎,现在的话我们看不出来,忘了一个事儿是吧,现在我们看不出来,我们先写上啊先写上。好,现在我们这块就已经编辑成功了,因为我们现在这看不出来,为啥呢?因为我这个index.less里边啊,现在我只设置一个背景颜色,背景颜色呢,它不设及兼容性的问题,这玩意儿任何浏览器它都支持,所以我可以设置一个什么呢?相对来说新一点的,比如说我来一个display flag,我设置一个弹性盒模型啊,设置一个弹性盒,这个弹性盒是需要加前缀的,我们来看一下POSCSS,它会不会给我们处理。
20:02
哎,我在这儿呢,给它打开一下看看效果。哎,这里边文件呢,我们看看。刷新起来似乎有一点点慢来,我给它关掉,重新打开一个帮点GS。看一下你看display Ms,诶,Flex box,你看这什么display web k box displayle,你看是不是把我们这些东西都我加上,这些前缀是不是家都加上了,那这样的话,其实兼容性的问题我们也就解决了,全都交给这个CS己去主动的去帮我们去处理,我们就省事了,好那到此为止的话,我们这个项目就已经搭建完了,也就有了这样一个项目的一个基本结构,那这种结构的话,不仅仅适用于我们当前项目,你别的项目的话,其实也可以考虑去使用这个,当然我们现在由于我们这个项目没有涉及到外部资源,图片啊这些东西没有涉及到,所以我们现在还停留在这个GSSS这些东西上,有外部资源的话,那我们需要再引入一些加载外部资源的一个加载器,那套路都是固定的啊,所以这种东西的话,你千万不要觉得它麻烦啊,觉得它难,套路就那么些,这个东西就是。
21:24
熟能生巧,用多了自然就会了,好,我们先停一下,你自己呢,来把这个项目那个给他搭建一下,待会儿呢,下节课我们来正式的去讲我们这个项目啊,一步一步的,我们把它给写完啊,我们来听一下。
我来说两句