vue实现简单的MVVM框架(3)

日期：2020-05-11 栏目：程序人生浏览：次

2、实现一个订阅器

要想通知订阅者，首先得要有一个订阅器（统一管理所有的订阅者）。为了方便管理，我们会为每一个data对象的属性都添加一个订阅器（new Dep）。

订阅器里存着的是订阅者Watcher（后面会讲到），由于订阅者可能会有多个，我们需要建立一个数组来维护。一旦数据变化，就会触发订阅器的notify()方法，订阅者就会调用自身的update方法实现视图更新。

function Dep(){
 this.subs = [];
}
Dep.prototype = {
 addSub: function(sub){this.subs.push(sub);
 },
 notify: function(){
  this.subs.forEach(function(sub) {
   sub.update();
  })
 }
}

每次响应属性的set()函数调用的时候，都会触发订阅器，所以代码补充完整。

Observe.prototype = {
 //省略的代码未作更改
 defineReactive: function(data,key,value){
  let dep = new Dep();//创建一个订阅器，会被闭包在key属性的get/set函数内，因此每个属性对应唯一一个订阅器dep实例
  Object.defineProperty(data,key,{
   enumerable: true,//可枚举
   configurable: false,//不能再define
   get: function(){
    console.log('你访问了' + key);
    return value;
   },
   set: function(newValue){
    console.log('你设置了' + key);
    if (newValue == value) return;
    value = newValue;
    observe(newValue);//监听新设置的值
    dep.notify();//通知所有的订阅者
   }
  })
 }
}

实现Complie

compile主要做的事情是解析模板指令，将模板中的data属性替换成data属性对应的值（比如将{{name}}替换成data.name值），然后初始化渲染页面视图，并且为每个data属性添加一个监听数据的订阅者（new Watcher），一旦数据有变动，收到通知，更新视图。

遍历解析需要替换的根元素el下的HTML标签必然会涉及到多次的DOM节点操作，因此不可避免的会引发页面的重排或重绘，为了提高性能和效率，我们把根元素el下的所有节点转换为文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中。

注：文档碎片本身也是一个节点，但是当将该节点append进页面时，该节点标签作为根节点不会显示html文档中，其里面的子节点则可以完全显示。

Compile解析模板，将模板内的子元素#text添加进文档碎片节点fragment。

function Compile(el,vm){
 this.$vm = vm;//vm为当前实例
 this.$el = document.querySelector(el);//获得要解析的根元素 
 if (this.$el){
  this.$fragment = this.nodeToFragment(this.$el);
  this.init();
  this.$el.appendChild(this.$fragment);
 } 
}
Compile.prototype = {
 nodeToFragment: function(el){
  let fragment = document.createDocumentFragment();
  let child;
  while (child = el.firstChild){
   fragment.appendChild(child);//append相当于剪切的功能
  }
  return fragment;
  
 },
};

转载注明出处：http://www.heiqu.com/329.html

vue实现简单的MVVM框架(3)

相关推荐