您现在的位置是：网站首页> 编程资料编程资料

vue编译器util工具使用方法示例_vue.js_

2023-05-24 343人已围观

简介 vue编译器util工具使用方法示例_vue.js_

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工具的资料请关注其它相关文章！

您可能感兴趣的文章:

上一篇：JavaScript数组实例的9个方法_javascript技巧_

下一篇：Vue编译器optimize源码分析_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网