makeMap源码：

function makeMap(str, expectsLowerCase) {
	var map = Object.create(null);
	var list = str.split(',');
	for (var i = 0; i < list.length; i++) {
		map[list[i]] = true;
	}
	return expectsLowerCase ?
		function(val) {
			return map[val.toLowerCase()];
		} :
		function(val) {
			return map[val];
		}
}

• 描述：makeMap 函数首先根据一个字符串生成一个 map，然后根据该 map 产生一个新函数，新函数接收一个字符串参数作为 key，如果这个 key 在 map 中则返回 true，否则返回 undefined。
• 参数：{String} str 一个以逗号分隔的字符串 、{Boolean} expectsLowerCase 是否小写
• 返回值：根据生成的 map 产生的函数

isReservedTag 源码：

var isReservedTag = function(tag) {
	return isHTMLTag(tag) || isSVG(tag)
};

判断一个标签是否是保留标签，我们可以知道，如果一个标签是html标签，或者是svg标签，那么这个标签即是保留标签。

pluckModuleFunction 源码：

function pluckModuleFunction(modules,key) {
	return modules ?
		modules.map(function(m) {
			return m[key];
		}).filter(function(_) {
			return _;
		}) : []
}

检测在modules 数组中的成员对象是否有key属性，如果有"采摘"出来，组成一个新的数组。

如下实例代码：

transforms = pluckModuleFunction(options.modules, 'transformNode')

传递给 pluckModuleFunction 函数的第二个参数的字符串为 'transformNode'，同时我们观察 options.modules 数组：

var modules$1 = [
	klass$1,
	style$1,
	model$1
];
var klass$1 = {
	staticKeys: ['staticClass'],
	transformNode: transformNode, //处理静态属性和非静态属性
	genData: genData
};
var model$1 = {
	preTransformNode: preTransformNode
};
var style$1 = {
	staticKeys: ['staticStyle'],
	transformNode: transformNode$1, //处理静态样式和非静态样式
	genData: genData$1
};

此时按照 pluckModuleFunction 函数的逻辑：

modules ?
	modules.map(function(m) {
		return m[key];
	}).filter(function(_) {
		return _;
	}) : []

我们拆分开看：

modules ? modules.map(function(m) {
		return m[key];
	})

如果modules存在则，调用 modules.map 创建一个新的数组。

[
  transformNode,
  transformNode$1,
  undefined
]

还没完紧接着又在新生成的数组之上调用了 filter 函数相当于:

[transformNode, transformNode$1, undefined].filter(function(_){ return _ });

把值为 undefined 的元素过滤掉，所以最终生成的数组如下:

[transformNode, transformNode$1]

isReserved 源码：

function isReserved(str) {
	var c = (str + '').charCodeAt(0);
	return c === 0x24 || c === 0x5F
}

在Vue中不允许使用以$或_开头的字符串作为data数据的字段名, isReserved 函数用来检测一个字符串是否以$ 或者 _ 开头。

如：

new Vue({
  data: {
    $count: 1,  // 不允许
    _ret: 2   // 不允许
  }
})

isReserved是如何判断一个字符串是否以 $ 或 _ 开头呢？

它的实现方式是通过字符串的 charCodeAt 方法获得该字符串第一个字符的 unicode，然后与 0x24 和 0x5F 作比较。其中 $ 对应的 unicode 码为 36，对应的十六进制值为 0x24；_ 对应的 unicode 码为 95，对应的十六进制值为 0x5F。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用Vue框架怎样写一个简单的购物车，基本实现是怎样

  这篇文章主要为大家详细介绍了Vue实现简易购物车页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用JavaScript做一个拼图游戏的代码是什么？

  本文实例为大家分享是如何使用javascript实现拼图游戏。对于拼图游戏，相信很多朋友都有玩过，文本给介绍的JS实现简单的拼图游戏的代码，下编觉得比较有意思，因此分享给大家作参考，下面我们就一起来看看吧。

• 在vue项目中怎样配置sass，引入sass文件怎样做

  目录配置sass及引入外部scss文件配置sass引入外部scss文件如果显示错误为如下图所示记住此时需要重启项目 npm run dev踩过的坑 Vue引入Sass文件问题来了，为什么呢？配置sass及引入外部scss文件配置sass安装对应依赖node模块npm install node-sass --save-d

• mock.js配置步骤是什么，使用mock能解决什么问题

  目录mockjs配置和使用方式需求步骤mock使用及mock无侵入的解决什么是mock？为什么要用到mock？如何使用mock？mock无侵入式配置mockjs配置和使用方式需求在前后端分离的开发中，需要前后端同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以

• vue项目中怎样实现动态加载和刷新，哪些事项要注意

  这篇文章主要给大家介绍了关于vue动态菜单、动态路由加载以及刷新踩坑的相关资料,踩的这些坑其实是挺常见的,大家可以看看,避免遇到的时候再踩到同样的坑,需要的朋友可以参考下