实现一个 MVVM 模式
- 1、将 options 参数绑定到 this 上
- 2、beforeCreated 生命周期：如果有
beforeCreate执行beforeCreate方法 - 3、数据代理：将 data 和 methods 中的属性使用 Object.definePrototype 代理到 this 上，实现使用 this.key 访问到 data 和 methods 对象里的属性。
- 4、数据劫持（核心）：遍历 data 中的属性，使用 Object.definePrototype 给它们添加 get 和 set 方法，当获取时触发 get 方法如果是编译阶段的触发，就订阅这条信息（信息的来源在编译阶段存储到全局变量 window.target 中），如果是修改 data 中的数据触发 set 方法，并调用 Dep 类的发布方法。Dep 类中有一个数组用来存储依赖信息，有一个 on 方法向数组里面 push 来实现订阅，有一个 emit 方法实现遍历数组中的数据并触发里面对应的更新节点的方法。
- 5、created 生命周期：如果有
created执行 created 方法 - 6、编译：获取所有 DOM 节点，将真实 DOM 转化为文档碎片存储在内存中提高性能。遍历内存中的 DOM 节点，如果 nodeType 是 1（元素） 或 3（文本节点）并且正则匹配到双大括号，则将更新节点的方法存储到全局变量 window.target 中，使用 node.textContent 方法实现双大括号内容的编译，然后清空全局变量；如果检测到 nodeType 是 1（元素节点）
，遍历元素节点的所有属性，如果属性名有
@，就使用addEventListener绑定对应的事件，并把 methods 中对应的方法绑定到第二个参数上；如果是v-model则使用 addEventListener 绑定 input 事件，第二个参数方法中给对应的 data 属性赋值；其他的编译逻辑大致差不多 - 7、mounted 生命周期：如果有 created 属性执行 created 方法
import Compile from "./compile.js";
import Observe from "./observe.js";
import Proxy from "./proxy.js";
export default class Jddk {
constructor(options) {
if (typeof options.data === "function") {
this.$data = options.data();
} else {
this.$data = options.data;
}
this.$el = options.el;
this.$methods = options.methods;
this.$beforeCreate = options.beforeCreate;
this.$created = options.created;
this.$mounted = options.mounted;
// beforeCreate生命周期：此时实例刚开始初始化，还没有将data中的数据进行代理，无法使用this.xx获取到data中的数据
if (this.$beforeCreate) {
this.$beforeCreate();
}
// 数据代理：将data的数据代理到this上
new Proxy(this);
// 数据劫持：检测data中的数据改变
new Observe(this);
// created生命周期：此时data中的数据已经全部绑定到了this上，但是HTML还没有开始编译
if (this.$created) {
this.$created();
}
// 编译器
new Compile(this);
// mounted生命周期：此时HTML已经编译完
if (this.$mounted()) {
this.$mounted();
}
}
}实现 created，mounted 生命周期， 实现 v-model 双向数据绑定， 实现模板编译 实现 click,blur,focus 等事件
为了便于维护，将数据劫持、模版编译、数据监听的逻辑代码进行拆分
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent