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>

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