“ 自己动手实践,就会更加深刻的理解”
今天的内容主要是柯里化函数的应用。01、内置标签在Vue中,存在两种标签:html内置标签(例如 div, span, p 等)与自定义组件标签(例如 my-div, base-table )。const htmlTag = 'div,p,span,header,section,h1,h2';
const htmlTagArr = htmlTag.split(',')我们每次拿到一个节点时,需要去判断这个节点的标签(tagName)是否属于内置标签,才能进行接下来的操作。如果,我们将所有的内置标签放在一个数组里,那么每次拿到节点都需要去遍历一次这个数组,效率是非常低的。

// 遍历数组
function isHTMLTag(tagName) { 
 return htmlTagArr.includes(tagName);
}

因此可以考虑将这个数组转换成对象,通过键值对的访问来增加速度。

// 转换成对象
const htmlTagObj = {}
for (const tag of htmlTagArr) { 
 htmlTagObj[tag] = true;
}
function isHTMLTag(tagName) { 
 return !!htmlTagObj[tagName];
}

02、闭包然而,不只有html标签需要判断,还有svg标签需要判断,有时候还需要特定的判断一个标签是否是文本输入(text, number, password, search)等,因此我们不能对每一种类型都创建一个字符串和一个对象,以及一个函数。 采用闭包缓存可以解决这个问题,同时可以确保数组只会遍历一次。

function makeMap(tagStr) {
 const tagArr = tagStr.split(',');
 const tagObj = {};
 for (const tag of tagArr) {
 tagObj[tag] = true;
 }
 return function (tagName) {
 return !!tagObj[tagName];
 }
}
const isHTMLTag = makeMap('div,p,span,h1');
console.log(isHTMLTag('div')); // true
const isTextInputType = makeMap('text,number,password,search,email,tel,url');
console.log(isTextInputType('text'); // true源代码在githubhttp://github.com、柯里化函数的应用

自己动手实践,就会更加深刻的理解

今天的内容主要是柯里化函数的应用。

01、内置标签

在Vue中,存在两种标签:html内置标签(例如 div, span, p 等)与自定义组件标签(例如 my-div, base-table )。

const htmlTag = 'div,p,span,header,section,h1,h2';
const htmlTagArr = htmlTag.split(',')

我们每次拿到一个节点时,需要去判断这个节点的标签(tagName)是否属于内置标签,才能进行接下来的操作。如果,我们将所有的内置标签放在一个数组里,那么每次拿到节点都需要去遍历一次这个数组,效率是非常低的。

// 遍历数组
function isHTMLTag(tagName) {  
  return htmlTagArr.includes(tagName);
}

因此可以考虑将这个数组转换成对象,通过键值对的访问来增加速度。

// 转换成对象
const htmlTagObj = {}
for (const tag of htmlTagArr) {  
  htmlTagObj[tag] = true;
}
function isHTMLTag(tagName) {  
  return !!htmlTagObj[tagName];
}


02、闭包

然而,不只有html标签需要判断,还有svg标签需要判断,有时候还需要特定的判断一个标签是否是文本输入(text, number, password, search)等,因此我们不能对每一种类型都创建一个字符串和一个对象,以及一个函数。 采用闭包缓存可以解决这个问题,同时可以确保数组只会遍历一次。

function makeMap(tagStr) {
  const tagArr = tagStr.split(',');
  const tagObj = {};
  for (const tag of tagArr) {
    tagObj[tag] = true;
  }
  return function (tagName) {
    return !!tagObj[tagName];
  }
}

const isHTMLTag = makeMap('div,p,span,h1');
console.log(isHTMLTag('div')); // true

const isTextInputType = makeMap('text,number,password,search,email,tel,url');
console.log(isTextInputType('text'); // true