早已忘却的面试题，需要在隆冬忆起

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

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";  //隐藏该元素
        }
    }
})


Delete

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()

未完后续每日更新当前文章。。。