实现一个简易vue
- vue主要的功能实现主要分为3部分：
- 数据劫持/数据代理：数据改变时通知相关函数进行更新操作
- 数据依赖收集：建立保存dom节点与数据的关联关系
- 模板与数据之间的绑定：接受到新数据时对dom节点进行更新（Watcher)
- 代码：
构造方法中拿到传入的参数，再调用一些方法对上面提到的3部分功能进行实现。这些方法都放在了原型链上（prototype）,
这样方便在方法中使用实例的context（this）。
function VueComponent(vueComponentProps = {}) {
const {
template = '',
data = () => {},
methods = {},
watch = {}
} = vueComponentProps;
this.$watch = watch;
this.$watchers = {};
this.$methods = methods;
this.$data = data() || {};
bindVueProperties(this,data() || ｛｝);
this.observe(this.$data);
this.observe(this);
bindVueProperties(this,this.$methods);
this.$template = htmlStringToElement(template);
this.$vueDomNode = this.compile();
}
//因为之后我们需要在执行methods中的方法可能同时要访问data和methods，
//所以这里利用bindVueProperties将data和methods复制到实例的根层。
function bindVueProperties(vueInstance, obj) {
for(let key of Object.keys(obj)) {
vueInstance[key] = obj[key];
}
}
· 数据劫持/数据代理
VueComponent.prototype.observe = function(data, path = "") {
const self = this;
if(!data || Object.prototype.toString.call(data) !== "[object Object]") {
return;
}
//递归遍历data的所有key键值对，如果当前的key对应的值是一个引用类型，那么用Proxy进行数据代理的实现
//如果是原始类型（string, number）,例如data = {someKey : 1}时，我们对someKey的值“数字1”无法用Proxy进行拦截
//这时采用Object.defineProperty中的get和set来实现。当然两种情况都可以用Object.defineProperty进行实现，
//Proxy比较灵活，能够拦截的种类比较多。在数据改变时我们要通知相应的watcher来更新依赖该数据的dom节点。
const keys = Object.keys(this.$data);
for(let key of keys) {
let value = data[key];
const currentPath = path + key;
if(typeof value === 'object') {
//如果是object，则递归进入下一层结构创建代理
self.observe(value,currentPath + '. ');
data[key] = new Proxy(value, {
set(target, property, value, reseiver) {
if(!Reflect.set(target, property, value, reseiver)) {
return false;
}
const keyPath = currentPath + "." + property;
//属性改变时会通知该key对应的watcher进行更新，并执行watch里的相应key的回调
updateWatcher(self.$watchers[keyPath],value);
self.$watch[keyPath] && self.$watch[keyPath](value);
return true;
},
get(target, property, reseiver) {
return target[property];
}
});
}else {
//Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
Object.defineProperty(data, key, { //Object.defineProperty(要定义属性的对象，要定义或修改的属性的名称或symbol，要定义或修改的属性描述符)
enumerable: true, //enumerable 当且仅当该属性的enumerable键值为true时，该属性才会出现在对象的枚举属性中
configurable: false, //configurable 当且仅当该属性的configurable键值为true时，该属性的描述符才能被改变，同时该属性也能从对应的对象上被删除
get() { //当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入this对象（由于继承关系，这里的this不一定是定义该属性的对象）。该函数的返回值会被用作属性的值
return value;
},
set() { //当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的this对象
value = newVal;
self.$watch[currentPath] && self.$watch[currentPath](newVal);
updateWatcher(self.$watchers[currentPath], newVal);
}
})
}
}
}
我们在编译模板的时候会进行node上数据依赖的收集与事件的监听，首先我们先要把构造函数传进来的模板字符串转换成dom。
这里用一个htmlStringToElement来实现该功能，思路就是利用html中的template标签来创建该component的dom节点。
function htmlStringToElement(html = '') {
const template = document.createElement("template"); //创建一个template标签
template.innerHTML = html.trim(); //把传进来的html字符串加在template标签中
return template.content.firstChild; //返回此时的template内容第一个元素就是传进来的html字符串的dom了
}
然后进行模板解析，compile函数中会递归遍历所有的node上的attribute，如果是v-model我们进行双向数据绑定
以冒号“：”开头的属性我们进行相应数据的监听，如果是“@”开头的则添加该节点上相应的事件监听。
VueComponent.prototype.compile = function() {
const self = this;
const el = self.$template;
const data = self;
if(!(el instanceof HTMLElement)) {
throw new TypeError("template must be an HTMLElement instance");
}
const fragment = document.createDocumentFragment();
let child = el.firstChild;
while(child) {
fragment.appendChild(child);
child = el.firstChild;
}
const reg = /\{\{(.*?)\}\}/g; //匹配{{xx.xx}}的正则
//对el中的内容进行相应替换
const replace = (parentNode)=> {
const children = parentNode.childNodes;
for(let i = 0; i < children.length; i++) {
const node = children[i];
const nodeType = node.nodeType;
const text = node.textContent;
//如果是text节点，我们在这里判断内容是否存在模板变量
if(nodeType === Node.TEXT_NODE && reg.test(text)) {
node.textContent = text.replace(reg, (matched, placeholder) => {
let pathArray = [];
const textContent = placeholder.split('.').reduce((prev, property) => {
pathArray.push(property);
return prev[property];
},data);
const path = pathArray.join("."); //path就是当前key的层级路径，例如b:{a:1}中a的路径就是a.b
self.$watchers[path] = self.$watchers[path] || [];
self.$watchers[path].push(new Watcher(self, node, "textContent", text));
return textContent;
})
}
//如果是element则进行attribute的绑定
if(nodeType === Node.ELEMENT_NODE) { //Node.ELEMENT_NODE代表元素节点类型。
const attrs = node.attributes; //attributes属性返回该节点的属性节点【集合：不重复，无序】
for(let i = 0; i < attrs.length; i++) {
const attr = attrs[i];
const attrName = attr.name;
const attrValue = attr.value;
self.$watchers[attrValue] = self.$watchers[attrValue] || [];
//如路过属性名称为v-model我们需要添加value属性的绑定和输入事件监听，这里假设都为input事件，可替换为change事件
if(attrName === 'v-model') {
node.addEventListener("input",(e) => {
const inputVal = e.target.value;
const keys = attrValue.split(".");
const lastKey = keys.splice(keys.length - 1)[0];
const targetKey = keys.reduce((prev, property) => {
return prev[property];
}, data);
targetKey[lastKey] = inputVal;
});
}
//对value属性的绑定
if(attrName === ':bind' || attrName === 'v-model') {
node.value = attrValue.split(".").reduce((prev,property) => {
return prev[property];
},data);
self.$watchers[attrValue].push(new Watcher(self, node, "value"));
node.removeAtrribute(attrName);
}else if(attrName.startsWith(":")) { //startsWith用于检测字符串是否以指定的前缀开始
//对普通attribute的绑定
const attributeName = attrName.splice(1);
const attributeValue = attrValue.split(".").reduce((prev,property) => {
return prev[property];
}, data);
node.setAttribute(attributeName, attributeValue);
self.$watchers[attrValue].push(new Watcher(self, node, attributeName));
node.removeAttribute(attrName);
}else if (attrName.startsWith("@")) {
//事件监听
const event = attrName.splice(1);
const cb = attrValue;
node.addEventListener(event, function() {
//data和methods同时放在了实例的根层，所以这里的context设置为self，就可以在方法中同时访问到data和其他methods了
self.$methods[cb].call(self);
});
node.removeAttribute(attrName);
}
}
}
//如果存在子节点，递归调用replace
if(node.childNodes && node.childNodes.length) {
replace(node);
}
}
}
replace(fragment);
el.appendChild(fragment);
return el;
}
数据改变时所关联的node需要进行更新这里一个watcher对象来进行node与数值之间的联系，并在数据改变时执行相关的更新视图操作。Watcher类主要负责接收到数据更新通知时，对dom内容的更新，监听到数据改变时会调用updateWatcher这个辅助函数来执行该数据关联的所有dom节点更新函数
function updateWatcher(watchers = [], value) {
watchers.forEach(Watcher => {
Watcher.update(value);
})
}
创建watch实例时我们会对该dom节点node，关联的数据data，还有所对应的attribute进行保存，这里的template是要保存原始的模板变量，例如“{{article.test}}:{{author}}”。之后执行update函数更新TextNode中的内容时会用到，数据更新被拦截后执行updateWatcher，其中又会执行所有依赖的watcher中的update函数。update函数会根据attribute的类型来判断如何更新dom节点。如果是更新TextNode，其中会包含一个或多个模板变量，所以之前要保存原始的template，将原始的模板中各个变量依次替换
function Watcher(data, node, attribute, template) {
this.data = data;
this.node = node;
this.atrribute = attribute;
this.template = template;
}
Watcher.prototype.update = function(value) {
const attribute = this.attribute;
const data = this.data;
const template = this.template;
const reg = /\{\{(.*?)\}\}/g; //匹配{{xx.xx}}的正则
if(attribute === "value") {
this.node[attribute] = value;
}else if(attribute === "innerText" || attribute === "innerHTML" || atrribute === "textContent") {
this.node[attribute] = template.replace(reg, (matched, placeholder) => {
return placeholder.split(".").reduce((prev, property) => {
return prev[property];
}, data);
});
}else if(attribute === "style") {
thie.node.style.cssText = value;
}else {
this.node.setAttribute(attribute, value);
}
}
测试代码
<script>
const IndexComponent = new VueComponent({
data(): => {
return {
article: {
title: "简易版vue"
},
author: "xx"
}
},
watch: {
author(value) {
console.log("author:", value);
}
},
methods: {
onButtonClick() {
this.author = "cc";
alert("clicked!");
}
},
template:
`
<div>
<div>template及其他功能测试</div>
<div>{{article.title}} : {{author}}</div>
<div><input type="text" v-model="article.title"></div>
<div><input type="text" v-model="author"></div>
<div><button @click="onButtonClick">click</button></div>
</div>
`
});
window.onload = function(){
document.getElementById("root").appendChild(IndexComponent.$vueDomNode);
}
</script>
<body>
<div id="root"></div>
</body>
