浅谈vue原理(三)

  上一篇已经实现了发布订阅模式了,现在我们实现从model->view的数据绑定,也就是当data中的数据改变后,页面上的数据也要跟着变化;

1.发布订阅代码的实际应用

  我们思考一下,怎么把我们上一篇实现到的发布订阅模式用到我们的vue中去呢?

  (1)Watcher应该什么时机创建呢?

  之前说了一个{{xxx}}占位符就代表一个watcher,那么刚好在遍历虚拟节点树的时候会正则判断每个出现{{xxx}}的所在节点,此时创建watcher实例正合适;

(2)Watcher构造函数中做了什么?

  在上图中可以看到Watcher中传入了三个参数,其中根据第一个和第二个参数就可以取到data中对应的{{user.name}}的值myVue[user][name],由于所有的属性都绑定了有get方法,所以在获取myVue[user][name]的时候就会触发get方法,所以我们可以在get方法中添加新的逻辑,就是将当前Watcher注册到Dep中一份;

(2.1)Watcher构造器(注意这里最后设置为null的这句,后面有用):

(2.2)get方法新增逻辑:

 

(3)那么当我们修改myVue.user.name=”hello“的时候会发生什么?

  由于之前的数据劫持和数据代理,所以此时会触发name这个属性的set方法,我们需要在这个set方法中添加逻辑,就是触发Dep中所有的Watcher的回调方法,就是(1)中回调函数;

(4)在(3)调用notify之后,每个watcher将会执行的行为?

(5)大概捋一下思路:

  (5.1)首先启动项目,就会进行初始化,在编译模板的阶段会把html标签中的所有{{}}占位符都找到,我们就在这个时候新建Watcher,并设置回调函数就是给每个{{}},以便于后续调用直接覆盖这个占位符

  (5.2)在Watcher创建的时候,会由于从data中取值的原因,会触发该属性的get方法,我们就把这个Watcher实例的指针丢到这个get方法中,实现注册到Dep的逻辑

  (5.3)在每个属性的set方法中加入了notify的机制,这是为了保证只要我们手动的将data数据修改之后,就会调用所有注册到Dep中的Watcher的回调函数

  (5.4)启动完毕

  (5.5)当我们修改data中的数据的时候,首先会触发set方法中的notify方法,直接调用所有的Watcher的update方法实现发布,在update方法中会获取data中修改的最新值(此时虽然也会触发这个属性的get方法,但是没有target属性,因为target属性只会在创建Watcher的时候才会赋值,创建完了之后就会设置为null,不会去重复注册同一个Watcher)

   (5.6)获取到了最新的值之后,传到(5.1)中的回调函数,就可以实现覆盖虚拟节点中的占位符{{}},实现页面的刷新,我们就能看到效果

2.代码

html:

<body>
  <div id="app">
    <h1>呵呵:{{user.name}}</h1>
  </div>

  <script src="./mvvm.js"></script>
  <script>

    // 自定义的myVue实例
    let myVue = new MyVue({
      el: '#app',
      data: {
        user: { name: "小王" }
      }
    })
  </script>
</body>

js:

function MyVue (options = {}) {
  //第一步:首先就是将实例化的对象给拿到,得到data对象
  this.$options = options;
  this._data = this.$options.data;

  //第二步:数据劫持,将data对象中每一个属性都设置get/set方法
  observe(this._data);

  //第三步:数据代理,这里就是将_data的对象属性放到myVue实例中一份,实际的数据还是_data中的
  for (let key in this._data) {
    //这里的this代表当前myVue实例对象
    Object.defineProperty(this, key, {
      enumerable: true,
      get () {
        return this._data[key];
      },
      set (newVal) {
        this._data[key] = newVal;
      }
    })
  }

  //第四步:compile模板,需要将el属性和当前myVue实例
  compile(options.el, this)
}

function compile (el, vm) {
  return new Compile(el, vm);
}

function Compile (el, vm) {
  //将el代表的那个dom节点挂载到myVue实例中
  vm.$el = document.querySelector(el);

  //创建虚拟节点容器树
  let fragment = document.createDocumentFragment();

  //将el下所有的dom节点都放到容器树中,注意appendChild方法,这里是将将dom节点移动到容器树中啊,不是死循环!
  while (child = vm.$el.firstChild) {
    // console.log('count:' + vm.$el.childElementCount);
    fragment.appendChild(child)
  };

  //遍历虚拟节点中的所有节点,将真实数据填充覆盖这种占位符{{}}
  replace(fragment, vm);

  //将虚拟节点树中内容渲染到页面中
  vm.$el.appendChild(fragment);
}

function replace (n, vm) {
  //遍历容器树中所有的节点,解析出{{}}里面的内容,然后将数据覆盖到节点中去
  Array.from(n.childNodes).forEach(node => {
    console.log('nodeType:' + node.nodeType);

    let nodeText = node.textContent;
    let reg = /\{\{(.*)\}\}/;
    // 节点类型常用的有元素节点,属性节点和文本节点,值分别是1,2,3
    //一定要弄清楚这三种节点,比如<p id="123">hello</p>,这个p标签整个的就是元素节点,nodeType==1
    //id="123"可以看作是属性节点,nodeType==2
    //hello 表示文本节点,nodeType==3
    //因为占位符{{}}只在文本节点中,所以需要判断是否等于3
    if (node.nodeType === 3 && reg.test(nodeText)) {
      // RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串,以此类推,RegExp.$2。。。
      let arr = RegExp.$1.split(".");
      let val = vm;
      // 这个for循环就是取出这样的值:myVue[name][user]
      arr.forEach(i => {
        val = val[i];
      })

      // 创建Watcher,最主要的是传入的这个回调函数,会覆盖node节点中的占位符{{xxx}}
      new Watcher(vm, RegExp.$1, function (newVal) {
        node.textContent = nodeText.replace(reg, newVal);
      })
      // 把值覆盖到虚拟节点的占位符{{}}这里
      node.textContent = nodeText.replace(reg, val);
    }
    // 第一个遍历的节点是<div id="app">这一行后面的换行,nodeType等于3,但是没有占位符{{}},所以会进入到这里进行递归调用内部
    //的每一个节点,直到找到文本节点而且占位符{{}}
    if (node.childNodes) {
      replace(node, vm);
    }
  })
}

//数据劫持操作
function observe (data) {
  // 如果data不是对象,就结束,不然递归调用会栈溢出的
  if (typeof data !== 'object') return;
  return new Observe(data);
}

function Observe (data) {
  let dep = new Dep();

  // 遍历data所有属性
  for (let key in data) {
    let val = data[key];
    //初始化的时候, data中就有复杂对象的时候,例如data: { message:{a:{b:1}}}  ,就需要递归的遍历这个对象中每一个属性都添加get和set方法
    observe(val);
    Object.defineProperty(data, key, {
      enumerable: true,
      get () {
        // 订阅
        Dep.target && dep.addSub(Dep.target);
        return val;
      },
      set (newVal) {
        if (val === newVal) return;
        val = newVal;
        //当后续可能因为业务逻辑使得_data.message = {name: "小王"},设置对象类型的属性值,就需要递归的给对象中{name: "小王"}的每个属性也添加get和set方法
        //否则name是没有get/set方法的
        observe(val);
        dep.notify();
      }
    })
  }
}

// ===============================发布订阅===============================
// 可以看做是公众号端
function Dep () {
  // 存放每个用户的容器
  this.subs = [];
}

//对外提供的api之一,供用户订阅
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub);
}

// 对外提供的api之二,遍历每个用户,给每个用法发信息
Dep.prototype.notify = function () {
  this.subs.forEach(sub => {
    sub.update();
  });
}

// 用户端
function Watcher (vm, exp, fn) {
  // 这个可以看作是用户的标志;注意,这个fn一般是一个回调函数
  this.vm = vm;
  this.exp = exp;
  this.fn = fn;

  Dep.target = this;
  let val = vm;
  let arr = exp.split(".");
  arr.forEach(item => {
    val = val[item];
  })
  Dep.target = null;
}

// 用户端提供的对外api,让公众号端使用
Watcher.prototype.update = function () {
  let val = this.vm;
  let arr = this.exp.split(".");
  arr.forEach(item => {
    val = val[item];
  })
  this.fn(val);
}

View Code

  现阶段,当我们在控制台修改myVue.user.name="xxx"的时候,页面上也会跟着修改了

(0)

相关推荐

  • 浅谈vue原理(四)

    经过了前面这么久,我们已经弄好了数据劫持,数据代理,还通过了发布订阅模式实现了data中数据变化,页面上也会跟着变化: 现在还差点东西,就是当页面上的数据变化的时候,data中的数据也能跟着变化,进而 ...

  • 浅谈vue原理(一)

    哎,不知道多久之前说的要说说vue原理的,后来就忘记了,嘿嘿,这次就来看看vue的大概原理吧! 看过我博客的人应该知道,我不是很喜欢用那种太专业的术语的,喜欢用小白都能看懂的话来说,所以可能有的地方表 ...

  • 浅谈宋元明三朝龙泉窑瓷器的鉴定

    龙泉窑以烧制青瓷而闻名,在北宋早期以前的产品风格受越窑.瓯窑.婺州窑的影响,特征与三窑的产品相似.胎质较粗,胎体较厚,釉色淡青,釉层稍薄.北宋中晚期是龙泉发展的重要时期,并开始形成自己的风格.在今浙江 ...

  • 浅谈诗歌(三)

    浅谈诗歌(三) 文/杨金堂 三.意境的营造 意境,也称境界,是写诗人营造出来的一种情景交融.空灵融彻的诗意空间.意境与意象这是两个关系密切而且容易混淆的范畴.区别在于:意象是以象寓意的艺术形象,意境是 ...

  • 浅谈国家博物馆(三)

    浅谈国家博物馆(二) 中国古宫博物馆 让我大开眼界的还是在一次欧洲旅行中,那次说不上很认真的看每一个博物馆,但那次在一个博物馆里切底改变了我走万里路不如看万卷书的观念,在匈牙利的国家博物馆里看到了我在 ...

  • 过敏性紫癜…中西医浅谈之(三)上两组图分...

    过敏性紫癜-中西医浅谈之(三) 上两组图分别为一男.一女孩患过敏性紫癜患者,都是臀部及双下肢对称性紫癜,瘙痒.色鲜艳.舌红.稍发热.苔薄黄.脉浮数,采用纯中药制膏做膏推疗法的恢复情况,过程中真的没用过 ...

  • 浅谈旅行的“三个层次”与“三种境界”

    旅行是什么?什么是旅行?有几个在路上的人理解旅行的意义?有几个人反思过旅行带来和带走自己的什么?留下的是什么?旅行,对我来说,以前年轻的时候认为就是一种玩的事情,无须任何的思考,就那么去玩,但是年龄的 ...

  • 文学性、逻辑性、规范性缺一不可——浅谈小说审读三要素

    题目:文学性.逻辑性.规范性缺一不可--浅谈小说审读三要素 来源:<出版与印刷>2017年第3期P30-33 作者:张萌 DOI:10.19619/j.issn.1007-1938.201 ...

  • 李展飞——《浅谈教师的三种职业状态》

    一位老人遇到了麻烦:每天都有一些顽皮的孩子聚集在他家附近,向他的房子扔石头.老人想了很多办法来阻止他们,叫警察.打电话给孩子们的父母.大喊大叫地威胁他们,但都不奏效.相反,孩子们似乎更加起劲,扔石头扔 ...