vue 二维数组_最近研究Vue源码时我发现的一些好玩函数
来源 | segmentfault.com/u/chinamasters
作者 | chinamasters
最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助。如果大家都能一眼看懂这些函数,说明技术还是不错的哦。
1. 数据类型判断
Object.prototype.toString.call()返回的数据格式为 [object Object]类型,然后用slice截取第8位到倒一位,得到结果为 Object
var _toString = Object.prototype.toString;function toRawType (value) { return _toString.call(value).slice(8, -1)}
运行结果测试
toRawType({}) // Object toRawType([]) // Array toRawType(true) // BooleantoRawType(undefined) // UndefinedtoRawType(null) // NulltoRawType(function(){}) // Function
2. 利用闭包构造map缓存数据
vue中判断我们写的组件名是不是html内置标签的时候,如果用数组类遍历那么将要循环很多次获取结果,如果把数组转为对象,把标签名设置为对象的key,那么不用依次遍历查找,只需要查找一次就能获取结果,提高了查找效率。
function makeMap (str, expectsLowerCase) { // 构建闭包集合map var map = Object.create(null); var list = str.split(','); for (var i = 0; i map[list[i]] = true; } return expectsLowerCase ? function (val) { return map[val.toLowerCase()]; } : function (val) { return map[val]; }}
// 利用闭包,每次判断是否是内置标签只需调用isHTMLTag
var isHTMLTag = makeMap('html,body,base,head,link,meta,style,title')console.log('res', isHTMLTag('body')) // true
3. 二维数组扁平化
vue中_createElement格式化传入的children的时候用到了simpleNormalizeChildren函数,原来是为了拍平数组,使二维数组扁平化,类似lodash中的flatten方法。
// 先看lodash中的flatten_.flatten([1, [2, [3, [4]], 5]])// 得到结果为 [1, 2, [3, [4]], 5]
// vue中function simpleNormalizeChildren (children) { for (var i = 0; i if (Array.isArray(children[i])) { return Array.prototype.concat.apply([], children) } } return children}
// es6中 等价于function simpleNormalizeChildren (children) { return [].concat(...children)}
4. 方法拦截
vue中利用Object.defineProperty收集依赖,从而触发更新视图,但是数组却无法监测到数据的变化,但是为什么数组在使用push pop等方法的时候可以触发页面更新呢,那是因为vue内部拦截了这些方法。
// 重写push等方法,然后再把原型指回原方法
var ARRAY_METHOD = [ 'push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice' ]; var array_methods = Object.create(Array.prototype); ARRAY_METHOD.forEach(method => { array_methods[method] = function () { // 拦截方法 console.log('调用的是拦截的 ' + method + ' 方法,进行依赖收集'); return Array.prototype[method].apply(this, arguments); } });
运行结果测试
var arr = [1,2,3]arr.__proto__ = array_methods // 改变arr的原型arr.unshift(6) // 打印结果: 调用的是拦截的 unshift 方法,进行依赖收集
5. 继承的实现
vue中调用Vue.extend实例化组件,Vue.extend就是VueComponent构造函数,而VueComponent利用Object.create继承Vue,所以在平常开发中Vue 和 Vue.extend区别不是很大。这边主要学习用es5原生方法实现继承的,当然了,es6中 class类直接用extends继承。
// 继承方法 function inheritPrototype(Son, Father) { var prototype = Object.create(Father.prototype) prototype.constructor = Son // 把Father.prototype赋值给 Son.prototype Son.prototype = prototype } function Father(name) { this.name = name this.arr = [1,2,3] } Father.prototype.getName = function() { console.log(this.name) } function Son(name, age) { Father.call(this, name) this.age = age } inheritPrototype(Son, Father) Son.prototype.getAge = function() { console.log(this.age) }
运行结果测试
var son1 = new Son("AAA", 23)son1.getName() //AAAson1.getAge() //23son1.arr.push(4) console.log(son1.arr) //1,2,3,4
var son2 = new Son("BBB", 24)son2.getName() //BBBson2.getAge() //24console.log(son2.arr) //1,2,3
6. 执行一次
once 方法相对比较简单,直接利用闭包实现就好了
function once (fn) { var called = false; return function () { if (!called) { called = true; fn.apply(this, arguments); } }}
7. 浅拷贝
简单的深拷贝我们可以用 JSON.stringify() 来实现,不过vue源码中的looseEqual 浅拷贝写的也很有意思,先类型判断再递归调用,总体也不难,学一下思路。
function looseEqual (a, b) { if (a === b) { return true } var isObjectA = isObject(a); var isObjectB = isObject(b); if (isObjectA && isObjectB) { try { var isArrayA = Array.isArray(a); var isArrayB = Array.isArray(b); if (isArrayA && isArrayB) { return a.length === b.length && a.every(function (e, i) { return looseEqual(e, b[i]) }) } else if (!isArrayA && !isArrayB) { var keysA = Object.keys(a); var keysB = Object.keys(b); return keysA.length === keysB.length && keysA.every(function (key) { return looseEqual(a[key], b[key]) }) } else { /* istanbul ignore next */ return false } } catch (e) { /* istanbul ignore next */ return false } } else if (!isObjectA && !isObjectB) { return String(a) === String(b) } else { return false }}function isObject (obj) { return obj !== null && typeof obj === 'object'}
1.如果看到这里,说明你喜欢这篇文章,请 转发
、点赞、
在看同时 标星(置顶)
2.关注公众号前端人,回复资料包
领取我整理的前端进阶资料包
3.回复加群
,加入前端进阶群,和小伙伴一起学习讨论!
vue 二维数组_最近研究Vue源码时我发现的一些好玩函数相关推荐
- python:实现9×9二维数组数独算法(附完整源码)
python:实现9×9二维数组数独算法 from __future__ import annotationsMatrix = list[list[int]]# assigning initial v ...
- C语言试题三十七之求除一个2×m整型二维数组中最大元素的值,并将此值返回调用函数。
1. 题目 请编写一个函数function,它的功能是:求除一个2×m整型二维数组中最大元素的值,并将此值返回调用函数. 2 .温馨提示 C语言试题汇总里可用于计算机二级C语言笔试.机试.研究生复试中 ...
- 二维数组更改vue_使用vue中的v-for遍历二维数组的方法
如下所示: {{itemss}} 其中,data数据为: this.data = [ [ { type: '', name: '资产', start: '期末余额', end: '期初余额' }, { ...
- python 构件二维数组_通过这四个构件块来升级您的javascript数组
python 构件二维数组 Arrays in JavaScript are something special, as they leverage the prototype feature of ...
- 建立二维数组_二维数组的 DP
寻找不同路径和 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标 ...
- go 声明二维数组_一篇文章了解Go语言中数组Arrays的使用内幕
概述 与其他编程语言类似,Go语言也有数组array.Go语言中,数组的行为和其他语言没有什么不同.Go语言中还有一个叫做切片slice的东西,它就像是对数组的引用.在本文中,我们将只研究数组. 定义 ...
- floatmap 二维数组_用J中的多维数组进行Arrays.fill
用J中的多维数组进行Arrays.fill 如何在不使用循环的情况下用Java填充多维数组? 我试过了: double[][] arr = new double[20][4]; Arrays.fill ...
- es6一维数组转二维数组_技术图文:Numpy 一维数组 VS. Pandas Series
背景 Numpy 提供的最重要的数据结构是 ndarray,它是 Python 中 list 的扩展. Pandas 提供了两种非常重要的数据结构 Series和DataFrame. Numpy 中的 ...
- c++ 二维数组_【技术篇】C指针与二维数组深度辨析
一.源代码 /*第01行*/ CLion 2019.3.4 x64中编写的源代码·截图 二.深度辨析 CLion 2019.3.4 x64中编译的结果·截图 zippo[4][2]是一个四行二列的in ...
最新文章
- 总结一下在使用某里云服务器的过程中出现过的一些问题
- 服务器返回的json数据,通过本地解析调用SBjson的类
- 802.11协议中的广播与tcp/ip中的广播
- 牛客网(剑指offer) 第十八题 二叉树的镜像
- 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- bootstrap页面布局
- 数据库面试题及优化手段
- 这一本《电子工程师技术手册》,你要不要?
- 2cm有多长实物图_两厘米(2cm有多长实物图)
- 红米note5解锁教程_红米note手机密码忘了怎么解锁
- 学生表mysql查询语句
- 问道服务器系统,《问道》全部服务器将正式更新至V1.351新版
- 微信小程序期末大作业-天使童装商城
- 背景设置透明度字体不透明
- 【附源码】计算机毕业设计SSM网上鲜花店系统
- layer.open关闭弹窗,刷新表格
- 自旋锁(spinlock)
- 华为a199升级android,华为A199(Ascend G710 电信版)救砖教程 救砖包 刷回官方系统支持OTA升级...
- qlist 嵌套_QList内存释放
- 小米盒子1s搭建web服务器
热门文章
- ulimit限制 新系统_系统限制ulimit学习
- 打开网站太慢linux如何检查,seo优化中网站访问慢的检测方法
- oracle分组_MySQL分组取TOP,实现Oracle的ROW_NUMBER函数的功能
- maven 不编译jasper文件_第一个SpringBoot项目、核心配置文件properties(yml、yaml)、集成jsp...
- eclipse javascript_原生js实现贪吃蛇游戏_javascript技巧
- html5抬头,HTML !DOCTYPE 标签
- eq linux_在线试用 200 多种 Linux 和 Unix 操作系统 | Linux 中国
- python or妙用
- python教程怎么抓起数据_介绍python 数据抓取三种方法
- 使用tab键分割的文章能快速转换成表格。( )_Word 多级列表编号方法总结(一)——快速入门