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

3403771864 发布于2022-10-10 21:38 / 198人阅读

　本篇文章为大家介绍关于vue编译器util工具使用方法，希望对于大家有帮助。

　　makeMap源码：

　　function makeMap(str, expectsLowerCase) {
　　var map = Object.create(null);
　　var list = str.split(',');
　　for (var i = 0; i &lt; 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。这样就实现了。

专线服务 idc机房托管数据展示工具报表展示工具大数据展示工具 linux延迟数据展示工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127983.html

一字一句的搞懂vue-cli之vue webpack template配置

摘要：神一样的存在。所以呢，就利用两天时间，参考了一些他人的文章，查阅了一些官方的配置，就在此先稍微记录一下。这份配置解析是基于最新版本的。不过，我非常建议，先别看我的文章，自己一句一句的通读一遍。和中的配置含义相似。 webpack--神一样的存在。无论写了多少次，再次相见，仍是初见。有的时候开发vue项目，对尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的东西，真的很不想折...

atinosun 2019-08-22 11:20 评论0 收藏0
解读Vue.use()源码

摘要：的作用官方文档的解释安装插件。下面展示源码源码中采用了的语法。语法，官方解释是简单的意思就是是代码的静态类型检查工具。官网链接使用的好处就是在编译期对代码变量做类型检查，缩短调试时间，减少因类型错误引起的。此时方法内的指向对象。 Vue.use() vue.use()的作用：官方文档的解释：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一...

funnyZhang 2019-08-23 11:42 评论0 收藏0
Vue+thinkJs博客网站（一）之vue多页面应用的webpack3配置

摘要：首先看下的代码编译前删除之前编译生成的静态资源首先需要改的是入口文件，因为是多页面应用，需要多个入口文件来保证打包成不同的。一.项目简介本项目使用vue作为前端框架，thinkJs作为后端框架，构建个人博客网站，页面分为博客展示和后台管理，主要目的是学习使用thinkJs。现在只完成了主要的博客增删改功能，发现webpack的配置遇到了一些坑，这里先记录下。项目目录结构如下...

NickZhou 2019-08-23 15:28 评论0 收藏0
Vue+thinkJs博客网站（一）之vue多页面应用的webpack3配置

摘要：首先看下的代码编译前删除之前编译生成的静态资源首先需要改的是入口文件，因为是多页面应用，需要多个入口文件来保证打包成不同的。一.项目简介本项目使用vue作为前端框架，thinkJs作为后端框架，构建个人博客网站，页面分为博客展示和后台管理，主要目的是学习使用thinkJs。现在只完成了主要的博客增删改功能，发现webpack的配置遇到了一些坑，这里先记录下。项目目录结构如下...

dongxiawu 2019-08-02 14:21 评论0 收藏0
XBlog： Vue+Express+Mongodb的全栈可扩展的完整博客系统

摘要：注册成功后会返回注册用户的此就是上面说到的，用于用户登陆的基础，请保管好。地址 https://github.com/billyhoomm...http://blog.billyhu.com 说明（Instructions）本项目后台基于express、mongodb，前台基于Vue2.0全家桶、bootstrap、scss预编译器以及一众工具类插件项目前后台代码在同一个目录中...

Salamander 2019-08-22 16:43 评论0 收藏0