女前端学vue源码

已经使用vue很久了,今天打开vue源码,想学习一下。废话不多说,学起来就对啦!😄
源码刚开始是全局的工具函数,接下来看一下这些工具函数的作用和实现!小白学习,大神们请多多指教!

 var emptyObject = Object.freeze({});

看到这段代码,发现freeze()这个函数我一直没用过,这个方法名中文的意思是冻结,难道是一个冰封的对象?
这个对象里面所有的方法和属性都被冻结?
然后我就去查阅了文档,果然是一个有意思的方法,和我猜测的差不多。

功能:一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

 function isUndef (v) {
    return v === undefined || v === null
  }

这个函数就很容易理解了,校验是否为undefined Or null,返回值是true/false;

 function isDef (v) {
    return v !== undefined && v !== null
  }

校验是否不为undefined Or null,返回值是true/false;这个函数和上面的作用正好是相反!

  function isTrue (v) {
    return v === true
  }

检查一个值是不是true,在js里大概有几种为false,往下看👇

  isTrue(undefined);//false
  isTrue(null);//false
  isTrue(false);//false
  isTrue(0);//false
  isTrue(NaN);//false
  isTrue('')//false

顺便复习了一下,这种感觉还不错哟!

  function isFalse (v) {
    return v === false
  }

校验是否是false,返回值是true/false;和上面的函数也是相对应的。

  function isPrimitive (value) {
    return (
      typeof value === 'string' ||
      typeof value === 'number' ||
      // $flow-disable-line
      typeof value === 'symbol' ||
      typeof value === 'boolean'

    )
  }

检查值是否是自带的 基本类型,js基本数据类型我来复习一下哈!字符串/数字/symbol/布尔。
在ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Null。
ES6 中新增了一种 Symbol 。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。(但是很多人不把这个做为一个类型)。

 function isObject (obj) {
    return obj !== null && typeof obj === 'object'
  }

检查是否是一个引用数据,说白了应该是不是一个对象吧!

var _toString = Object.prototype.toString;
// console.log(_toString);[Function: toString]

接下来验证这个方法的时刻到了,往下看⬇️

/*返回数据类型:object*/
  _toString.call({})             [object Object]
  _toString.call([])             [object Array]
  _toString.call("name")         [object String]
  _toString.call(null)           [object Null]
  _toString.call(false/true)     [object Boolean]
  _toString.call(undefined)      [object Undefined]
  _toString.call(function () {}) [object Function]
  _toString.call(new Date())     [object Date]
  _toString.call(/[1-9][0-9]*/)  [object RegExp]

强迫症的我感觉对齐才舒服呢!😄😄😄

function toRawType (value) {
    return _toString.call(value).slice(8, -1)
 }

toRawType函数就是把上面返回的值做个截取,例如: [object Number]这个字符串做了截取,得到的结果是"Number".

  function isPlainObject (obj) {
    return _toString.call(obj) === '[object Object]'
  }

toRawType这个函数的作用理解了,这个函数就不难理解,返回值 :ture/false;

 function isRegExp (v) {
    return _toString.call(v) === '[object RegExp]'
  }

检查一个值是不是正则表达式,返回值:true/false;
大家都知道判断数据类型的方法有很多。我们常用的有typeof但是,这个方法有一定的局限性。

typeof null
// "object"
 
typeof [8]
// "object"
 
typeof {}
// "object"
 
typeof function(){}
// "function"
typeof 2
//"number"
 
typeof ""
//"string"
 
typeof true
//"boolean"
 
typeof undefined
//"undefined"
 
typeof Symbol(2)
//"Symbol"

typeof 无法区分null 数组和对象,通常我们会区分判断Array和Object,,所以为了兼容到所有数据类型,就使用toString.call(v);
这个方法我也很少用的,感觉还是要多写写原生js,吼吼!

 function isValidArrayIndex (val) {
    var n = parseFloat(String(val));
    return n >= 0 && Math.floor(n) === n && isFinite(val)
  }

检查val是否是有效的数组索引, isFinite() 函数用于检查其参数是否是无穷大,也可以理解为是否为一个有限数值(finite number)。
如果参数是 NaN,正无穷大或者负无穷大,会返回 false,其他返回 true。好吧,我又孤陋寡闻了,isFinite()这个函数我没有见过。又学习啦!

  function isPromise (val) {
    return (
      isDef(val) &&
      typeof val.then === 'function' &&
      typeof val.catch === 'function'
    )
  }

检查是否是一个可使用的Promise对象,这个对象应该是目前使用率蛮高的。例如:console.log(isPromise(new Promise(function (resolve, reject) { })));

function toString (val) {
    return val == null
      ? ''
      : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
        ? JSON.stringify(val, null, 2)
        : String(val)
  }

将值转换为字符串,首先先解析传入的值是否为空?如果不为空,Array.isArray() 用于确定传递的值是否是一个 Array,或者是{}
JSON.stringify这个函数的作用主要是为了系列化对象的,Array或者{}都不成立就直接使用String()转成字符串;

toString(undefined) // '';
传入undefined,返回的是空字符串,我才想起来,undefined == null,返回的是true
function toNumber (val) {
    var n = parseFloat(val);
    return isNaN(n) ? val : n
  }

将输入值转换为数字,如果转换失败,返回传入的原值;

  makeMap('slot,component', true);//调用方法;
  makeMap('slot,component', true)('slot')//检查检查key值是否在这个map集合里,结果返回ture
  function makeMap (
    str,
    expectsLowerCase
  ) {
    var map = Object.create(null);//创建一个新对象
    var list = str.split(',');//解析str,以逗号分割得到结果["slot", "component"]
    for (var i = 0; i < list.length; i++) {//遍历list,放进map集合里。得到的结果{slot: true, component: true}
      map[list[i]] = true;
    }
   
    return expectsLowerCase
      ? function (val) { return map[val.toLowerCase()]; } //第二个参数为true返回此方法(把大写转为小写),返回值为true/false;
      : function (val) { return map[val]; } //第二个参数为false返回此方法,返回值为true/false;
  }

这个函数有两个参数,第一个参数需要传入(“name,age”),中间有逗号隔开的格式,第二个参数只要为true,就可以把大写字母转为小写字母。Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

//检查标记是否为内置标记 
  var isBuiltInTag = makeMap('slot,component', true);
// 检查属性是否为保留属性
  var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is');

上面👆这两句代码以后再其他地方使用到就能理解这样写的用途吧!

function remove (arr, item) {
    if (arr.length) {
      var index = arr.indexOf(item);
      if (index > -1) {
        return arr.splice(index, 1)
      }
    }
  }

移除数组的某一项。这个函数还是经常会出现在项目里的util.js里,大家都懂得!

var hasOwnProperty = Object.prototype.hasOwnProperty;
  function hasOwn (obj, key) {
    return hasOwnProperty.call(obj, key)
  }

这个函数是检查一个对象是否包含所需属性。返回值为true/false;如果用Object.create(null)创建的对象,这个方法obj.hasOwnProperty(key)不可用,亲们,也可以自己试一下,👇是我测试的

var a = Object.create(null);
  a.name = "yy";
  console.log(a.hasOwnProperty('name'));//报错内容Uncaught TypeError: a.hasOwnProperty is not a function。
  hasOwnProperty.call(obj, key);//为什么这样写是有一定的道理的哈!
  console.log(hasOwn(a, 'name'));//返回true;

以上是今天抽空看的一些源码,记录下来也是为了方便自己查看和复习,毕竟好记性不如烂笔头嘛。下次继续更新~~,谢谢大家关注我哈😄😄😄!!!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值