vue源码分析（四）：事件指令
2020-09-03 本文已影响0人
姜治宇
vue中如何绑定事件的呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="doSth">点击一下</button>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
const vm = new Vue({
el:'#app',
methods:{
doSth(){
console.log('hello world')
}
}
})
</script>
如何实现事件指令呢？
先理顺一下思路：
1、将#app下的节点暂存到碎片fragment处理。
2、解析节点，判断是element类型时，获取其属性节点attributeNode，如果attributeNode包含“v-”，则说明是我们要处理的指令。
3、处理指令字符串。比如click代表事件类型，doSth就是vm中methods对象的key，用addEventListener绑定事件即可。
4、处理完毕后将节点塞回原位。
function Vue(options){
this.$options = options
this._data = this.$options.data
this.$compile = new Compile(options.el,this) //模板解析
}
function Compile(el,vm){
this.$vm = vm
this.$el = document.querySelector(el)
console.log(this.$el)
if(this.$el){
this.$fragment = this.node2Fragment(this.$el) //将节点转到fragment处理
this.init() //开始处理
this.$el.appendChild(this.$fragment) //塞回原位
}
}
Compile.prototype = {
//将#app里面的节点都转到文档碎片中
node2Fragment(el){
var fragment = document.createDocumentFragment()
var child = null
while(child = el.firstChild) {
fragment.appendChild(child)
}
return fragment
},
//处理碎片中的信息
init(){
this.compileElement(this.$fragment)
},
//正则匹配
compileElement(el){
var childNodes = el.childNodes;
[].slice.call(childNodes).forEach(node=>{
var text = node.textContent // 获取文本信息
var reg = /\{\{(.*)\}\}/
//这里增加指令的处理
if(node.nodeType === 1){
//如果是元素节点
this.compile(node)
} else if(node.nodeType === 3 && reg.test(text)) {
this.compileText(node,RegExp.$1)
} else if(node.childNodes && node.childNodes.length) {
//递归
this.compileElement(node)
}
})
},
//处理元素节点
compile(node){
var nodeAttrs = node.attributes; // 获取元素节点的所有属性，伪数组
[].slice.call(nodeAttrs).forEach(attr=>{
var attrName = attr.name;//获取属性名
if(attrName.indexOf('v-') === 0){//判断是否是指令
var exp = attr.value; //获取属性值，也就是触发的方法名
var dir = attrName.substring(2) // 截取字符串,得到on:click
if(dir.indexOf('on') === 0){ //判断事件指令
var eventType = dir.split(':')[1]; //获取事件类型
var fn = this.$vm.$options.methods && this.$vm.$options.methods[exp];// 获取函数
if(eventType && fn) {
node.addEventListener(eventType,fn.bind(this.$vm),false) // 注意fn里面的this指向
}
}
node.removeAttribute(attrName) // 从chrome控制台的Elements看文档结构，发现没有v-这样的属性（指令），所以需要处理完去掉
}
})
},
//用vm.data信息，替换大括号的name
compileText(node,exp){
node.textContent = this.getVMVal(exp)
},
//处理层级问题
getVMVal(exp){ // a.b.c
var val = this.$vm._data
var arr = exp.split('.') //["a", "b", "c"]
console.log(exp)
arr.forEach(k=>{
//debugger
val = val[k] // 层级递进
})
return val
}
}
