00:00
好嘞,各位从这一小节开始呢,咱们来做一个案例,哎,就是课件当中的这个todo list案例,其实这个案例吧,就是我们手机里边的一个功能叫代办事项啊,简单给大家描述一下,就是在这儿呢,你能输入一个事情的名字,哎,你比如说呢,这个事情叫做123,敲下回车就代表我确认了,于是乎呢,这123呢,就出现到这个位置了,后添加的东西是在列表的前方的,然后在这儿呢,还会出现一个勾选框,你勾选上,意思就是123这件事儿你做完了,你没勾选,那就是没做完,你比如说啊,我勾选123,我再勾选这个吃饭,随着我勾选,那么在这儿呢,会做一个实时的统计,你比如说啊各位在这儿全部就不应该是三了,应该是几呢四,那这个已完成就不应该是零了,应该是几呢?应该是二啊,那这是什么意思呀,就是全选,你只要把这个勾一勾上边,甭管勾了还是没勾,全都给它勾上啊。
01:00
全选嘛,那你再点一下呢,那就取消全选嘛,还有就是呢,每一个事情的后边都有一个删除按钮,只要你点这个事儿呢,就被删除了,就是我不管这个事儿啊,它是完成了还是没完成,你只要一点诶我就删除啊,当然你这块删除一个,这个全部是不是也得跟着变呢?啊还有一个小按钮一会儿会出现啊,就是在这儿啊,它的名字呢,叫做清除已完成的,你就比如说我给打代码,我给这个睡觉,他俩勾上,那他俩不就是完成了吗?那你点一下清楚已完成诶,他俩一会儿肯定就没了,留下的只有一个就是吃饭啊,不难,很简单啊,看一下这个动态的演示吧,你比如说啊,我开始输入东西了,随便写一个叫做test啊,敲下回车,诶列表中出现了,随便选一个,比如说睡觉删除它啊,我确定,然后呢,就把它删掉了啊,勾个打代码,勾个吃饭,清除已完成,OK,没了全选再清除已完成,所有的就都没了,就这么一个功能。
02:00
啊,你要说难吧,倒没多难,但是你要真想把它一次性写对啊,还不犯什么错误,也不是一件容易的事儿,其实我们呢,主要是想通过这个案例啊,给大家讲一个东西,叫做组件化的编码流程,并且是一个通用的流程,就是以后你实现的功能可能比我这个还要复杂,你也可以按照这个流程去走,反正建议大家啊,初学者还是按照这三步去走,如果说老师我已经写了很长时间组件化的编码了,那你可以把这些顺序随便的你调整,对吧?哎,你爱第一步干嘛那就干嘛,反正初学者尽可能按照这个去走来同学我们在这一小节呢,先不关注这个第二步和第三步,咱就看看第一步,他说什么实现静态组件,啥叫静态组件啊?来,我先把这儿呢放一下,把功能啊都给你演示出来,然后我再暂停,哎稍等一下,哎停同学,啥叫静态组件,琢磨吧,就是以后我们到了工作岗位上,人家给了你一个需求之后。
03:00
各位最忌讳的就是拿过来就写,想都不想,同学咱就不说组不组建化,你说你正常写一个之前的JA块RY项目,你是不是也得琢磨一下这个盒子之间的嵌套的关系吧?所以说同学拿到功能点之后,第一步啊,一定要分析一下它一共可以拆分成几个组件啊,有些同学说老师我觉得一个组件就行啊,那组件叫什么名啊,老师我就叫做APP,同学这就不太好,你这个写法的意思就是我不管这里边有多少个功能点,反正一堆功能点,一堆结构,一堆样式,全给一个组件叫APP,那同学你觉不觉得你就失去了组件化的意义是不是?哎,所以说得拆,但是拆吧,就容易造成初学者呢,容易拆的太狠,太狠是什么意思呢?就有可能你说老师它也是一个组件是吧,哎,所以说这个度呢,是比较难拿捏的,并且呀,同学他也没有一个绝对的对和错,我拆了。
04:00
四个组件功能写出来了,你拆了40个你也写出来了,那只要能写出来就可以,只不过说有的可能合理一点,有的可能不合理,是不同学,我接下来呢,就说说啊,一个比较合理的拆分是什么样的?来首先说说这儿啊,我觉得这个应该是一个组件,哎,你别看它就是一个input框,但是它能完成一个通用性的功能,什么功能呢?就是添加一个todo。这APP咱就不再聊了啊,各位哪个项目能没有APP这个组件呀,红色的外壳那APP肯定是有啊同学,这个东西是不是能完成添加一个todo对不?哎,那就可以把它作为一个组件呀,其实组件的划分呢,各位是按照功能点来划分的,你记不记得组件的定义了,实现界面局部功能代码和资源的集合得落到功能上,功能点,那给它起个名字吧,老师叫A,能别这样不啊,一会儿再来一个叫B啊同学,按照功能划分,你可以给他起这个名字叫ADD,这没毛病吧,添加一个要做的事儿吗?或者说呢,按照位置你给他划分,哎,有的人也叫这个名字,Hier,对吧?头部的是不可以,哎,那你说我都把这个说出来了,各位也能猜得到了呀,你说整个这个区域是不是应该也是一个组件,这什么组件呢。
05:18
嗯,是不是要展示一个列表啊,或者说要把所有要做的事儿是不是展示出来,哎,那有些同学呢,就叫这个名字todos,我觉得也挺好的,对吧?展示了一堆todo嘛,什么是todo,一个事儿就是一个todo嘛,Todos就是一堆嘛,啊或者呢,你可以叫这名字list列表是不是也行,反正同学你得语义化一点啊,然后下边这块呢,应该也是一个,那你说要是按照位置的话,它应该是什么呢?哎,写上呗,F啊foot对不?各位,所以说你就拆这么三个就挺好的,如果说你想把事情做的更加到位,我给你个建议,你把里边每一个要做的事儿,就是每一个todo,你也给它拆成一个组件。
06:04
为啥这么说呢?各位,就是如果说啊,我这一堆要做的事儿,只是便利一遍,展示一下他们的名字,那你可以不给它拆成组件了,但是你看看各位,就是对于每一个要做的事儿来说,他是不是都可以勾选或者取消勾选,是不是都可以被删除,是不?各位,那你看这是一套,那你看下边这一套和下边这一套,哪怕我有100个要做的事儿,你觉不觉得这套功能是通用的,是一样的,所以说同学它应该也得被拆成一个组件,那叫啥呢?嗯,说老师叫这个吧,叫todo也行,对吧,这边你可以叫todos,这叫todo,但是这边已经叫list了,那你这边是不是可以管它叫item,对不?哎,每一个嘛,List里边的每一个嘛,啊是这样啊,同学你用心体会体会,说有一天你在工作岗位上,你拆完这个组件之后啊,你发现很难给它起名字,那就有可能意味着你这个组件呀。
07:04
你拆的不合理,各位你体会一下,如果啊,我说如果我把这个按钮就这删除按钮和这个顶顶上这个啊,就是输入这个,呃,添加一个todo这个,我把它俩作为一个组件,同学你这个名字啊,就很难拿捏,你说叫什么名呢?你说叫吧,它还能删除,你说叫hide吧,还不完全是头部,它还是下边还包含一块,所以说同学,如果名字你起不出来了,你审查一下自己是不是组件拆的有问题,OK啊,在这儿呢,咱不墨迹了,各位接下来你说怎么办呀,去实现这个静态组件呗,那静态组件是什么意思呀?就是我接下来定义这四个组件,并且在定义这四个组件的时候,我只考虑结构和样式,什么交互啊,数据啊,什么点击事件呢,通通不考虑,因为实现的是什么静态组件,不包含动态的数据,也不包含任何的交互,所以说接下来开始吧,回到我们的代码当中,各位打开刚才写的这个school,这个student是不是都得删掉了,来创建第一个叫做her hi.view好,那在这个基础上呢,我再复制几个,但是你别急啊,我把内容写完了,咱再复制啊,里边这块不知道写啥,先空着,但是最起。
08:23
哎,码这个组件得有个名字h he DR吧,OK,里边这些样式呢,一会儿再说,OK,把这一堆东西给它复制,或者这样吧,我在这儿复制CTRLC,走走走啊,给这个改个名字,它叫做list,那别忘了啊,里边这块也得改叫list啊,那再改这个也得换个名字,比如说叫做itm item,那里边这也得改叫做itm,然后再写呗,还有一个最后一个了,就是footr福特,然后把这个名字呢,给它复制来到这儿呢,也给它改一下,叫做福特,来检查一下福特hier item list OK了吧,同学,不管你怎么写,我问你这四个组件,你是不是得在APP里边引入一下,那APP里边呢,来该清的这些啊,都给它清掉,结构怎么写,我还没琢磨呢,反正我得引入,我得注册,你说对不删掉啊,留一个,这叫he drer。
09:23
那首字母呢得大写,然后这儿呢,各位你看着,有一个坑我得给你演示啊,来scope的删掉,APP里边一般不写SCO的,这呢也删掉,一会儿我们亲手去写啊,这个注册呢也给它删掉,各位你看啊,有一个坑我刻意给你演示一下这个坑啊走components下的谁呢同学到这你就发现不对了。你看我还没怎么样呢,说老师你还没有注册呢,对呀,它就不对了,这啥情况呢,鼠标放在这儿,你读一读同学读哪儿呢,读这。说已经被包含了一个什么文件名,这是啥意思呢?各位我说一下啊,你这文件名起的有点不太合法,为啥说不太合法呢?大家体会体会,在H5里面好像有一个标签叫做he DR,对不?还有个标签h head叫hide对不?各位你琢磨琢磨,这些东西是不是都是HTML里边已经有的了呀?那你说你这边还叫hi点,纵使你这个首字母是大写的,我问各位,咱之前聊过这事儿,是不是也不太合法呀?哎,那所以说呢,各位赶紧换名吧,但是这儿呢,我声明一下啊,有些同学的脚手架呢,可能在这儿啊,就没有检查出来这个错误是不啊,那也不代表说你这么写就是合法的,知道不?各位尽可能回避,那所以说同学你看看你刚才的分析,觉得这样很合理,实际上有坑,那说老师怎么办呀,那要不别叫hier了,叫top。
10:56
啊,叫top也行,反正你别和那个HTML里边内置的冲突就行,但是反正在这儿吧,同学咱就随意一点啊,我就这么写了,叫做my herer,啥意思呢,My hier啊,那你在这儿呢,把它的名字复制过来,里边的这个也得改叫my header,那这块都改成my header了,那各位你应该记得H5里面好像还有个标签叫福特是不?所以说那这就只能来吧各位,走,你叫做MY福特,那把名字呢,给它复制过来,那在这儿呢,给它打开,这会也得改叫my foot,那剩下这些同学你可以改也可以不改啊,你要改的话呢,那就是形式就统一了呗,都叫MY什么什么是不是?同学我说一下真正开发的时候吧,怎么讲你一般不要起这个MY什么什么,开发当中啊,一般是这样的,组件名都是多个单词组成的。
11:48
啊,你比如说你在实现那个个人中心的头部,同学你这个组件就完全可以叫user h herad DR,你说对不?各位点view,这不就没问题了吗?而且同学view特别鼓励我们这么写,View特别鼓励我们就是那个组件名呢,用这个多个单词更语义化一点,但在这我们没啥别的单词了,我就写个MYMYMY行吧,MY什么什么什么啊,OK,在这咱做练习吗?啊,但你在这你非得这么写也行,各位,哎,咱就说你写一个item硅谷headad啊,但这多长啊,是吧,就不叫at特硅谷了,就直接写一个my header就得了。OK,来,这是my foot,这是my header,这是my item,这会儿名字也得改呀,走这块呢,也得改,叫做my list啊,名字来走这回名字都调整好了吧,你给它关掉,这回同学你瞧,引入的时候你看没错误了吧,那这得叫my header走走走啊,这几个也给它引入,那这块换一个啊,叫做什。
12:48
那hi之后啊,是那个list my list,把这复制给它写在这儿,这个点view呢,当然了,它是可以被省略掉的,好诶,省略掉的走,嗯,然后在这呢,再换一个啊,叫做MY什么呢?除了list,还有这个foot啊,在这儿foot好了,给它复制同学,但是你听我说啊,这不要引入item了,为啥说呢?体会一下同学哪块是list呀,看这整个红色框里的是不是list,蓝色框是谁?Item同学一句话,Item是list的子组件,List是负item是子。同学你只要用list就可以了,List里边包含着item,对不对?所以说在这儿不要引入那个item了啊好了,那这块呢,是hier list foot没问题,OK,是不是还得注册呀,Components,走,把他们的挨个往这写一下,这是hier复制,这是list复制,这是foot OK了不,那同学既然话都聊到。
13:48
这了,那你说是不是得找到list组件,然后怎么办呀?啊,我不管你一会儿怎么用,反正你得引入谁呢?这个item,先把整体结构给它搭建好了,当前目录下的my item,当然名字也得给它换一下,这反正吧,同学编码的这个流程有很多,反正我建议大家呢,按照这个流程去走,拆完就写,写完就引入,多清晰呀,OK,把这些呢给它关掉。那么接下来啊,大家可能会想到了,老师明白了,你肯定得带着我呀,一点一点写这结构,一点一点写这样式,同学,不是的,我已经提前把结构和样式给了你们了,在哪儿呢?在这儿view全家桶里面有一个静态页面,这里边有一个第一个啊叫todo配置,就是这个东西的结构和样式啊,我们一点一点写,太麻烦了,各位啊,就直接呢,把这东西给大家写好了,在大家的工作岗位上啊,你也有可能啊,遇到这种情况,第一种情况呢,就是哎。
14:48
没有人给你写好这个结构和样式,完全是你自己打开这个hier.view在这儿开始编写结构啊,编写数据,编写样式,还有一种情况就是等你入职的时候,人家跟你说,哎,说小张啊,咱们这项目呀,原来是用那个JQ做的啊,完了现在呢,咱想改成这个组件化的这种项目,那么已经有了HTML结构啊,也有了这个CSS,现在呀,小张就等着你把这些东西啊给它拆成组件的,这种情况也挺多的,同学啊,你要知道啊,我们到了工作岗位上,很少有从零开始然后去开发的,就什么意思呢?说诶老师我一进公司,哎,完了刚好呢,就开一个项目,从零开始写这些东西,这种概率比较低啊各位一般来说是什么呢?你可能入职的时候啊,咱说这意思,人家项目啊,已经做完0.4了,然后最终你加入了之后呢,最终人家哎做到了一就是全都做完了,这块大家要明白啊,所以说同学来吧。
15:48
你用一个什么文本编辑器,或者说呢,你用一个什么VS扣的,你把我这个页面给它摁住,哎,给它松手,拿回来就是一个HTML,一个CSS,贼简单啊,各位,那你说接下来干嘛?哎说老师明白,全选复制,同学,你这就不对了,你不要把这些东西什么文档声明害的这些你都带着,没有必要,因为我们这个里边已经有了这些东西,我们要的就是最纯粹的结构,你说对吧?各位,所以说你要把哪呢?这拿过来,你找那个body,你把body里边这个打的div整个给它带走,对吧?各位,好了,复制,然后说老师,那我接下来不得拆组件吗?我得看看哪个结构是哪儿的呀。同学教你一招啊,这种老项目往组件化的项目上改的时候吧,你这样,你别在最开始就给自己那么大压力,你就把这一堆东西全都复制。
16:43
也不想谁是哪个组件的啊,就直接夸,全都给它怼在APP里,一会儿你再一点一点调整缩进,调一下,同学,这个结构是不是来了,好,不用想那么多啊,不用想那么多,回到这儿再找啥呢?样式,不管它是哪的,全选复制夸来写在这个APP里边粘过来啊,然后它的缩进呢,可能有点不对,完了一会儿你再调一调,在这儿呢,我先不调了啊,把这些整个全都给它折叠起来,呃,我调一下吧,要不太不好看了,划到最后,诶,在这儿呢,缩进一条,你得有这能力啊,同学,别人写完的代码你得有能力去看啊,给它折叠起来好了,保存,同学,哎,我这APP啊可厉害了,这APP里边结构可不少,样式也不少,来看一下效果啊,走,打开,嗯,是不是出来了,但是你自己心里明白啊,你这个是个赝品,就是VM,这是APP能这么玩吗?所以说接下来咋的拆,哎,那咋拆呢,先拆结构再拆样式,各位打开结构来吧,这个呢,我就不。
17:43
磨迹了,因为这些东西是我自己写的,我知道哪儿是干嘛的,说老师那我工作岗位上,我不知道我那个同事他写的这些东西哪儿都是哪儿啊,那你只能慢慢看了,你比如说我一点一点折叠,这一折叠也不对,全都折叠起来,我再折一个,哎这也不对,那我再折一个,哎呦,局部没了是吧,局部没了那这一块是哪儿呢?诶然后你一分析,诶发现是头部是这意思不,或者说你这样,各位你借助这个开发者工具右键你检查完了,你一点点看这结构是不?那没别的办法呀,你得有读别人代码的能力啊各位来这一堆带走了啊,带走了,剪切走,然后我给你的建议是啊,这一堆带走之后,你一定啊,就把这块得写成组建标签,也就是说各位567,我告诉你是哪儿是头部是吧,说了半天没告诉大家是哪儿,这567代表头部,哎,就哪儿,就这儿,就这567行就代表这一块,所以说同学你得把它带走,剪切走,我给你的建议是剪切走之后。
18:43
不,你自己心里明白这是哪个组件,立马就把它的组件标签写在这儿,同学明白不?Head DR防止一会儿你忘,你要是把这也弄走了,这结构全被你破坏了,同学你信不信回来呀,一会儿你都不知道哪儿是哪儿了,所以说把这标签赶紧写在这儿,然后呢,保存回到这个hier里边去,把这个结构给它粘过来,缩进给它一条,然后一保存,这回呢,回来看一下效果啊,各位刷新啊,说老师头部没了,那看看吧,怎么回事儿,回来那我这也写了my header,那看一下APP这走啊,明白咋回事了,各位,这叫my header是不?哎,来给它复制一份,给它放在这my header保存,这回再来看刷新,有了吧,借助开发者工具瞧眼APP,哎,有了my header,接下来那些同理,各位不墨迹了,我告诉你这个大大的ul就是谁呀?就是list,哎,就是整个展示的那个区域,好,这一堆给他带走,取而代之的是my list。
19:43
这个组件,然后呢,让它字节束就可以保存回到list里边,把结构给它带过来缩进,给它一条保存,回头刷新看一下效果啊诶又多了一个list,好了,再加把劲儿,各位把APP里边剩下的这一块这一堆都是谁呢?Foot,那这写一个麦foot特也是字节束啊走回到这儿,然后把这结构呢给它粘过来,缩进呢,给它一条保存,回头看一下效果啊各位刷新APP里边有head list foot,但是有一个还是有问题的哪呢各位,Item里边没东西对吧?分析一下list list是个ul,一个Li,就是一个要做的事儿,所以说我没有必要写这么多遍,对吧,复用嘛,把它删掉,然后把这个呢给它拿走,取而代之的是,诶,慢点啊,取而代之的是呢,这个item,但是不叫item,叫做my item走字节数呢就可以,然后把东西给它放在。
20:43
这个里边走,这不就拆出去了吗?保存回头看一下效果啊同学说老师咋一个呢,一个就对了呀,那你在这个list里边,你用了几个item一个嘛,那你写了四个,那它可不就是四个了嘛,对吧?各位说老师那数据我都说了嘛,现在是静态组件,咱不想那么多,说老师OK完毕了是不是?嗯,按照你的话,这一小节结束了,同学没有啊,没有啊各位你的样式我问你,你拆了吗?哎呀,说老师可是呢,样式没拆,对呀啊说老师,哎呀我的天呀,这可怎么办?放心吧啊,我给你写好那个备注了,Base是什么意思呢?就是大家都在用的,所以说你放在APP里面就可以body折叠这个折叠这个折叠就是只要没到结束的时候,这些全都是属于基本的样式啊,空行删掉这块折叠,空行删掉空行删掉这折叠,删掉折叠啊,然后这儿呢折叠哎再往下同学谁出来了还。
21:43
底,那就把这些东西给它带走啊,放在哪儿呢?海底里边给它粘在这儿,而且我很负责任的跟你讲各位,所有红色框里的样式,真的真的都是控制上方结构的,所以说你就可以加这词了,S Co pd对不对?好,继续往下,同学,这个mean是哪啊?我跟各位说啊,这个meanin呢,其实就是list,所以说把这个给它剪切走,来到list里边,然后呢,给它粘贴同样的那个词,S scedd,一般反正都加上这个,嗯,然后再走呢,这就是item了,走走走走item比较多啊,因为里边涉及到一些这个鼠标悬浮的效果,把它剪切走,来到item里边,把这个再粘过来,同样的那个词给它加上啊,Scedd同学,我问一下,如果我的这些注释写错了是什么后果呢?就是明明这个东西不是item里的,但是我却写在了这儿,并且我还加了一个scoop的。那就意味。
22:43
给这同学这个样式好像就不再奏效了是不?哎,你想想各位明明不是控制这儿的,完了我还加一个scope的,那别人也用不了了是吧?哎,但是我拆的是没毛病的,就当时我写这个样式的时候,确实这一堆真的是控制每一项的,OK,还剩下最后一个,各位走吧,Foot特整个给它复制,然后这些空号删掉,然后找到foot,然后把这个呢给它粘过来,然后这儿呢给它调整一下scoed啊有些同学说老师我不想在这粘啊,我浪费时间,我想自己写,哎,当然也可以啊,各位没没问题的,可以自己写的。好了,回到这刷新一波,看一下效果啊说老师刚才什么情况,怎么刚才我看没有样式呢,它刷新的慢啊,你整个重新刷新一遍就可以了,来打开my list往这儿,你看一堆my item my foot同学,OK了吧,这些东西,诶,这叫静态组件完成了,好不,各位,哎,慢慢来,那这小节呢,我们先停。
23:43
以下。
我来说两句