iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue编译器util工具使用方法示例
  • 560
分享到

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

2024-04-02 19:04:59 560人浏览 八月长安
摘要

目录makeMap源码:isReservedTag 源码:pluckModuleFunction 源码:isReserved 源码:makeMap源码: function makeM

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

--结束END--

本文标题: vue编译器util工具使用方法示例

本文链接: https://www.lsjlt.com/news/154262.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue编译器util工具使用方法示例
    目录makeMap源码:isReservedTag 源码:pluckModuleFunction 源码:isReserved 源码:makeMap源码: function makeM...
    99+
    2024-04-02
  • EXE反编译方法及工具
    EXE文件是Windows操作系统下的可执行文件,通常是由C++、C#、Delphi等语言编写而成的。反编译EXE文件意味着将其转化...
    99+
    2023-09-13
    EXE
  • Java 反编译工具的对比以及使用方法
    今天就跟大家聊聊有关Java 反编译工具的对比以及使用方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。前言Java 反编译,一听可能觉得高深莫测,其实反编译并不是什么特别高级的操作...
    99+
    2023-06-15
  • GCC编译工具怎么使用
    GCC是一款开源的编译器工具套件,可以用于编译C、C++、Objective-C等程序。下面是GCC编译工具的基本使用方法:1. 安...
    99+
    2023-09-12
    GCC
  • jadx反编译工具的使用
    目录 jadx工具介绍 jadx工具的安装 jadx工具的使用 jadx遇到的问题 jdk和jre的区别 jadx工具介绍 decompile Dalvik bytecode to java classes from APK, dex, ...
    99+
    2023-09-03
    gradle android android studio
  • c反编译工具reflector用法
    Reflector是一个强大的C#反编译工具,可以将编译后的程序集反编译为C#代码。下面是Reflector的用法:1. 下载和安装...
    99+
    2023-09-17
    reflector
  • springboot实现在工具类(util)中调用注入service层方法
    一、新建BeanUtil类 import lombok.extern.slf4j.Slf4j; import org.springframework.beans.BeansExc...
    99+
    2024-04-02
  • Python 反编译:pyinstxtractor工具和uncompyle6库的使用
    uncompyle6 现仅适用于 Python 2.4 到 3.8 版本 Python 3.9 及以上版本请参见我另外一篇博客: Python 反编译:pycdc工具的使用 ✅作者简介:人工智能...
    99+
    2023-09-04
    python 开发语言
  • Vue中使用Teleport的方法示例
    目录正文Teleport 在 Vue 中的使用禁用 Teleport 标签正文 通常,当我们在 Vue 中创建组件时,它们出现在我们期望的 DOM 结构中。但是,有时我们并不希望如此...
    99+
    2022-11-13
    Vue使用Teleport Vue Teleport
  • jQuery中extend()与工具方法、实例方法的示例分析
    这篇文章主要介绍jQuery中extend()与工具方法、实例方法的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:使用jQuery的时候会发现,jQuery中有的函...
    99+
    2024-04-02
  • JS代码编译器Monaco使用方法
    前言 我的需求是可以语法高亮、函数提示功能、自动换行、代码折叠 Monaco Monaco是微软家的,支持的语言很多,还有缩略地图,有时候提示不好用然后包体很大。 The Monac...
    99+
    2024-04-02
  • Ubuntu中怎么安装和使用编译器和开发工具
    在Ubuntu中安装和使用编译器和开发工具非常简单,通过apt包管理器可以轻松安装所需的工具。以下是一些常用的编译器和开发工具的安装...
    99+
    2024-03-05
    Ubuntu
  • Jar包常见的反编译工具介绍与使用
    反编译JAR能干什么: 排查问题、分析商业软件代码逻辑,学习优秀的源码思路。 反编译工具介绍 JD-GUI 下载地址:http://java-decompiler.github.io/ 点评:支...
    99+
    2023-10-22
    Java 反编译 Jar JD-GUI
  • 如何在ArchLinux中安装和使用编译器和开发工具
    在ArchLinux中安装和使用编译器和开发工具非常简单。以下是一些常见的编译器和开发工具的安装方法: GCC编译器:GCC是GN...
    99+
    2024-04-02
  • vue data中的return使用方法示例
    目录一、vue 里面的data return 是什么?二、如何使用1.vue 双向绑定 v-model2.带有 ":"的属性 比如:class、:id等等3. 标...
    99+
    2024-04-02
  • Hutool开发MapUtil工具类使用示例
    目录概述行列互转键值互换sort排序操作join连接操作过滤转换操作获取get总结概述 Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工...
    99+
    2024-04-02
  • Java并发工具类Future使用示例
    目录前言Future使用示例FutureTask前言 Future是一个接口类,定义了5个方法: boolean cancel(boolean mayInterruptIfRunni...
    99+
    2024-04-02
  • charles工具的使用方法
    本篇内容介绍了“charles工具的使用方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. Charles 简介好多人把它叫做抓包工具,...
    99+
    2023-06-02
  • C++编译器的使用方法是什么
    这篇文章主要介绍“C++编译器的使用方法是什么”,在日常操作中,相信很多人在C++编译器的使用方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C++编译器的使用方法是什么”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-17
  • 最好的Java 反编译工具的使用对比分析
    前言 Java 反编译,一听可能觉得高深莫测,其实反编译并不是什么特别高级的操作,Java 对于 Class 字节码文件的生成有着严格的要求,如果你非常熟悉 Java 虚拟机规范,了...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作