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

目录

makeMap源码：isReservedTag 源码：pluckModuleFunction 源码：isReserved 源码：

makeMap源码：

1. function makeMap(str, expectsLowerCase) {
2.         var map = Object.create(null);
3.         var list = str.split(',');
4.         for (var i = 0; i < list.length; i++) {
5.                 map[list[i]] = true;
6.         }
7.         return expectsLowerCase ?
8.                 function(val) {
9.                         return map[val.toLowerCase()];
10.                 } :
11.                 function(val) {
12.                         return map[val];
13.                 }
14. }

复制代码

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

isReservedTag 源码：

1. var isReservedTag = function(tag) {
2.         return isHTMLTag(tag) || isSVG(tag)
3. };

复制代码

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

pluckModuleFunction 源码：

1. function pluckModuleFunction(modules,key) {
2.         return modules ?
3.                 modules.map(function(m) {
4.                         return m[key];
5.                 }).filter(function(_) {
6.                         return _;
7.                 }) : []
8. }

复制代码

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

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

复制代码

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

1. var modules$1 = [
2.         klass$1,
3.         style$1,
4.         model$1
5. ];
6. var klass$1 = {
7.         staticKeys: ['staticClass'],
8.         transformNode: transformNode, //处理静态属性和非静态属性
9.         genData: genData
10. };
11. var model$1 = {
12.         preTransformNode: preTransformNode
13. };
14. var style$1 = {
15.         staticKeys: ['staticStyle'],
16.         transformNode: transformNode$1, //处理静态样式和非静态样式
17.         genData: genData$1
18. };

复制代码

此时按照 pluckModuleFunction 函数的逻辑：

1. modules ?
2.         modules.map(function(m) {
3.                 return m[key];
4.         }).filter(function(_) {
5.                 return _;
6.         }) : []

复制代码

我们拆分开看：

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

复制代码

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

1. [
2.   transformNode,
3.   transformNode$1,
4.   undefined
5. ]

复制代码

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

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

复制代码

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

1. [transformNode, transformNode$1]

复制代码

isReserved 源码：

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

复制代码

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

1. new Vue({
2.   data: {
3.     $count: 1,  // 不允许
4.     _ret: 2   // 不允许
5.   }
6. })

复制代码

isReserved是如何判断一个字符串是否以 $ 或 _ 开头呢？
它的实现方式是通过字符串的 charCodeAt 方法获得该字符串第一个字符的 unicode，然后与 0x24 和 0x5F 作比较。其中 $ 对应的 unicode 码为 36，对应的十六进制值为 0x24；_ 对应的 unicode 码为 95，对应的十六进制值为 0x5F。
以上就是vue编译器util工具使用方法示例的详细内容，更多关于vue编译器util工具的资料请关注中国红客联盟其它相关文章！