vue编译器util工具使用方法示例
更新时间：2022年07月13日 10:02:18 作者：李李
这篇文章主要为大家介绍了vue编译器util工具使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
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。
以上就是vue编译器util工具使用方法示例的详细内容，更多关于vue编译器util工具的资料请关注脚本之家其它相关文章！
相关文章
今天小编就为大家分享一篇在vue.js中使用JSZip实现在前端解压文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3中使用router路由实现跳转传参的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章将利用Vue3和Canvas编写一个童年经典游戏—坦克大战，文中的示例代码讲解详细，感兴趣的小伙伴快来跟随小编一起学习一下吧2022-03-03
这篇文章主要为大家详细介绍了vue实现数字滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
今天在修改 el-table 源码过程中遇到一个头大的问题,原本修改编译后,将 element的子目录lib下的文件复制到项目的响应目录里就可以了,但是这次总出问题,下面小编给大家分享element ui 添加自定义方法,感兴趣的朋友一起看看吧2024-02-02
Vue项目保持element组件同行,设置组件不自动换行问题
这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了详解vue如何使用rules对表单字段进行校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了Vue2如何实现数字滚动翻页效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2024-03-03
这篇文章主要介绍了element中的el-upload附件上传与附件回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
详解Vue中$props、$attrs和$listeners的使用方法
本文主要介绍了Vue中$props、$attrs和$listeners的使用详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
最新评论