拆解Vue - 手写MVVM (1)

目的

平日的工作都是写业务，使用 ElementUi，Vant 等等框架写业务，使用Echart.js , Video.js等库写各部分的功能，直到最近遇到了一个纯Js项目…

所以本系列文章的目的就是：通过讲故事的方式，手写一个mvvm的过程，来稍稍加强一些Js的编程能力.

MVVM组成及需要实现部分

某地发生了一起突发事件，遗憾的是，当地并没有监控系统，相关人员无法及时处理信息，该事件陷入一筹莫展装之际，上级果断成立紧急预案中心，发动群众，铺网调查，以及迅速创建一个天眼系统…

一个天眼系统，要铺满摄像头(observer)，照亮世界任何一个角落，对外要留给热心市民（compile）提供线索，内部由办公室中的办事员（watcher），统一分析所有信息，发出相关行动指令。

接到任务的 ifredom 同学，经过分析调查发现，天眼应该最终由这具体的几部分组成：

1. 一个html页面, 用来调用最终写好的mvvm框架 index.html
2. MVVM的三大核心部分之一: observer.js（天网监控系统）， 能够对所有属性进行监听，并在发现变动时，发送消息给通知中心。
3. MVVM的三大核心部分之一: compile.js（朝阳市民）， 朝阳市民遍布京城，他们对每个节点的指令进行地毯式扫描和解析，并根据办事员的指令, 替换模板数据，以及绑定相应的更新函数
4. MVVM的三大核心部分之一: watcher.js（办事员），通过天网系统分析所有变化情况，发现变动情况后，通过控制中心，通知朝阳市民，朝阳市民执行对应指令
5. 通知中心: dep.js，(我就是工具人，发消息，收消息)
6. 变化中心: updater() (单独的方法，何不存放在 dep.js 中节约文件呢)
7. 中枢办公室： mvvm.js （…）

Dep

ifredom同学很慌张，天网系统不好搞啊，还是先挑简单的搞. 
工具人，就是你: 消息中心

思索中…嗯，消息中心就是存储消息，接受消息，发送消息的地方。消息中心的名字取为Dep，先写一个 allMessage来存消息， 再写一个sendMessage发消息。 完美，消息中心成立了。

class Dep{
  constructor(){
    this.allMessage = [];
  }
  sendMessage(){
    console.log("发个消息");
  }
}

// 创建
var dep = new Dep();

dep.sendMessage(); 
// >> 发个消息

不太对啊，这是自娱自乐，给谁发都不知道，得添加个方法，让热心市民收到消息才行.

class Dep{
  constructor(){
    this.allMessage = [];
  }
  addFollower(oneMessage){
    this.allMessage.push(oneMessage);
  }
  sendMessage(){
    console.log("发个消息");
  }
}

// 创建
var dep = new Dep();

var xiaoming = {
  	weibo(){console.log("我，小明，weibo收到消息了");}
};
var xiaohong = {
	zhihu(){console.log("我，小红，zhihu收到消息了");}
};

dep.addFollower(xiaoming);
dep.addFollower(xiaoming);

dep.sendMessage(); 
// >> 发个消息
// >> ...
// >> ...

怎么发了消息，小红小明没收到消息呢？原来他们一个用weibo，一个用zhihu，看来还得统一一下接收消息的方法，下个文件规定一下，热心市民都用 getMessage 来收消息

class Dep{
  constructor(){
    this.allMessage = [];
  }
  addFollower(oneMessage){
    this.allMessage.push(oneMessage);
  }
  sendMessage(){
    console.log("发个消息");
  }
}

// 创建
var dep = new Dep();

var xiaoming = {
	getMessage(){
    console.log("我，小明，收到消息了");
  }
};
var xiaohong = {
	getMessage(){
    	console.log("我，小红，收到消息了");
  	}
};

dep.addFollower(xiaoming);
dep.addFollower(xiaoming);

dep.sendMessage(); 
// >> 发个消息
// >> ...
// >> ...

怎么发了消息，还没收到？原来是偷懒了，写了个假的通知，得通知他们每一个人才行。

class Dep{
  constructor(){
    this.allMessage = [];
  }
  addFollower(oneMessage){
    this.allMessage.push(oneMessage);
  }
  sendMessage(){
    console.log("发个消息");
    this.allMessage.forEach((sub)=>sub.getMessage());
  }
}

// 创建
var dep = new Dep();

var xiaoming = {
	getMessage(){
    console.log("我，小明，收到消息了");
  }
};
var xiaohong = {
	getMessage(){
    	console.log("我，小红，收到消息了");
  	}
};

dep.addFollower(xiaoming);
dep.addFollower(xiaoming);

dep.sendMessage(); 
// >> 发个消息
// >> 我，小明，收到消息了
// >> 我，小红，收到消息了

总算收到消息了，完美！此时17:00的整点钟声想起，ifredom伸伸懒腰，又到了下班收工的时间了.

未完待续…

------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<