在Vue中如何区分一个标签是否是内置的标签?

710 阅读1分钟

在Vue中,每一个标签可以是真正的HTML标签,也可以是自定义的组件 怎么区分一个标签是否已经是内置的标签?

首先介绍几个函数的概念
  • 柯里化: 一个函数原本有多个参数,只传入一个参数,生成一个新函数,由新函数接收剩下来的参数来运行得到结果
  • 偏函数: 一个函数原本有多个参数,传入一部分参数,生成一个新函数,由新函数接收剩下来的参数来运行得到结果
  • 高阶函数: 一个函数的参数是一个函数 ,对该参数进行加工得到另外一个函数,加工用到的函数就是高阶函数

Vue源码中,区分一个标签,是否是内置标签,使用的就是函数柯里化

 let tags = "div,a,img,ol,ul,li,text,span";
        let tagArr = tags.split(',');

        function mapState(keys) {
            let set = {}; 
            keys.forEach(key => {
                set[key] = true
            });
            console.log(set)
            return function(tagName) {
                // 两次取反,主要是防止,当传入的标签不是内置标签的时候,会出现underfined 两次取反之后,结果 变成了false
                return !!set[tagName.toLowerCase()]
            }
        }
        let isHtmlTag = mapState(tagArr); 
        let res = isHtmlTag('p')
        console.log(res);