乐趣区

关于前端:早已忘却的面试题需要在隆冬忆起

jiezi

哇哇哇哇。。。一边擦泪，一边抄写，早已忘却的面试题，须要在隆冬忆起。。

vue

vue 自定义指令

  • 通过自定义指令，咱们能够扩大 Vue 的行为，让它在渲染 DOM 元素时增加额定的个性和事件，从而更好地实现业务需要
  • vue 自定义指令分为两种类型：全局指令和部分指令（组件内指令）
  • 全局指令会注册到 Vue.directive 上，能够全局应用，部分指令则只能在组件内应用

上面是一个全局自定义指令的示例：注册一个名为 v -focus 的全局自定义指令
注册了一个名为 v -focus 的全局自定义指令，并实现了 inserted 钩子函数，当该指令所绑定的元素插入到 DOM 中时，该钩子函数会被调用，从而实现元素的聚焦性能

Vue.directive("focus",{
   // 当绑定元素插入到 DOM 中执行
   inserted:function(el){
       // 聚焦元素
       el.focus()}
})

上面是一个部分自定义指令的示例: 在组件内定义一个名为 v -highlight 的部分自定义指令

export default {
    derectives:{
        highlight:{
            // 当绑定元素插入到 DOM 中时执行
            inserted:function(el){
                // 增加款式类
                el.classList.add("highlight")
            },
            // 当绑定元素从 DOM 中移出时执行
            unbind:function(el){
                // 移除款式类
                el.classList.remove("highlight")
            }
        }
    }
}
自定义指令在权限管制方面的利用
  1. 能够依据用户的角色信息来管制某些按钮或者表格中的行列是否可见，可编辑，可删除，
    这个时候就能够通过自定义指令来实现这样的权限管制.
  2. 定义一个名为 v -permission 的全局自定义指令，并实现了 bind 钩子函数，在该函数中
    通过以后用户的角色信息，判断该用户是否具备该元素的权限，如果没有，则将该元素暗藏
    上面是一个示例代码：
// 定义一个名为 v -permission 的全局自定义指令
Vue.directive("permission",{
    //bind 钩子函数只在指令第一次绑定到元素时执行一次
    // 如果须要对指令的绑定值进行响应式的操作，应该在 update 钩子函数中进行
    bind:function(el,binding,vnode){
        // 获取以后登录用户的角色信息
        const currentUser = getUserInfoFromLocalStorage().role;
        // 获取绑定的值
        const {value} = binding
        // 判断以后用户是否有该按钮的权限
        if(value&&value.length&&!value.includes(currentUser)){el.style.display = "none";  // 暗藏该元素}
    }
})


<button v-permission="['admin','superAdmin']">Delete</button>

javascript

作用域链：

  • 在 js 中每个函数都有本人的作用域，
  • 当在一个函数外部援用一个变量，js 会依照代码中呈现的程序，从以后作用域开始顺次向上查找
  • 直到找到第一个蕴含这个变量的作用域为止，这个过程被称为作用域链的查找
  • 如果整个作用域链都没有找到，就会报错抛出 ReferenceError 异样
function outer(){
    const a = 10
    function inner(){console.log(a);
        console.log(b);//Uncaught: ReferenceError：b is not defined
    }
    inner()}
outer()

未完后续每日更新以后文章。。。🥲

退出移动版