仿写Vue（五）、柯里化函数的应用

五、柯里化函数的应用

“ 自己动手实践，就会更加深刻的理解**”**

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

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

源代码在github上，请点击阅读原文查看~