IT教程 ·

手写完成vue的MVVM相应式道理

基于FPGA的RGB图像转灰度图像算法实现

  MVVM相应式完成道理:

  1.模板编译

  2.数据挟制

  3.watcher

  MVVM------------------视图-----模子----视图模子

  三者与Vue的对应:view对应template,vm对应newVue({…}),model对应data

  文中应用到的数据名词:

  nodeType推断节点是不是是元素节点

  querySelector竖立一个元素节点

  createDocumentFragment文档碎片

  attributes猎取元素属性鸠合

  textContent猎取文本内容

  reduce(prev,next,currentIndex){}一个能够用上一个元素和当前元素做处置惩罚的要领

  defineProperty(obj,key,value){}数据阻拦的重要要领

手写完成vue的MVVM相应式道理 IT教程 第1张

手写完成vue的MVVM相应式道理 IT教程 第2张

手写完成vue的MVVM相应式道理 IT教程 第3张

  起首竖立一个vue的实例,竖立mvvm.js,构建mvvm类。猎取el的节点和data放入实例中,在将Observer.js(数据挟制)和Compile.js(模板编译)放入mvvm的js,悉数在index页面运转.

  第一步:模板编译

  我起首制造Compile.js,也就是模板编译。

手写完成vue的MVVM相应式道理 IT教程 第4张

 

起首须要猎取el 这个属性的值   用nodeType === 1推断是不是是元素节点. 假如不是则用 queryselector() 生成一个节点 。  如许做的目标是,有些人el:#app  有些人是document.getElementById('app')。 不论俩者怎样,我们都要生成一个节点来供后续运用。

手写完成vue的MVVM相应式道理 IT教程 第5张

 随后推断el节点是不是存在,假如存在。则举行编译 ,  这里编译最好不要在dom里举行遍历编译,异常耗机能 。 我引荐的是用 createDocumentFragment() 要领. 竖立一个假造节点对象, 在这个假造节点对象里举行遍历以及对应的操纵。

手写完成vue的MVVM相应式道理 IT教程 第6张

 

那末说到假造节点, 我们须要将我们猎取的el节点全部放入进去 ,举行遍历,将app里的每一个子节点都搬到fragement 变量中。

手写完成vue的MVVM相应式道理 IT教程 第7张

 然后举行节点的编译。这里的节点又分为元素节点和文本节点。 照样用方才的nodeType推断辨别吗,然后做对应的操纵。

手写完成vue的MVVM相应式道理 IT教程 第8张

接下来我们先编译元素节点起首我们须要晓得,猎取元素节点要做什么,为何猎取元素节点。我是愿望经由过程猎取元素节点上的关于vue的指令,比方:v-model,v-html,v-for。等等...那末这些指令是放在元素节点上的属性里,所以我们用attributes猎取元素节点的属性名的鸠合,也就是我们说的v-model。经由过程遍历这个attr属性名的鸠合,猎取每一个属性名。经由过程isDirective函数推断attrName包括v-的属性,这里我做给假定,好轻易明白。这里经由过程上面的过滤,能够得出attrName是一个指令名的鸠合。那我假定这个指令名为v-model。我起首猎取v-model的值,也就是expr。然后做一个解耦对象CompileUtil,轻易背面制造其他的指令。所以这里挪用的是CompileUtil[model]{node,this.v,,expr};

手写完成vue的MVVM相应式道理 IT教程 第9张 手写完成vue的MVVM相应式道理 IT教程 第10张

  挪用model的指令后,在model这个函数里做相对应的处置惩罚。这里的watcher组织函数先不必管,背面的事变。这里的uptate['modelUptate']和model一样放在CompileUtil中,轻易治理。假如updateFn存在的话,则实行updateFn(),将v-model的值给予input节点的value.下图中的getVal是防备v-model=’messge.a'这类嵌套对象的。这个函数里,起首应用split将messge.a拆分红[messge,a]数组。然后应用reduce要领返回上一个元素[当前元素],而最下面的vm.$data是reduce要领遍历的初始值。也就是data。
  由于data:{messge:{a:'hello.world'}}.如许的编译,元素节点就能够编译出来了,能够将data的值编译到元素节点上了。

 

手写完成vue的MVVM相应式道理 IT教程 第11张手写完成vue的MVVM相应式道理 IT教程 第12张手写完成vue的MVVM相应式道理 IT教程 第13张

        接下来编译文本节点,那文本节点,我们起首猎取文本节点里的值,然后应用正则的test找{{a}},和之前的元素节点一样,实行对应的函数。,实行对应的行数。这里第86-90能够先不论,不过这里的textVal和上面的getVal函数不一样,起首是须要将相符前提的元素里的变量取出来也就是{{a}}里的a,argments[1]就是a变量。在考虑到对象嵌套,就实行上面的getVal。然后就能够将data里的值替换到文本里了。

手写完成vue的MVVM相应式道理 IT教程 第14张手写完成vue的MVVM相应式道理 IT教程 第14张手写完成vue的MVVM相应式道理 IT教程 第16张手写完成vue的MVVM相应式道理 IT教程 第17张

 如许元素节点和文本节点都编译完成了。然后将全部假造节点丢回dom树里去 。MVVM的编译就完毕了

手写完成vue的MVVM相应式道理 IT教程 第18张

 第二步:数据挟制,函数很少。但比较绕.这里实行observe,应用递归遍历,将data里的键值对悉数拿出来处置惩罚,实行defineReactive函数,这里18行能够先不看。 看下面的最重点的Object.defineProperty()。这里要传入挟制的对象,挟制的键,以及回调函数。这里回调函数里俩个参数在下图。

然后,get函数是取值是做对应的操纵,set函数是设置值做对应的操纵。至此数据挟制就完成了

手写完成vue的MVVM相应式道理 IT教程 第19张

 

 

手写完成vue的MVVM相应式道理 IT教程 第20张

第三步:watcher 监察者 ,一旦变化实行对应的操纵。也就是将模板编译和数据挟制俩个函数联络在一起。有衔接。

这里竖立watcher类,将须要的参数猎取。 vm是实例,expr是值,cb是回调函数callback。watcher实例里的value = get要领的返回值,value实行一次嵌套处置惩罚返回。这里监察者作用重如果 一 更新值,二是实行callback回调函数cb。三将本身的实例,放入dep的target里。那末watcher监察者就制造好了。

手写完成vue的MVVM相应式道理 IT教程 第21张

末了的衔接部份,起首data里的每一个属性值都被加上了set和get

1.猎取值

在最入手下手编译的时刻,编译节点的文本节点处置惩罚和元素节点处置惩罚的时刻实行watcher函数,在watcher函数里的get函数中将 watcher函数本身放入de问值的时刻,则会实行get函数,将 每一个watcher放入dep数组中 。

手写完成vue的MVVM相应式道理 IT教程 第22张

手写完成vue的MVVM相应式道理 IT教程 第23张

2.修正值

 在修正值的时刻,会触发Observer.js 的defineProperty的set函数,set函数里比较新的值和旧的值,value是编译时刻的值,newValue是set函数的第一个参数,也就是修正后的新值 。   将俩者比较,假如差别,就实行Dep组织函数的notify函数。notify则会遍历悉数存在的dep数组里的watcher的update要领。在watcher的update要领中,比较值的差别,假如差别就则实行回调函数,将视图更新。这个回调函数是嵌套在处置惩罚文本节点和元素节点的要领里

 

v-model的双向绑定

  至于v-model的双向绑定,实际上是绑定输入框的输入事宜。将输入事宜新的值赋值给input节点的value值,然后值的转变,实行set函数,将视图转变。视图的转变,会实行wacther的回调函数,文本节点也会从新赋值。

 

 

终究结果:

 

 

 

 

 

 

 

 

 

这就是mvvm相应式道理的完成,假如有完整讲不清楚的处所,迎接指出。感谢。

 

Azure Devops/TFS测试管理(上)

参与评论