服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - Vue源码中值得学习的方法

Vue源码中值得学习的方法

2020-10-28 21:57segmentfaultchinamasters 编程技术

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

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

Vue源码中值得学习的方法

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) // Boolean 

toRawType(undefined) // Undefined 

toRawType(null) // Null 

toRawType(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 < list.length; 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 < children.length; 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()            //AAA 

son1.getAge()             //23 

son1.arr.push(4)           

console.log(son1.arr)     //1,2,3,4 

 

var son2 = new Son("BBB", 24) 

son2.getName()            //BBB 

son2.getAge()             //24 

console.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 isObjectisObjectA = isObject(a); 

  var isObjectisObjectB = 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' 

延伸 · 阅读

精彩推荐