目录makeMap源码:isReservedTag 源码:pluckModuleFunction 源码:isReserved 源码:makeMap源码: function makeM
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];
}
}
var isReservedTag = function(tag) {
return ishtmlTag(tag) || isSVG(tag)
};
判断一个标签是否是保留标签,我们可以知道,如果一个标签是html
标签,或者是svg
标签,那么这个标签即是保留标签。
function pluckModuleFunction(modules,key) {
return modules ?
modules.map(function(m) {
return m[key];
}).filter(function(_) {
return _;
}) : []
}
检测在modules 数组中的成员对象是否有key属性,如果有"采摘"出来,组成一个新的数组。
如下实例代码:
传递给 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]
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工具的资料请关注编程网其它相关文章!
--结束END--
本文标题: vue编译器util工具使用方法示例
本文链接: https://lsjlt.com/news/154262.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0