00:00
想学习view,我们就必须搞懂第一个问题,View是什么?在官网里面啊,是这么给自己下定义的,他说view是一套用于构建用户界面的渐进式GS框架,什么叫构建用户界面呀?这个非常简单,各位就是把你拿到手里的数据诶,通过某种办法变成用户可以看见的界面,就这意思。想想我们前端开发工程师的职责是什么?在合适的时候发出合适的请求,最后呢,把数据展示到合适的位置,这不就是我们的工作职责吗?至于说你怎么得到数据,你是发送请求啊,还是模拟数据啊,还是写的死数据啊,这无所谓了,View呢,也不关注,关注的就是你把数据给我之后,我怎么把它变成界面,就是这么回事。哎,构建用户界面,我们再说说这个词,渐进式,这怎么理解呢?官网啊也给了我们解释,他是这么说的,说所谓的渐进式。
01:00
就是可以自底向上逐层的应用,说的还是有点抽象,接地气点说各位就是如果说你的应用很简单,那么你只需要引入一个清亮而又小巧的核心库就可以了,这个库压缩完了只有100多KB。哎,这是简单应用,那如果说是一个复杂应用呢,你可以引入各式各样的view里的插件库,哎,所以说这个键各位有逐渐的意思,这个进有递进的意思,也就是说从一个轻亮而又小巧的核心库逐渐递进到使用各式各样的view插件库,哎,就这么回事儿,那么第一个问题我们就说完了啊,那进入第二个问题,谁开发的?说到这儿啊,就必须得让大家认识一个人了,谁呀?尤雨西,哎,你看长得是不是还挺帅啊,我截了个图啊,这是游雨西呢在github主页上的一些信息,如果感兴趣的小伙伴呢,可以去关注一下他啊,他的作品呢,不仅仅还有别的,诶你可以去看一下,然后在右边呢,给大家拉了一个时间线,这个时间线吧,你听我说,各位我就快速的带着你说一下,你就把它当成啊是V的一个八卦来听就可以了,时间呢,追溯到2013年那一年啊,尤禹西在这个谷歌工。
02:17
错,然后呢,他受到这个angel框架的启发呀,他写了一个清亮的框架叫做seed,他自己回头在接受采访的时候啊,他说其实当时他就是觉得angel有点太重了,他想写一个轻一点的,诶写完了叫C的,然后一三年的12月呢,他把这C的改名了,哎改成什么名呢?叫做view,然后那个时候的版本号呢,是0.614年同学他把V正式对外发布了,你说这意味着什么呢?就意味着他不想让这个V只是自己在使用的一个小框架,想让大家诶也能参与进来,一起去把这个东西发展的更好,诶所以说就正式对外发布了,然后版本号呢是0.8,其实那个时候啊,同学,就算你正式对外发布了,也不会有什么太多的人知道,哎呀,有一个框架叫做view,好像挺好的,没有是吧,不会有谁关注的,然后一个重要的事情啊,就出现了,各位有这么一个人谁呀,Tyler Tyler是谁呢?Tyler是PHP里边一个知名框架的作者,那个时候在。
03:17
圈里面是很有名气的,现在也很有名气,而且粉丝量庞大,哎,一四年的某一天,这个Tyler啊在Twitter上发了一个动态,哎,说我这两天呢在学习这个V5,觉得还不错,哎同学你说这是不是就相当于我们平时生活中的你找明星做代言了呀。那么Tyler的这些粉丝一看,哎哟,Tyler都说这东西不错,那这东西应该就不错,而且你要知道Tyler的这些死忠粉都是啥,都是程序员,那这个时候各位逐渐的,诶,这个呢就被我们所熟知了,然后呢,时间来到2015年10月27日,View正式发布了自己的1.0版本,并且起了一个代号啊,叫做EV,翻译过来就是什么新世纪福音战士,这是一个动漫的名字,哎,然后16年10月1日,哎,你看view好像特别喜欢在十月份进行发版是吧?哎,10月1日正式发布了view2.0版本啊,然后有一个代号ghost in the shell啊翻译过来就是什么工壳机动队,也是一个动漫的名字,哎,时间来到了2020年9月18日啊,我记得应该是在傍晚11点多,正式发布了VI3.0,代号one海贼王,这个大家都知道了吧,哎,多知名的一个动漫呀,所以说你发现有一个特点啊,他每一次发布重要版本的时候啊,都给。
04:36
起一个别名,这别名啊,一般还都是动漫的名字,哎,是不是挺有意思的?那么同学来停下来,不要再往下说了,这个时间线呢,就让它停在这儿,那我们用一句话去描述一下目前view的这个地位吧,啊,走,就是这句话,后起之秀,生态完善已然成为国内前端工程师必备的这么一个技能了啊,后起之秀是因为他之前有react,之前还有了,是不?各位而且呢的这个作者雨熙,人家也不否认我参考了react里边的一些东西,对吧?他们写的好的地方我也可以去参考嘛。啊OK,那这个问题说完了,我们进入第三个问题,就是view的特点来吧,先看第一个,采用组件化模式,提高代码复用率,且让代码更好维护。说老师后边这个吧,能听明白这组件化什么意思呢,来各位非常简单,你比如说啊,我现在呢,要实现这么一个功能走。
05:33
页面里面有三大板块,分别是推荐活动啊,还有这个新闻,还有这个热门啊,这是我截取了一个用写的这么一个网站的一个局部啊,同学,如果你想用组件化的模式去写,哎,那就非常好,你看着啊,先考虑第一个板块,就是推荐活动来用绿色的框啊给它圈起来,然后呢,我就把绿色框里边这一部分功能啊,变成一个文件。说老师activity什么意思呢?活动嘛,你当然也可以写成demo.test点都行,这个点是打造的一个全新的文件格式,那这个时候啊,可能有些同学说老师这我就迷惑了,你说点GS,点点CSS,你这一说我都知道里面写什么,你这来了个点view,那我这边能写什么东西呢?来各位这个点view文件里面写的是啥呀?就是绿色框里面这部分功能所对应的HTML结构,CSS样式以及GS的交互。
06:36
在view里面一个点view文件就是一个组件,那你看各位,如果以后某一天啊,有人也想用这个推荐活动,也想用我绿色框里边的这些功能啊,你比如说我的这个结构、样式、交互他都想用,那同学他只需要把我这个点view文件引入过去,他就神奇般的发现我之前写的所有的功能他都拿到了,是不?各位是不是提高代码的复用率啊?那同理,后边的新闻和热门我是不都可以这么做呀?诶可以给它起一个好听的名字,那更好维护,这怎么理解呢?各位非常简单呀,说有一天我想改改新闻那个功能的布局,那你就来到news.view里面去改一下ATL结构是不是就可以了,你想改改样式,那改CSS就得了呗,也就是说我改了这个CSS,绝对不会影响这边和这边,因为已经封装到这个组件里了,哎体会体会封装这个概念,哎就保护起来是不,各位你看服用了。
07:36
而且呢还更好的维护了,这就是组件化编码,哎,也称为组件化模式,一个点view就是一个组件,那么第一个我们就说完了,说说view的第二个特点,就是声明式编码,哎呀,说老师这个怎么理解呀,非常简单,各位我用一个这个需求吧,给它引出来,说我现在呢,手里面有一些人的数据啊,是一个数组persons,然后呢,页面里边有一个容器,哎是u lid为list,然后我想实现的效果是你写点代码,把这些数据,哎,就是每一个人变成一个Li塞到这个容器里,也就是说最终啊是这效果,张三李四王五,那你怎么写呢?先不考虑用view实现,拿着JS写是不得这么写,各位首先准备一个空的字符串,随后遍利数据去拼串,随后呢获取到list那个元素,那说白了,就那ul随后呢,你把你刚才拼完的那个东西atmls tr是不是inner atml把它放进去啊。
08:36
哎,也就是说你势必会经历这几步,那我们管这种编码方式各位就叫做命令式编码。老师不懂啥叫命令是,就比如说,哎,我说同学你往前走一步,这是我对你的一个命令,哎,你就走一步,我说再走一步,这又是一个命令,你就又走一步,然后我不发出命令了,你就不走了,这就是属于命令是,哎,我得说一下,你动一下,说一下你动一下,也就是说同学这些环节第一步,第二步,第三步,第四步,一步都少不了,你觉得呢,各位少了任何一步,就相当于你少了一次命令,你就比如说同学这次我少了,那结果是什么呀?是一个空串,对不,没有拼进去,那如果这一次我少了呢?那更严重了,各位你工作成果没有放到页面上去是不?哎,这就是命令式编码,哎,写一步动一下,写一步动一下,那么与之对立的一个概念叫做声明式,声明式就这么写,各位写完了。
09:33
哎,你看一下ul里面是不是想放Li啊,那就写个Li,但是我们深深的知道这Li不是一个,你有多少人就得有多少个Li,所以说你得便历,所以说我写了一个view里面的一个指令,叫做v for,哎,同学你看这什么音什么,那你说什么意思呀?很明显这是数据源,很明显这是数据源里边的每一个数据,那很明显在这干嘛呢?从数据里面取出指定的属性ID name是不是就OK了?那同学你看看左边,你再看看右边,你说我写这空了吗?没有。
10:11
你说我亲自写for号一直在这拼串了吗?也没有,我获取到这个元素了吗?没有,我亲自操作DOM了吗?我写这个inner.al了吗?没有是吧,各位,哎,其实要是较真点来说吧,我写了便历,只不过我这个便历你自己瞧V-far我就写到这儿,那你看你这边的便历呢,好家伙哈,这模板字符串在这拼的是不?哎,所以说体会体会,这就是声明式编码。之前呢,我还给同学举过这么一个例子,我说同学命令式编码就是这么回事儿,我口渴了,哎,然后呢,我跟你说,同学,你站起来往前走啊,然后蹲下往右看,是不是有一个水杯呀,握起来向我走来,然后我一张嘴说往里倒,哎,好了,我就喝水了,这就是命令,是哎,我得一步一步一步指挥你,那么生命是什么意思呢?哎,咱之前真说过是吧?哎,我说我说同学啊,这嗓子有点干啊,有点渴,这个时候啊,同学,我不用你命令你什么,你自己起来啊,拿了一瓶这个挺凉的水就给我了,老师,你。
11:12
说吧,这就是声明式对不对?哎,有点心有灵犀这种感觉,那生活中你说咱俩想做到心有灵犀,各位是不是咱俩得接触一段时间呢?啊,那么view里面这个声明是你想玩的六,那必须就是什么呢?你把V的这些指令咋的?哎,你得玩的六,那原声的不写了,那这些东西你是不是得去记一下啊,OK,这就是声明,是编码,我们再看view的最后一个特点,哎,就是使用虚拟道母加上优秀的diff算法,尽可能的去复用盗墓节点,说老师这怎么理解呢?来还是刚才便利人员列表那例子啊,各位走着,我把完整的代码啊给你写在这儿啊,来看一下容器在这儿呢?数据在这儿呢?准备的空串在这儿呢?拼串在这儿呢?获取元素往里边塞东西是不是一步一步的呀,哎,最后页面是不是出这效果了呀,其实直接这么看呢,没什么问题,但是同学如果有一天呀,这个数据发生变化呀,就不太好玩了。来我们看下一。
12:12
幅图就是说你初始化的数据是有张三李四王五,你变历了,你拼串儿了,最后呢,你把那个串儿啊塞进去了,就是张三李四王五,哎,左边是数据,右边是什么呢?是页面的真实do,哎,叫做real do real不真实的意思嘛,当然你用这个词也可以啊,叫做TR,用一也行,说老师听你这意思,除了有真实盗墓,还有假的盗墓,哎,你不能说假的叫虚拟的,但是在这儿吧,各位你先不用理解这词儿,就是页面盗目就得了呗,是不?各位那你琢磨琢磨,张三李四王五拼个串儿,把串儿塞进去,页面就出效果了,这不挺好的吗?也就是说各位啊,你单看这个红色框里面是一点毛病都没有的是吧?原来咱就这么写代码了,但如果有一天数据变化就不好玩了,你瞧着啊,说呀,有一次我获取数据了,回来了,是张三李四王五多了一兆六。
13:10
原来是几个人三个,现在呢,四个,好,你还用之前那个办法去实现,是不是拿着这一堆人去拼串儿啊,那拼的串儿里面包含着谁?张三李四、王五赵六,然后呢,你又用这句话往页面上放东西,那就意味着之前页面上有的张三李四王五咋的没了,被谁给替换掉了,被张三李四王五赵六给替换掉了,各位你觉得这样做是不是有点傻呀?其实我们心里明白各位,就是张三李四王五这三个人原来就有,那么最好的一个做法是这三个人咋的原封不动的放在这儿,我只需要把照六摆在这儿是不是就可以了?那你看原来有的我在这儿依然用,这是不是一种复用啊,对吧?各位用原生GS的同学也不是说不能实现,你自己去过滤数据呗,你去对比呗,对不对,原来有谁现在有谁啊,然后我需要单独操作的是谁也可以写,但是比较麻烦,而且最主要的是。
14:11
数据量一大,你所写那个判断可能效率啊就极低了,那么view是怎么解决这问题的呢?来走着各位,如果用view去实现啊,那么就非常好了,它中间多了一个环节就是虚拟,哎,用了这么一个词叫做visual do虚拟的来各位他的工作模式啊是这样的,张三李四王五v you呢,先把这三个人啊变成三个虚拟盗墓,随后再把这三个虚拟盗墓变成页面的真实盗墓,说老师这虚拟我咋我咋理解,到底啥是虚拟do呀,同学,虚拟do就是内存里的一个数据,最后呢,这个view把这个东西诶给你转成页面的真实,道说老师这样做麻烦吧,拿着数据。变成虚拟盗墓,完了虚拟盗墓再给我变成真实盗墓,老师你这真麻烦,你这两步原来我咋做?老师原来我数据H直接真实盗墓,你在这儿毕定你经历了这么一个环节,那你得浪费时间呀,同学你琢磨琢磨是不是来你看刚才数据直接就对应成了真实盗,那在这毕竟你多了一个环节啊,那怎么还说它好呢?各位你听我说啊,如果你的张三李四王五这些数据是不变的,不变化的,那同学我跟你讲这虚拟盗墓呀,他不会对你有什么帮助,但是如果说这个数据以后它有变化,那这个人他就得能帮助你了,来你瞧一下效果啊,各位张三李四王五是不是对应三个虚拟盗墓。
15:42
哎,然后呢,最后是不是转成三个真实道路,好,那么当数据多的时候,各位你看着张三李四王五,哎多了一兆六吧,那在这儿看着各位,他又生成了这四个新的虚拟道,啊同学,这三个是旧的,这四个呢是新的,说老师那我知道了,接下来就是这么的呗,一变成这个,二变成这个,三变成这个,四变成这个,同学,那这就没意义了,那你这个虚拟盗墓完全就是在耽误时间,他在这儿啊做了这么一件事儿,如果说之前你有虚拟盗墓,诶现在你又有点新的虚拟盗墓,他会把新的虚拟盗墓和这个旧的虚拟盗墓进行一个比较,哎,走着我们管这个比较就叫做dif比较,哎它里面有一个非常优秀的diff算法,他一对比之后发现,诶说兄弟啊,现在这个新的虚拟盗墓里的123,跟你原来旧的虚拟盗墓里的123那不一样吗。
16:38
标签的名字,标签里的属性,标签里的内容都一样啊,他说那就这样吧,原来的这个张三李四王五直接在这儿就复用了,只有这个赵六,哎,是后来放进来的,这不就是一种优化吗?好,我们再看最后一个问题,就是学习view之前,我们要掌握哪些GS的基础知识呢?啊,给大家呢,罗列了一下,一共是这么几个,首先ES6的语法规范你得熟对吧?结构赋值啊,模板字符串啊等等这些箭头函数啊,你得知道,还有就是ES6的模块化对吧?比如说什么默认暴露啊,分别暴露啊,统一暴露啊,Import呀,Export呀你得会,还有就是包管理器啊,你会一个就行,比如说NPM,或者是或者是CNM,还有就是形和链,各位这可是重点啊,原型和形链你要是不懂,很多的原理我分析你也听不明白啊,还有就是数组身上的一些常用的方法,哎,比如说过滤一个数组啊啊,加工一个数组啊啊。
17:39
等等,这些筛选最值啊,哎,大家得会,然后还有就是和promise如果大家能比较熟的话,当然就更好了,但是各位呢,也不用那么的紧张,哎,如果说哪一个东西啊,说老师我有点忘了,那在我的课堂上呢,我也尽可能的带着大家回顾一下,当然我不能用太大的篇幅去回顾,OK,各位,那这一小节呢,我们先。
我来说两句