Vue源码中值得学习的方法

开发 前端
最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助。

最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大家对深入学习js有所帮助。如果大家都能一眼看懂这些函数,说明技术还是不错的哦。

[[348906]]

1. 数据类型判断

Object.prototype.toString.call()返回的数据格式为 [object Object]类型,然后用slice截取第8位到倒一位,得到结果为 Object

  1. var _toString = Object.prototype.toString; 
  2. function toRawType (value) { 
  3.   return _toString.call(value).slice(8, -1) 

运行结果测试

  1. toRawType({}) //  Object  
  2. toRawType([])  // Array     
  3. toRawType(true) // Boolean 
  4. toRawType(undefined) // Undefined 
  5. toRawType(null) // Null 
  6. toRawType(function(){}) // Function 

2. 利用闭包构造map缓存数据

vue中判断我们写的组件名是不是html内置标签的时候,如果用数组类遍历那么将要循环很多次获取结果,如果把数组转为对象,把标签名设置为对象的key,那么不用依次遍历查找,只需要查找一次就能获取结果,提高了查找效率。

  1. function makeMap (str, expectsLowerCase) { 
  2.     // 构建闭包集合map 
  3.     var map = Object.create(null); 
  4.     var list = str.split(','); 
  5.     for (var i = 0; i < list.length; i++) { 
  6.       map[list[i]] = true; 
  7.     } 
  8.     return expectsLowerCase 
  9.       ? function (val) { return map[val.toLowerCase()]; } 
  10.       : function (val) { return map[val]; } 
  11. // 利用闭包,每次判断是否是内置标签只需调用isHTMLTag 
  12. var isHTMLTag = makeMap('html,body,base,head,link,meta,style,title') 
  13. console.log('res', isHTMLTag('body')) // true 

3. 二维数组扁平化

vue中_createElement格式化传入的children的时候用到了simpleNormalizeChildren函数,原来是为了拍平数组,使二维数组扁平化,类似lodash中的flatten方法。

  1. // 先看lodash中的flatten 
  2. _.flatten([1, [2, [3, [4]], 5]]) 
  3. // 得到结果为  [1, 2, [3, [4]], 5] 
  4.  
  5. // vue中 
  6. function simpleNormalizeChildren (children) { 
  7.   for (var i = 0; i < children.length; i++) { 
  8.     if (Array.isArray(children[i])) { 
  9.       return Array.prototype.concat.apply([], children) 
  10.     } 
  11.   } 
  12.   return children 
  13.  
  14. // es6中 等价于 
  15. function simpleNormalizeChildren (children) { 
  16.    return [].concat(...children) 

4. 方法拦截

vue中利用Object.defineProperty收集依赖,从而触发更新视图,但是数组却无法监测到数据的变化,但是为什么数组在使用push pop等方法的时候可以触发页面更新呢,那是因为vue内部拦截了这些方法。

  1. // 重写push等方法,然后再把原型指回原方法 
  2.   var ARRAY_METHOD = [ 'push', 'pop', 'shift', 'unshift', 'reverse',  'sort', 'splice' ]; 
  3.   var array_methods = Object.create(Array.prototype); 
  4.   ARRAY_METHOD.forEach(method => { 
  5.     array_methods[method] = function () { 
  6.       // 拦截方法 
  7.       console.log('调用的是拦截的 ' + method + ' 方法,进行依赖收集'); 
  8.       return Array.prototype[method].apply(this, arguments); 
  9.     } 
  10.   }); 

运行结果测试

  1. var arr = [1,2,3] 
  2. arr.__proto__ = array_methods // 改变arr的原型 
  3. arr.unshift(6) // 打印结果: 调用的是拦截的 unshift 方法,进行依赖收集 

5. 继承的实现

vue中调用Vue.extend实例化组件,Vue.extend就是VueComponent构造函数,而VueComponent利用Object.create继承Vue,所以在平常开发中Vue 和 Vue.extend区别不是很大。这边主要学习用es5原生方法实现继承的,当然了,es6中 class类直接用extends继承。

  1. // 继承方法  
  2.  function inheritPrototype(Son, Father) { 
  3.    var prototype = Object.create(Father.prototype) 
  4.    prototype.constructor = Son 
  5.    // 把Father.prototype赋值给 Son.prototype 
  6.    Son.prototype = prototype 
  7.  } 
  8.  function Father(name) { 
  9.    this.name = name 
  10.    this.arr = [1,2,3] 
  11.  } 
  12.  Father.prototype.getName = function() { 
  13.    console.log(this.name) 
  14.  } 
  15.  function Son(name, age) { 
  16.    Father.call(this, name) 
  17.    this.age = age 
  18.  } 
  19.  inheritPrototype(Son, Father) 
  20.  Son.prototype.getAge = function() { 
  21.    console.log(this.age) 
  22.  } 

运行结果测试

  1. var son1 = new Son("AAA", 23) 
  2. son1.getName()            //AAA 
  3. son1.getAge()             //23 
  4. son1.arr.push(4)           
  5. console.log(son1.arr)     //1,2,3,4 
  6.  
  7. var son2 = new Son("BBB", 24) 
  8. son2.getName()            //BBB 
  9. son2.getAge()             //24 
  10. console.log(son2.arr)     //1,2,3 

6. 执行一次

once 方法相对比较简单,直接利用闭包实现就好了

  1. function once (fn) { 
  2.   var called = false
  3.   return function () { 
  4.     if (!called) { 
  5.       called = true
  6.       fn.apply(this, arguments); 
  7.     } 
  8.   } 

7. 浅拷贝

简单的深拷贝我们可以用 JSON.stringify() 来实现,不过vue源码中的looseEqual 浅拷贝写的也很有意思,先类型判断再递归调用,总体也不难,学一下思路。

  1. function looseEqual (a, b) { 
  2.   if (a === b) { return true } 
  3.   var isObjectisObjectA = isObject(a); 
  4.   var isObjectisObjectB = isObject(b); 
  5.   if (isObjectA && isObjectB) { 
  6.     try { 
  7.       var isArrayA = Array.isArray(a); 
  8.       var isArrayB = Array.isArray(b); 
  9.       if (isArrayA && isArrayB) { 
  10.         return a.length === b.length && a.every(function (e, i) { 
  11.           return looseEqual(e, b[i]) 
  12.         }) 
  13.       } else if (!isArrayA && !isArrayB) { 
  14.         var keysA = Object.keys(a); 
  15.         var keysB = Object.keys(b); 
  16.         return keysA.length === keysB.length && keysA.every(function (key) { 
  17.           return looseEqual(a[key], b[key]) 
  18.         }) 
  19.       } else { 
  20.         /* istanbul ignore next */ 
  21.         return false 
  22.       } 
  23.     } catch (e) { 
  24.       /* istanbul ignore next */ 
  25.       return false 
  26.     } 
  27.   } else if (!isObjectA && !isObjectB) { 
  28.     return String(a) === String(b) 
  29.   } else { 
  30.     return false 
  31.   } 
  32. function isObject (obj) { 
  33.   return obj !== null && typeof obj === 'object' 

 

责任编辑:赵宁宁 来源: segmentfault
相关推荐

2020-10-26 10:40:31

Axios前端拦截器

2022-06-06 07:50:55

PythonJSON

2011-04-15 13:12:09

.NETMEF

2022-09-19 10:07:30

制造业IT领导者

2010-03-31 15:52:24

Oracle子查询

2023-06-09 10:27:13

Vue开源

2022-06-28 09:44:21

DevOps软件开发

2024-02-19 08:07:31

Go版本语言

2011-08-19 09:41:56

C++

2017-09-10 17:08:11

Java 9程序Oracle

2014-10-30 10:28:09

HTML5

2015-06-10 09:17:48

数据中心规划设计

2017-12-18 08:55:03

2021-11-26 05:59:31

Vue3 插件Vue应用

2010-02-23 09:39:25

DB2 9.7

2021-12-31 07:48:58

Vue3 插件Vue应用

2009-07-06 15:06:20

ASP.NET开发程序

2015-09-16 09:45:00

2020-12-09 11:52:28

Python字符串代码

2018-05-10 17:32:03

机器学习人工智能入门方法
点赞
收藏

51CTO技术栈公众号