【Vue原理】Compile - 源码版 之 generate 拼接绑定的事件

写文章不容易，点个赞呗兄弟


专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Compile - 源码版 之 generate 拼接绑定的事件

今天我们来探索事件的拼接啦，上一篇我们已经讲过了generate 阶段 节点数据的拼接

事件也属于其中一部分内容，但是由于内容实在太多太多太多太多，所以打算单独拿出来讲啦

这就是 Compile 的最后一篇文章了！终于终于发完了…真的发恶心了，估计网上找不着我这么详细的 compile 文章了（找到当我没说）

本文章很长，一万多字，但是其实都是代码和例子，帮助我们理解的，没有什么，一路看下来绝壁没有压力，源码也是简化过的

好吧，开始正文

从上篇文章我们知道了，节点数据拼接，调用的是 genData$2 方法

现在我们就来回顾下这个方法（只保留了 事件 相关）

function genData$2(el, state) {   



    var data = '{';


   .....已省略其他属性拼接

   // 事件
   if(el.events) {
        data += genHandlers(el.events, false) + ",";
   } 

   // 原生事件
   if(el.nativeEvents) {
        data += genHandlers(el.nativeEvents, true) + ",";
   }



   data = data.replace(/,$/, '') + '}';   



   return data

}

没错，事件，分为 组件原生事件 和 事件

组件原生事件

顾名思义，就是给组件绑定的原生DOM事件，像这样

事件

而这个呢，包含范围很广，包括 组件上的自定义事件，以及 标签上的原生事件，如下

他们调用的方法都是 genHandlers，都是把结果值直接拼接上 data ，那有什么不同呢？

不同就在于给 genHandlers 传的最后一个参数，现在我们把视角切到 genHandlers 方法上

---

genHandlers

function genHandlers(
    events, isNative

) {    

    var res = isNative ? 'nativeOn:{': 'on:{';    

    var handler = events[name]    



    for (var name in events) {

        res += ` ${name} : ${ genHandler(name,handler )} ,`
    }    



    return res.slice(0, -1) + '}'

}

这里非常明显看到

当你传入 isNative=true 的时候，该事件即为 组件原生DOM 事件，需要拼接在 nativeOn:{} 字符串上

否则，就是事件，拼接在 on:{} 字符串上

先给个简单的例子来熟悉下

拼接后的字符串是这样的

`_c('div', {
    on: { "click": aa }
},[
    _c('test', {
        on: { "test": cc },
        nativeOn: {
            "input":$event=>{
                return bb($event)
            }
        }
    })
])`

好的，大家大概有个了解了，下面我们将会探索事件内部复杂的拼接了

因为需要涉及到各种许多的 modifiers

这次之前，先给大家介绍 Vue 内部已经设置了的按键值

---

按键内部配置

Vue 把几个常用的按键给配置了，当然了，内部设置的键名，你都是可以覆盖配置的

很简单，过下眼，没啥好说的，不过下面会用到

记住，keyCodes 和 keyName 是 Vue 内部配置键盘的变量

// 键盘和 code 映射

var keyCodes = {    

    esc: 27,  tab: 9,    

    enter: 13, space: 32,    

    up: 38, left: 37,    

    right: 39, down: 40,    

    delete: [8, 46]

};



// 键盘名映射

var keyNames = {    

    esc: 'Escape',    

    tab: 'Tab',    

    enter: 'Enter',    

    space: ' ',  // IE11 使用没有 Arrow 前缀的键名

    up: ['Up', 'ArrowUp'],    

    left: ['Left', 'ArrowLeft'],    

    right: ['Right', 'ArrowRight'],    

    down: ['Down', 'ArrowDown'],    

    delete: ['Backspace', 'Delete']

};

看完了 Vue 的按键配置，我们来看 Vue 内部配置的修饰符

---

修饰符内部配置

相信大家在项目中，都有用到过修饰符吧，很方便对不对，就是下面这些 stop prevent，很方便对不对

简直不要太方便，其实 Vue 也没做什么太多东西，不过是帮我们自动组装上了几个语句

来看看 Vue 配置的修饰符

var modifierCode = {    

    stop: '$event.stopPropagation();',    

    prevent: '$event.preventDefault();',    

    ctrl: genGuard("!$event.ctrlKey"),    

    shift: genGuard("!$event.shiftKey"),   

    alt: genGuard("!$event.altKey"),    

    meta: genGuard("!$event.metaKey"),    

    self: genGuard("$event.target !== $event.currentTarget"),    

    left: genGuard("'button' in $event && $event.button !=