Vue源码makeMap函数深入分析

OK，让我来详细讲解“Vue源码makeMap函数深入分析”的完整攻略。

标题

Vue源码makeMap函数深入分析

简介

首先，我们需要知道 makeMap 是什么，它是 Vue 源码中常用的一个函数，主要用于生成一个对象，对象中的 key 都是小写的字符串，同时这些 key 都对应着 true 这个固定的值。makeMap 函数是 Vue 源码中非常重要的一个小工具函数，Vue 在很多地方都会用到它。

源码分析

Vue 源码中的 makeMap 函数共有两个参数 str 和 expectsLowerCase，其中 str 表示要生成的对象的 key，expectsLowerCase 表示参数 str 的值是否全是小写字母。

首先，我们先看一下 makeMap 的实现代码：

export function makeMap(str: string, expectsLowerCase?: boolean): (key: string) => true | void {
  const map = Object.create(null)
  const list: Array<string> = str.split(',')
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true
  }
  return expectsLowerCase
    ? val => map[val.toLowerCase()]
    : val => map[val]
}

从代码中可以看出， makeMap 函数会生成一个 map 对象，而且这个 map 对象会返回一个函数，这个函数接收一个参数 key，会根据这个参数返回一个值。

实现的核心代码是对 str 字符串进行分割，将其转换为数组 list，遍历数组，依次向 map 对象中添加 key 和 value，值固定为 true，这样就生成了一个以 str 为 key，以 true 为 value 的对象。

在返回的函数中，判断 expectsLowerCase 参数，如果为 true，则返回的函数会调用 toLowerCase 将参数转换为小写字母，再从 map 对象中根据参数取出值并返回，如果为 false，返回的函数直接从 map 对象中根据参数取出值并返回。

示例说明

示例一

我们来看一个例子，假设我们要生成一个只接受三种颜色的映射表，可以使用以下代码：

const colors = 'red,blue,yellow'
const colorMap = makeMap(colors)('blue')
console.log(colorMap)  // true

在上述代码中，我们使用 makeMap 函数生成了一个映射表对象，接着可以使用生成的映射表对象获取相应的属性的值，上面的例子中获取了 blue 对应的值，即为 true。

示例二

我们再来看一个例子，假设现在要验证一个字符串是否为 HTML 标签，可以使用以下代码：

const HTMLTags = 'div,p,span,ul,li'
const isHTMLTag = makeMap(HTMLTags, true)
console.log(isHTMLTag('DIV'))  // true
console.log(isHTMLTag('h3'))   // false

在上面的示例中，我们使用了 makeMap 函数生成了一个用于验证 HTML 标签的对象，通过 true 参数告诉函数所有的 key 都是小写字符串，接着，我们使用生成的函数验证了两个字符串是否为 HTML 标签，通过输出结果可以看出，第一个字符串是一个 HTML 标签，返回值为 true，而第二个字符串不是 HTML 标签，返回值为 false。