00:00
好的,同学们做完练习之后呢,我们说一些定义性的东西,打开课件,我们说这么几个啊,块与组件,模块化与组件化,诶怎么去理解它们,首先呢,我们先看一个东西叫做模块,同学之前咱是不是学过一个技术叫做GS的模块化呀。那其实所谓的模块化呢,就是把一个庞大的GS拆成很多份,对吗?哎,你比如说啊,原来我有一个GS啊,名字呢,比如说叫做index.js,这个里边呢,有很多的业务逻辑,然后随着我的业务逻辑增加呀,这个JS里的代码就会变得越来越多,而且越来越复杂,后来呢,我们想,诶,根据呢,它每一段的功能点,我们把它拆成a.GSNb.JS还有c.GS然后不同的GS呢,负责不同的具体业务啊,或者说一部分独立的功能。
01:04
诶,这就是JS的模块化,来吧,简单理解一下,向外提供特定功能的JS程序就是一个模,这说的吧,就稍微诶有点绕口,我们通俗易懂点说,那就是一般一个点JS文件就是一个模块。啊,那再往后看,为什么要拆成拈呢?因为随着业务逻辑的增加呢,代码会越来越多,而且越来越复杂,对吗?哎,那么第三个咱再说说它的作用,就是拆成模块之后呢,你能复用GS,而且能让每一个GS都不至于那么的庞大,那最终呢,哎,就是提高GS的运行效率,那这就是拈,所以说在前端人员的嘴里说拈,那其实那是一种简称,全称呢应该是GS模块,对吗?一提模块那就是GS文件,OK。哎,那同学你说咱们学完了GS模块化这个技术之后啊,诶,好像我们就遇到一点复杂的GS,就想把它拆成很多份,然后再按照特定的方式再把它组合到一起,对不对啊,那这只是拆谁呀?只是拆谁,是不是拆GS?哎,那接下来呢,我再提出一个概念,比模块要再高一个等级,叫做组件。
02:28
哎,这个怎么理解呢?我们先来读一下组件的定义,用来实现局部功能效果代码和资源的集合,比如说al CSS JS,还有图片、音视频等等这些说老师,那这怎么理解呢?这句话有点绕口,那我说一下同学往下看呢,我给你准备了一个页面。同学,咱之前去写这个页面布局的时候呀,咱是不是把页面划分成不同的盒子,你比如说hi区。
03:03
左侧导航区所有分类区啊同学,我所画的红绿蓝这些是不是都代表你之前写HTML的时候不同的div呀,对吗?那按照我这么划分这个区域,这个区域还有这个区域,那都是咱们之前在对什么进行一块一块的拆分呢?是不是HTML啊,那其实所谓的组件呀,同学就是拆的更狠了,哎,什么意思呢?学了GS的模块化会拆GS了,HTML呢,咱说是盒子布局一块区域或者一块大的功能点,你就比如说头部导航,那就是一个盒子,然后再把头部导航相关的GS是不拿出去,哎,拆成一个头部导航,比如说hier.GS是吧,之前咱一直这么做,那么组件就是拆的更狠了,那怎么理解,就是你头部的这个区域。
04:06
你实现头部这个区域的结构样式、交互、图片、音视频、字体等等所有的东西,只要是实现头部这块功能的全都带走,那么这些东西组合在一起,就形成了头部这个组件。所以说,如果说模块只拆GS,盒子布局只考虑atml,那么组件就是所有实现头部功能代码加资源的集合都整个打包带走,这就是组件。哎,那所以说同学们,现在大家有没有一个体会,为什么我们要进行模块化开发和组件化开发呢?之前你进行模块化开发,想把GS啊达到一个更合理的划分,更高效的利用,那么组件化开发其实就是说我想让很多的组件得以复用,你就比如说啊同学这个里边是一个小分类,这是一个小分类。
05:16
同学,我们之前写这个页面的时候,是不是写好一块的结构,哎,写好这一块,然后呢,CTRLC,然后CTRVCTRLVCTRLVCTRLV是不是一直粘贴呀,那是你之前的复制粘贴操作,那么如果你在这个里边应用了组件化编码的技术,那大家注意看了,你把这块呢写成一个小组件,然后所有用到这种类似结构的地方都可以把这个组件给它引入进来,那你唯一需要做的就是替换一下组件里边这个图片的地址,以及下边的这个,哎,点赞量或者是收藏量这些东西就可以了。所以说哎,这个组件呢,嗯,就是这么一个定义,我们用它只有一个目的,就是复用你的代码,简化你的编码,提高你的代码运行效率。
06:06
啊,那这有一个为什么,就是一个界面的功能可能很复杂呀,我不可能很多的东西都往一个里面写,对吗?一块儿一块儿的就有点儿什么感觉哈,同学就跟小朋友呢,拼乐高一样啊,你比如说拼一个小人儿,这是啊,头部的这个组件,这是身体的组件啊,再来一个,这是胳膊的组件,腿的组件对吗?哎,那这就是模块与组件。好,那什么叫模块化呢?哎呀,同学,这就是一个字眼的问题了,模块名词组件名词模块化。那就是什么呀?形容词来往下看,当应用的GS都以模块化的方式来编写。好,那来看,当应用的GS都以模块来编写,哎,那么这个应用就是一个模块化的应用,哎呀,就简单来说,你这里的JS如果拆成模块了,OK,你就是一个模块化的项目,那组件化呢?那也很好理解了呀,如果你在写这个项目的时候,你是把一个复杂的功能拆成了多个组件,最终把这些组件一个一个组合在一起,形成这个应用的,那么这个应用就可以称之为组件化的应用。
07:22
哎,那所以说呢,我们以后开发的项目,那肯定都是模块化组件化的项目,那其实后边我们还得再加一个修饰词,过一段就说了,叫做工程化。哎,模块化组件化工程化的项目,那当然现在这个工程化呀,大家还理解不好,所以说我们暂且哎也先不提这东西,就是模块化组件化的像。那OK,大家呢,一定对组件有一个认识,哎,就一句话吧,一拆到底对吧?结构样式,交互啊,音视频、字体全都得整个打包带走,OK,好,那这就是对组件的理解。
我来说两句