纵有疾风起
人生不言弃

vue源码里的方法封装(一)

决定格局最重要的一点,是视野。 当我们在二楼的时候,看到的会是满地的垃圾;而在二十二楼的时候,会将满城的风景,尽收眼底。不同的楼层,就会有不同的视野和心态。人也一样,当我们迈入了一个新的高度,达到了更高的境界,就会有不一样的视野和胸怀。当然,作为程序员也是一样的,当下最流行的vue框架,了解了他的原理之后我们的视野也会很广。 这篇文章主要记录vue源码里封装的一些常用方法,便于在开发的时候使用。

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

<font face=”黑体” color=green size=1>这个方法其实很简单,就是判断一个字段是否被定义,即是不是空,如果是空返回true,不是空返回false</font>

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

<font face=”黑体” color=green size=1>这个方法跟上一个方法原理上是一样的,就是判断一个字段是否被定义,即是不是空,如果是空返回false,不是空返回true</font>

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

<font face=”黑体” color=green size=1>这两个方法就不言而已了,新手也会懂。</font>

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

<font face=”黑体” color=green size=1>这个方法是判断某个值是否是原生数据类型。普及一下js的小知识:</font><font face=”黑体” color=red size=1>js的原生数据类型:Number String Boolean Null Undefined Symbol(ES6新增的)</font><font face=”黑体” color=green size=1>接着说这个方法,因为上面已经有了对undefined和null的判断,这块就没再加那两个数据类型的判断,在封装的时候加上也是可以的。</font>

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

<font face=”黑体” color=green size=1>这个方法是判断某个值是不是对象。</font>

var _toString = Object.prototype.toString;

<font face=”黑体” color=green size=2>该方法返回某个对象数据类型的字符串。为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用,传递要检查的对象作为第一个参数,称为 thisArg。</font>
<font face=”黑体” color=blue size=1>想更深刻理解可以访问该链接</font>

该方法返回描述某个对象数据类型的字符串,如自定义的对象没有被覆盖,则会返回“[object type]”,其中,type则是实际的对象类型。在使用该方法检测的时候,可以使用Object.prototype.toString.call()或者Object.prototype.toString.apply()进行测试,如

var toString = Object.prototype.toString;toString.call(new Date);//[object Date]toString.call(new String);//[object String]toString.call(Math);//[object Math]toString.call(undefined);//[object Undefined]toString.call(null);//[object Null]

因此,引出Object.prototype.toString.call(obj).slice(8,-1),如

Object.prototype.toString.call('ESStudio balabala……');//"[object String]"Object.prototype.toString.call('ESStudio balabala……').slice(8,-1);//"String"

slice(startIndex,endIndex),从0开始索引,其中8代表从第8位(包含)开始截取(本例中代表空格后面的位置),-1代表截取到倒数第一位(不含),所以正好截取到[object String]中的String。而在vue里,这个方法用在了四个地方

  1. 第一处是在父子组件传值的时候验证props的数据类型,比如你在子组件里定义的props某个字段是Number类型的,而实际父组件传递过来的值是String类型,就会提示<font face=”黑体” color=red size=1>warn( "Invalid value for option \"props\": expected an Array or an Object, " + "but got " + (toRawType(props)) + ".", vm );</font>这里的(toRawType(props))即当前数据类型
  2. 第二处是在深度组件传值的时候验证inject的数据类型,具体提示同上
  3. 剩余两次应用目前还没分析到,就暂时不说了。
function isPlainObject (obj) {    return _toString.call(obj) === '[object Object]'}function isRegExp (v) {    return _toString.call(v) === '[object RegExp]'}

<font face=”黑体” color=green size=1>这两个方法是严格的验证某个值是否普通的javascript对象,只返回true/false</font>

用 typeof 无法准确判断一个对象变量,null 的结果也是 object,Array 的结果也是 object,有时候我们需要的是 “纯粹” 的 object对象。就可以用这个方法:Object.prototype.toString.call(obj) === “[object Object]”

console.log(Object.prototype.toString.call("jerry"));//[object String]console.log(Object.prototype.toString.call(12));//[object Number]console.log(Object.prototype.toString.call(true));//[object Boolean]console.log(Object.prototype.toString.call(undefined));//[object Undefined]console.log(Object.prototype.toString.call(null));//[object Null]console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]console.log(Object.prototype.toString.call(function(){}));//[object Function]console.log(Object.prototype.toString.call([]));//[object Array]console.log(Object.prototype.toString.call(new Date));//[object Date]console.log(Object.prototype.toString.call(/\d/));//[object RegExp]function Person(){};console.log(Object.prototype.toString.call(new Person));//[object Object]

无法区分自定义对象类型,自定义类型可以采用 instanceof 区分

<font face=”黑体” color=green size=3>昂…就先介绍到这里吧。下篇文章接着介绍,欢迎下次光临</font>

文章转载于:https://www.jianshu.com/p/6d1d846053eb

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » vue源码里的方法封装(一)

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活