vue click事件统一操作

目的：

为了解决站外click事件需要进行统一操作——通过url Scheme来打开APP或者进入下载页，想对click事件进行拦截。

 

解决思路：

1.首先寻找vue的一些语法糖直接进行处理，比如使用事件修饰符，如@click.capture，这个修饰符是给元素添加监听器，当元素发生冒泡时，先触发带有这个修饰符的元素，如果有多个此修饰符，那么由外向内触发，想法是在最外层div进行操作，但是这个捕获的是所有点击事件，无论点击哪里都会捕获，而不是针对里面特定的@click，不能满足我们的要求。

 

2.想是否能自定义事件修饰符？—— vue不支持

vue中只能通过 config.keyCodes 自定义按键修饰符别名，不支持别的自定义。

 

3.因为是统一包装，加上一些统一的处理，并且不影响原有功能，有点像装饰者模式的特点。

所以想采用装饰器来进行统一处理，比较简单，而且很简洁，复用性很高。

但是！ 因为js中存在 变量提升和函数提升 ，所以装饰器不能用于普通函数，但是类或者类中的属性是不会提升的，才能使用装饰器。

比如：

var log = function () { 
    console.log(‘log')
}; 

@log
function foo() { 
}
但实际执行过程：
@log
function foo() {
}

var log;
log = function () {
    console.log(‘log')
};

 

 

4.因此！如果想装饰函数，直接使用 高阶函数 的形式进行包装。

高阶函数：高阶函数就是一个接受函数作为参数或者将函数作为返回输出的函数。

所以我们定义一个站外拦截函数，每次定义事件处理函数时在外面包一层。

/***
* 站外统一拦截函数
* @param fn
* @param url 需要执行的url Scheme
* @returns {function(): *}
*/
export function outAppInterception(fn,url){
  return function(){
    // 站外时 尝试打开app，不执行fn
    if (站外){
      linkApp.openApp(url);
      return;
    }
    // 站内 正常执行fn
    const result = fn.apply(this,arguments);
    return result;
  }
}

使用：

<div @click=“clickEvent”> </div>

const clickEvent = outAppInterception(()=>{
    console.log(‘click’);
},url) //vue3写法

clickEvent: outAppInterception(()=>{
    console.log(‘click’);
},url) // vue2