C V大法：Vue2 自定义指令实现权限判断、防抖、节流函数

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

C V 系列特点：

1. 只关注功能的实现。让各位看官复制粘贴即可安心使用
2. 代码注释会写详细，尽可能做到一行一注释，把细节都说清楚
3. 涉及第三方库等等不做赘述，用到的库会给各位看官放上链接，方便各位深入了解

话不多说 上代码

权限指令

/**
 * 权限指令 
 * @param {string} value 权限标识
 * 例：<div v-permission="'table/del'"></div>
 */
Vue.directive('permission', {
  inserted: function (el, binding) {
    const { value } = binding
    // 获取VueX中的 权限按钮列表
    const buttonList = store.state.user.permission

    if (value) {
      // some 遇到 return true 时 会结束遍历
      const hasPermission = buttonList.some(btnKey => btnKey === value)
      // 没有权限直接移除 dom元素
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限标识！ 如：v-permission="'table_del'"`)
    }
  }
})

防抖指令

/**
 * 防抖指令 单位时间只触发最后一次
 * @param {Function} fn - 执行事件
 * @param {?String|"click"} event - 事件类型 例："click"
 * @param {?Number|500} time - 间隔时间
 * @param {Array} binding.value - [fn,event,time]
 * 直接使用： <XXX v-debounce="reset]">刷新</XXX>
 * 配置事件，间隔时间： <button v-debounce="[reset,'click',500]">刷新</button>
 * 事件传递参数则： <button v-debounce="[()=>reset(param),`click`,500]">刷新</button>
 */
Vue.directive('debounce', {
    bind: function (el, binding) {
        try {
            let fn, event = "click", time = 500;
            if (typeof binding.value == 'function') {
                fn = binding.value
            } else {
                [fn, event = "click", time = 500] = binding.value
            }
            let timer;
            el.addEventListener(event, () => {
                timer && clearTimeout(timer)
                timer = setTimeout(() => fn(), time)
            })
        } catch (e) {
            console.log(e)
        }
    }
})

节流指令

/**
 * 节流指令 一段时间内首次触发时立即执行，此时间段内再次触发，不会执行！
 * @param {Function} fn - 执行事件
 * @param {?String|"click"} event - 事件类型 例："click"
 * @param {?Number|500} time - 间隔时间
 * @param {Array} binding.value - [fn,event,time]
 * 直接使用： <XXX v-throttle="reset]">刷新</XXX>
 * 配置事件，间隔时间： <button v-throttle="[reset,'click',500]">刷新</button>
 * 事件传递参数则： <button v-throttle="[()=>reset(param),`click`,500]">刷新</button>
 */
Vue.directive('throttle', {
    bind: function (el, binding) {
        let fn, event = "click", time = 1500;
        if (typeof binding.value == 'function') {
            fn = binding.value
        } else {
            [fn, event = "click", time = 1500] = binding.value
        }

        /**
         * el.preTime 记录上次触发事件，
         * 每次触发比较nowTime（当前时间） 和 el.preTime 的差是否大于指定的时间段！
         */
        el.addEventListener(event, () => {
            const nowTime = new Date().getTime()
            if (!el.preTime || nowTime - el.preTime > time) {
                el.preTime = nowTime
                fn();
            }
        })
    }
})

说明

1. 权限指令个人认为还是很有必要的，用起来方便。这个指令主要适用于按钮类的权限判断
2. 节流、防抖函数，有太多的实现方式了，做成指令就是图个乐呵

欢迎查看更多C V系列 C V 大法