在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);