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

最新推荐文章于 2023-01-30 18:22:47 发布

chongzhun5695

最新推荐文章于 2023-01-30 18:22:47 发布

阅读量320

点赞数

原文链接：https://my.oschina.net/u/3060934/blog/3089610

版权

写文章不容易，点个赞呗兄弟 <br> <br> 专注 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 !== 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

现在一个个来说一下

1参数 keys

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

公众号

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

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

现在看下它的源码

2出现的函数 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 }
        )
    `

}

如果参数 key 是数字

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

"$event.keyCode!==" + keyVal

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

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

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

如果参数 key 是键名

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

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

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

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

那么 keyName = "Enter" , keyCode = 13

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

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

自定义键名

公众号

具体可以看官方文档

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

3genFilterCode 返回值

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

`_k(
    $event.keyCode ,    

    ${ key } , 

    ${ keyCode },

    $event.key , 

    ${ keyName }

)`

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

1 其中参数

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

剩下两个参数

$event.keyCode / $event.key

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

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

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

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

公众号

2 方法 _k 是什么

返回 _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

1 config.keyCodes

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

公众号

2 函数 isKeyNotMatch

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

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，这样才会执行下面

配置数组的话也是同理

3 出现的函数 hyphenate

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

把驼峰改成 - 命名

公众号

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

公众号

4 checkKeyCodes 的匹配顺序

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

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

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

3、匹配原始键值对

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

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

公众号

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

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

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 }         
        } `

    }


}

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

1出现的正则

// 包含function 关键字

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



// 普通方法名

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

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

fnExpRE 专门匹配有函数体的

公众号

simplePathRE 专门匹配函数名

公众号

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

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

2绑定的 handler.modifiers

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

比如

公众号

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

公众号

3 收集内部修饰符

这是被抽取的代码

if (modifierCode[key]) {    

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

    genModifierCode += modifierCode[key];
}

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

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

比如吼

公众号

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

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

`

4收集系统修饰键 exact

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

公众号

官方文档地址：https://cn.vuejs.org/v2/guide/events.html#exact-%E4%BF%AE%E9%A5%B0%E7%AC%A6

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

比如你绑定了按键 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 就好了

5收集其他按键

else{
    keys.push(key);
}

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

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

比如

公众号

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

6拼接事件回调

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

公众号

拼接事件回调的三个重点

1、拼接按键修饰符

2、拼接内置修饰符

3、拼接事件回调

1 拼接按键修饰符

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 函数

2 拼接内部修饰符

if (genModifierCode) {
    code += genModifierCode;
}

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

公众号

拼接结果是 code

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

3 拼接事件回调主体

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

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、包装事件回调

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

公众号

1、开始遍历修饰符

公众号

2、碰到 ctrl ，是内置修饰符，收集起来

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

3、继续遍历，碰到 v，不是内置，收集到 keys

keys.push('v')

4、遍历结束，开始拼接按键修饰符

调用 genKeyFilter ，传入 keys，得到 code

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

5、把内置修饰符放到按键修饰符后面

code = code + genModifierCode

6、开始拼接事件回调，是个方法名

handlerCode = ` 
    return test($event)
 `

7、ok，最后一步，开始组装

` 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: ...上面我们拼接的回调  } 

`

谢谢大家观看，辛苦了

最后

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

公众号

转载于:https://my.oschina.net/u/3060934/blog/3089610

chongzhun5695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue原理】Compile - 源码版之 generate 拼接绑定的事件

写文章不容易，点个赞呗兄弟 <br> <br>专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公...
复制链接

扫一扫