【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 方法上

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 !== 0"),    

    middle: genGuard(""button" in $event && $event.button !== 1"),    

    right: genGuard(""button" in $event && $event.button !== 2")

};

像 stop，prevent 直接就可以拼接在回调中

比如你绑定的事件名是 aaa 吼，并且使用了修饰符 stop，就会这么拼接

"function($event ){ " + 

    "$event.stopPropagation();" + 

    " return "+ aaa +"($event);" +

"}"

你肯定看到了其他修饰符使用了一个函数 genGuard ，马上看下

var genGuard = function(condition) {    

    return ` if ( ${ condition } ) return null `

}

这个函数炒鸡简单，就是给你的事件回调拼接执行条件（当你使用了相关修饰符）

比如使用了 ctrl ，那么就会拼接上

if( !$event.ctrlKey ) return null

也就是说，当你按的不是 ctrl 的时候，直接 return，不执行下面

在比如一个 middle，鼠标中间，会拼接上

if( ""button" in $event && $event.button !== 1" ) 
return null

当鼠标点击的按键不是 1 的时候，直接 return，不执行下面（下面就会执行你绑定的方法）

现在再来看看 Vue 是怎么给你拼接上按键的修饰符的吧，来看一个方法

这个方法，后面会用到，这里预言，记住哦

function genKeyFilter(keys) {    



    var key = keys.map(genFilterCode).join("&&")   



    return ` if( !("button" in $event) && ${ key } )
             return null `

}

这个方法跟前面的方法，拼接的内容差不多，只是条件不一样，条件是这样

` if( !("button" in $event) && ${ key } )  
return null `

这个 key 肯定是一个很重要的条件，怎么得到呢，两个东西

keys，genFilterCode

现在一个个来说一下

是一个数组，保存的是你添加的按键修饰符，可以是数字，可以是键名，比如

于是 keys = [ "enter" , 86 ]，其中 enter 就是 enter 键，Vue 内部定义过，86 就是 键名 v 的值

然后会遍历 keys，逐个调用 genFilterCode 去处理每个键值

现在看下它的源码

function genFilterCode(key) {    



    // 绑定的 modifier 是数字

    var keyVal = parseInt(key);    



    if (keyVal) {        

        return "$event.keyCode!==" + keyVal

    }    



    // 绑定的 modifier 是键名

    var keyCode = keyCodes[key];    

    var keyName = keyNames[key];  



    return `
        _k(
            $event.keyCode , 
            ${ key } , ${ keyCode }, 
            ${ $event.key } , ${ keyName }
        )
    `

}

这就简单了，直接 返回字符串

"$event.keyCode!==" + keyVal

于是回调就可以拼接上一个执行条件，比如key 是数字 86

if( !("button in $event) && $event.keyCode!== 86 )  return null

这句话的意思就是当你按下的键不是 86 的时候，就return，因为你监听的是 86 嘛，按其他键肯定是不执行的啦

如果你的 key 是个名字，经过 parseInt 就变成 NAN，于是就走到下面一步了

哦吼，好像直接返回了呢，并且还从 keyName 和 keyCode 两个对象中去获取键值和键名

keyName 和 keyCode 前面已经列出来了，就是两个大对象，忘记可以翻上去看，Vue 内部的变量，这里获取会得到什么呢

比如你的键名是 enter， 获取之后

那么 keyName = "Enter" , keyCode = 13

但是，这个键名不一定要存在 Vue 自己定义的 keyName 和 keyCode 中，所以你从这两个变量中获取也可能是 undefined

因为这个键名，你可以自定义

具体可以看官方文档

https://cn.vuejs.org/v2/api/#...

我们现在来看看他的返回值

`_k(
    $event.keyCode ,    

    ${ key } , 

    ${ keyCode },

    $event.key , 

    ${ keyName }

)`

看着上面的字符串，我们一个个讲

五个参数，key 就是你绑定的键名或键值，keyName 和 keyCode 上面讲过了

剩下两个参数

$event.keyCode / $event.key

$event 是事件对象，不用说了

$event.keyCode 是你按下的键的值

$event.key 是你按下的键的名

比如你按下 v，事件对象就会包括这个键的信息

返回 _k 函数的话，比如按下 v，事件回调的执行条件就变成

if( 
    !("button" in $event) &&
    _k(
        $event.keyCode ,        

        "v" , undefined,

        $event.key  , undefined
    )
)  return null

也就是说，每次按下键盘，都会去调用一遍 _k 去检查按键

_k 的本体其实是函数 checkKeyCodes，源码如下

function checkKeyCodes(
    eventKeyCode, key, keyCode, 
    eventKeyName, keyName

) {    



    // 比如 key 传入的是自定义名字  aaaa

    // keyCode 从Vue 定义的 keyNames 获取 aaaa 的实际数字
    // keyName 从 Vue 定义的 keyCode 获取 aaaa 的别名
    // 并且以用户定义的为准，可以覆盖Vue 内部定义的
    var mappedKeyCode = config.keyCodes[key] ||keyCode;    



    // 该键只在 Vue 内部定义的 keyCode 中 

    if (keyName && eventKeyName && !config.keyCodes[key]) {        

        return isKeyNotMatch(keyName, eventKeyName)

    } 

    // 该键只在 用户自定义配置的 keyCode 中
    else if (mappedKeyCode) {        

        return isKeyNotMatch(mappedKeyCode, eventKeyCode)

    } 

    // 原始键名
    else if (eventKeyName) {        

        return hyphenate(eventKeyName) !== key

    }
}

乍一看，好像很复杂？其实这个函数作用，就是检查 key

比如你绑定 v，当你按下 v 的时候，这个函数就返回 false

如果按下其他键，则返回 true，回调执行条件为 真，所以就直接 return null，不会执行下面绑定的回调

番外："button" in $event

当鼠标按下的时候，这个表达式就为 true

而键盘按下的时候，事件对象不存在 button 这个值

所以 【!"button" in $event】 表示按键时必须没有鼠标按下

但是这个条件只有在【 非内置修饰符 】才会存在，就是说 ctrl 那些键是没有这个条件的

所以你可以绑定 click + ctrl 事件，比如

这么绑定时候，直接点击是无效的，必须按下 ctrl 再点击

但是你不能绑定 click + 普通按键，比如 click+v

就算你这么绑定了，也是没用的，直接点击也会触发 而不用 v

下面现在我们继续分析上面的 checkKeyCodes

这个就是你自己配置的键值键名表，下面是我的配置

检查按下的键，是否【不和】 配置的键值对 匹配

function isKeyNotMatch(
    expect, actual

) {    



    if (Array.isArray(expect)) {        

        return expect.indexOf(actual) === -1

    } else {        

        return expect !== actual

    }
}

注意里面的匹配符是 ===-1 和 !== ，意思就是不匹配才返回 true，匹配则返回 false

比如你按下的键是 enter，Vue 内部配置了 { enter:"Enter" }

而 参数 actual 是调用 isKeyNotMatch 传入的事件对象获取的键名，也是 "Enter"

于是调用这个函数

isKeyNotMatch( "Enter" , "Enter" )

匹配成功，返回 false，也就是 checkKeyCode（_k） 返回false，回调执行过滤条件为假，不会 return null，这样才会执行下面

配置数组的话也是同理

var hyphenate = function(str) {    
    return str.replace(/B([A-Z])/g, "-$1").toLowerCase()
}

把驼峰改成 - 命名

Vue 官方文档说了，不支持驼峰修饰符

1、先匹配 Vue 内部配置的键值对

但是要保证这个键不存在用户重定义中，因为必须要用户自定义为主

2、匹配用户自定义的键值对

3、匹配原始键值对

也就是说，你直接写键盘上的键名也是ok 的

像这样，就绑定了 键 v 和 键 b

哎哟，我们已经讲了这么多啊，下面准备开始我们的主菜了

在一开始的 genHandlers 中出现的女猪脚 genHandler，用于逐个处理 修饰符的 她

这个函数有点长，用于处理修饰符，但是其实内容并不复杂，逻辑也很清晰，但是第一眼肯定看得烦，虽然我已经极大简化，你可以跳到后面的解析，对照着看一下

function genHandler(name,handler) {    



    // 没有绑定回调，返回一个空函数
    if (!handler) {        

        return "function(){}"

    }    



    // 如果绑定的是数组，则逐个递归一遍
    if (Array.isArray(handler)) {    
    

        return "[" + handler.map(handler) => {            

            return genHandler(name, handler);

        }).join(",") + "]"



    }    



    // 开始解析单个回调

    var isMethodPath = simplePathRE.test(handler.value);    

    var isFunctionExpression = fnExpRE.test(handler.value);    



    // 没有 modifier

    if (!handler.modifiers) {     

   

        // 是一个方法，或者有 function 关键字，可以直接作为回调
        if (isMethodPath || isFunctionExpression) {            

            return handler.value

        }        



        // 内联语句，需要包裹一层
        return "function($event){" + handler.value + ";}" 
    } 

    else {        



        var code = ""; // 保存按键修饰符

        var genModifierCode = ""; // 保存内部修饰符
        var keys = [];        



        for (var key in handler.modifiers) { 

          

            if (modifierCode[key]) {

                ....被抽出，放在后面
            } 
            
            // 精确系统修饰符
            else if (key === "exact") {
                ....被抽出，放在后面
            } 

            // 普通按键
            else {
                keys.push(key);
            }
        }  

      

        // 开始拼接事件回调！！！！



        // 拼接 Vue 定义外的按键修饰符
        if (keys.length) {
            code += genKeyFilter(keys);
        }   

    

        // 把 prevent 和 stop 这样的修饰符在 按键过滤之后执行

        if (genModifierCode) {
            code += genModifierCode;
        }        



        // 事件回调主体

        var handlerCode = 
              isMethodPath                



              // 执行你绑定的函数

              ? "return " + handler.value + "($event)"
              : (
                  isFunctionExpression                    



                  // 如果回调包含 function 关键字，同样执行这个函数

                  ? "return " + handler.value + "($event)"
                  : handler.value;
              )        



        return ` function($event) { 

              ${ code + handlerCode }         
        } `

    }


}

下面开始一点点解析上面的代码

// 包含function 关键字

var fnExpRE = /^([w$_]+|([^)]*?))s*=>|^functions*(/;



// 普通方法名

var simplePathRE = /^[A-Za-z_$][w$]*(?:.[A-Za-z_$][w$]*|["[^"]*?"]|["[^"]*?"]|[d+]|[[A-Za-z_$][w$]*])*$/;

不解释这么多，直接看例子

fnExpRE 专门匹配有函数体的

simplePathRE 专门匹配函数名

所以其中的 isMethodPath 表示事件绑定的值 是否是函数名

isFunctionExpression 表示绑定值是否是 函数体

在 parse 阶段，会把绑定的事件解析过，所有的 modifiers 都解析成一个对象

比如

所以 handler.modifiers 可以直接遍历而取到每一个 修饰符

这是被抽取的代码

if (modifierCode[key]) {    

    // 拼接内部的的事件修饰符

    genModifierCode += modifierCode[key];
}

先判断这个修饰符是否存在 Vue 内部的修饰符中

关于 modifierCode 可以看上面，已经记录过啦

比如吼

那么拼接修饰符吼，genModifierCode 就是

` 
  $event.stopPropagation(); 
  if( "button" in $event && $event.button !== 1" ) 
    return null

`

或许你不知道什么是系统修饰键，我一开始也不知道，看了源码才知道有这个东西，如下的 exact

官方文档地址：https://cn.vuejs.org/v2/guide...

在我的理解是，取消组合键的意思

比如你绑定了 按键 v，触发的条件有几个？

1、直接 按 v 键

2、ctrl + v 、 shift +v 、 alt +v 等等组合键

如果你添加了 exact 这个修饰符的话

那么触发条件，只有你只按下这个键的时候才会触发，也就是说一起按其他键无效

来看下从 genHandler 抽出的源码

else if (key === "exact") {    



    var modifiers = handler.modifiers;


    genModifierCode +=

    genGuard(
        ["ctrl", "shift", "alt", "meta"]        



        // 过滤拿到没写 modifiers 的按键

        .filter(keyModifier = >{            

            return ! modifiers[keyModifier];

        })
    
        .map(keyModifier = >{            

            return "$event." + keyModifier + "Key"

        })

        .join("||")
    );
}

看源码中，匹配的组合键有四个

ctrl , shift , alt ,meta

看源码中，就是筛选出你没有绑定的功能键

然后筛选出来的键被按下时，直接 return null

比如你绑定了 ctrl，并使用了 exact

那么只有你【只按下】ctrl 的时候，才会触发回调

看下拼接结果

` _c("input", {
    on: {
        "keyup" $event =>{

            if (!$event.ctrlKey) 

                return null;

            if ( $event.shiftKey || $event.altKey || $event.metaKey) 
                return null;

            return testMethod($event)
        }
    }
}) `

1、没有按下 ctrl 的时候

2、按下了 ctrl的时候，但是也按下了 shfit 等其他功能键

同理，对于其他普通键也是一样的，当你不需要使用到组合键的时候，添加 exact 就好了

else{
    keys.push(key);
}

这是最普通的，当你添加的修饰符，不在Vue内部定义的修饰符中，也没有 exact

那么就直接数组收集你添加的按键

比如

那么 keys = [ "v" , "b" ,"c" ]

下面开始本函数最重要的部分了，打起精神嘞

拼接事件回调的三个重点

1、拼接按键修饰符

2、拼接内置修饰符

3、拼接事件回调

if (keys.length) {
    code += genKeyFilter(keys);
}

genKeyFilter 上面已经讲过了，忘记的可以回头看看，这里给个结果就好了

比如

那么 keys = [ "v" , "b" ,"c" ]

最后拼接得到的 code 是

` if(
    !("button" in $event)&&
    _k($event.keyCode,"v",undefined,$event.key,undefined)&&
    _k($event.keyCode,"b",undefined,$event.key,undefined)&&
    _k($event.keyCode,"c",undefined,$event.key,undefined)
)
return null; `

调用了三个 _k 函数

if (genModifierCode) {
    code += genModifierCode;
}

genModifierCode 就是收集的 内部修饰符 和 带有 exact 的修饰符，上面有说明

拼接结果是 code

` 
 $event.stopPropagation();
 if(!$event.shiftKey) return null;
`

这里开始涉及到你绑定的回调了，你可以先尝试看下源码

var handlerCode = 

    isMethodPath    



    // 执行你绑定的函数

    ? "return " + handler.value + "($event)"
    : (
        isFunctionExpression        



        // 如果回调包含 function 关键字，同样执行这个函数

        ? "return (" + handler.value + "($event))"
        : handler.value;
    )

1、如果你绑定的是方法名

比如你绑定的方法名是

那么 handlerCode 是

"return aaa($event)"`

2、如果有函数体

比如

那么 handlerCode 是

"return (function(){}($event))"

3、如果只是内联语句

比如

那么 handlerCode 是

aa = 33

直接把这条语句当做 回调的一部分就好了

不知不觉，我们已经讲了很多内容，最后我们用一个例子去玩一下流程

收集内置修饰符

1、拼接按键修饰符

2、拼接内置修饰符

3、拼接事件回调

4、包装事件回调

比如下面的模板，我们来看看怎么拼接事件

genModifierCode = ` 
    if( !$event.ctrlKey ) return null
 `

keys.push("v")

调用 genKeyFilter ，传入 keys，得到 code

code = `
    if(
        !("button" in $event)&&
        _k($event.keyCode,"v",undefined,$event.key,undefined)
    ) 
    return null;
`

code = code + genModifierCode

handlerCode = ` 
    return test($event)
 `

` funciton($event){

    if( !$event.ctrlKey ) return null;

    if(
        !("button" in $event)&&
         _k($event.keyCode,"v",undefined,$event.key,undefined)
    )
    return null;

    return test($event)
}`

然后事件拼接就完成了！！！！！！！！！！

哟，别忘了，我们是要拼接到 render，赶快往上翻到 genHandlers

上面讲的只是事件回调，如果要拼接到 render 回调，我们还要做下操作

加上事件名，拼接 on 对象字符串里面，像这样，具体看上面的 genHandlers

`,on:{
    keyup: ...上面我们拼接的回调  } 

`

谢谢大家观看，辛苦了

鉴于本人能力有限，难免会有疏漏错误的地方，请大家多多包涵，如果有任何描述不当的地方，欢迎后台联系本人，领取红包