下面这里是我自己写的一个小型的vue，原理就是proxy：
//Proxy天生没有prototype，因此要加上，不然extends会报错
Proxy.prototype = Proxy.prototype || Object.prototype class myVue extends Proxy {
constructor(options) {
let data = options.data || {} super(data, {
get(target, name, proxy) {
if(name in target) {
return target[name]
} else {
throw new Error(`不存在data'${name}'`)
}
},
set(target, name, value, proxy) {
target[name] = value
_container.render()
}
})
// 不能够在constructor里面设置data的值，因此公共变量只能在constructor里面定义，通过函数调用传递
// this.$el = document.querySelector(options.el) //data被类本身代理，而其他options经过初步处理后我们保存在一个变量对象_container中
let _container = {}
window.onload = function() {
_container.data = data
_container.el = document.querySelector(options.el)
_container.oldEl = document.querySelector(options.el).cloneNode(true)
_container.methods = options.methods || {}
//特殊地我们需要一个重新渲染el的内部方法也要存在_container里面
//绑定_container本身是为了render函数能够使用存在_container里面的options的内容
_container.render = render.bind(_container)
_container.render()
}
}
//get只能get到data对象里面的值，所以在内部定义的函数也没办法用
// zzz(){
// alert(123)
// }
} function render() {
let _computer = (e) => {
let val = ''
with(this.data){
val = eval(e)
}
return val
} //先把dom上的替换成“备份”
this.el.parentNode.replaceChild(this.oldEl, this.el);
//"备份"切换到this.el上等待被渲染
this.el = this.oldEl
//再复制一份留“备份”
this.oldEl = this.oldEl.cloneNode(true) //处理花括号
this.el.innerHTML = this.el.innerHTML.replace(/\{\{[^\{\}]+\}\}/, (str) =>{
let e = str.substring(2,str.length-2)
return _computer(e)
}) //处理:属性
let nodes = this.el.getElementsByTagName('*')
Array.from(nodes).forEach(node => {
Array.from(node.attributes).forEach(attr => {
if(attr.nodeName.startsWith(':')){
node.setAttribute(attr.nodeName.substring(1),_computer(attr.value))
node.removeAttribute(attr.nodeName)
} else if (attr.nodeName.startsWith('@')) {
if(!this.methods[attr.value]) {
throw new Error(`methods里面没有方法'${attr.value}'`)
}
node.addEventListener(attr.nodeName.substring(1),function(){
this.methods[attr.value]()
}.bind(this),false)
node.removeAttribute(attr.nodeName)
}
})
})
}
对应调用的HTML:
<!DOCTYPE html>
<html>
<head>
<title>myVue</title>
<script src="my-vue.js"></script>
<script>
let vm = new myVue({
el: '#app',
data: {
aaa: 123,
bbb: '你好啊，张啊咩'
},
methods:{
sayHello() {
alert('hello')
}
}
})
console.log(vm.aaa)
</script>
</head>
<body>
<div id="app">
{{aaa}}
<span :title="bbb" @click="sayHello">
hahaha
</span>
</div>
</body>
</html>