溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

詳解Vue源碼中一些util函數(shù)

發(fā)布時(shí)間：2020-09-12 04:54:31 來(lái)源：腳本之家 閱讀：184 作者：saltfish666 欄目：web開(kāi)發(fā)

JS中很多開(kāi)源庫(kù)都有一個(gè)util文件夾，來(lái)存放一些常用的函數(shù)。這些套路屬于那種常用但是不在ES規(guī)范中，同時(shí)又不足以單獨(dú)為它發(fā)布一個(gè)npm模塊。所以很多庫(kù)都會(huì)單獨(dú)寫(xiě)一個(gè)工具函數(shù)模塊。

最進(jìn)嘗試閱讀vue源碼，看到很多有意思的函數(shù)，在這里分享一下。

Object.prototype.toString.call(arg) 和 String(arg) 的區(qū)別？

上述兩個(gè)表達(dá)式都是嘗試將一個(gè)參數(shù)轉(zhuǎn)化為字符串，但是還是有區(qū)別的。

String(arg) 會(huì)嘗試調(diào)用 arg.toString() 或者 arg.valueOf(), 所以如果arg或者arg的原型重寫(xiě)了這兩個(gè)方法，Object.prototype.toString.call(arg) 和 String(arg) 的結(jié)果就不同

const _toString = Object.prototype.toString
var obj = {}

obj.toString() // [object Object]
_toString.call(obj) // [object Object]

obj.toString = () => '111'

obj.toString() // 111
_toString.call(obj) // [object Object]

/hello/.toString() // /hello/
_toString.call(/hello/) // [object RegExp]

詳解Vue源碼中一些util函數(shù)

上圖是ES2018的截圖，我們可以知道Object.prototype.toString的規(guī)則，而且有一個(gè)規(guī)律，Object.prototype.toString的返回值總是 [object + tag + ],如果我們只想要中間的tag，不要兩邊煩人的補(bǔ)充字符，我們可以

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

toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"

雖然看起來(lái)挺簡(jiǎn)單的，但是很難自發(fā)的領(lǐng)悟到這種寫(xiě)法，有木有。。

緩存函數(shù)計(jì)算結(jié)果

假如有這樣的一個(gè)函數(shù)

function computed(str) {
 // 假設(shè)中間的計(jì)算非常耗時(shí)
 console.log('2000s have passed')
 return 'a result'
}

我們希望將一些運(yùn)算結(jié)果緩存起來(lái)，第二次調(diào)用的時(shí)候直接讀取緩存中的內(nèi)容，我們可以怎么做呢？

function cached(fn){
 const cache = Object.create(null)
 return function cachedFn (str) {
  if ( !cache[str] ) {
    cache[str] = fn(str)
  }
  return cache[str]
 }
}

var cachedComputed = cached(computed)
cachedComputed('ss')
// 打印2000s have passed
cachedComputed('ss')
// 不再打印

將hello-world風(fēng)格的轉(zhuǎn)化為helloWorld風(fēng)格

const camelizeRE = /-(\w)/g
const camelize = cached((str) => {
 return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})

camelize('hello-world')
// "helloWorld"

判斷JS運(yùn)行環(huán)境

const inBrowser = typeof window !== 'undefined'

const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform
const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase()

const UA = inBrowser && window.navigator.userAgent.toLowerCase()

const isIE = UA && /msie|trident/.test(UA)
const isIE9 = UA && UA.indexOf('msie 9.0') > 0
const isEdge = UA && UA.indexOf('edge/') > 0
const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android')
const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios')
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
const isPhantomJS = UA && /phantomjs/.test(UA)
const isFF = UA && UA.match(/firefox\/(\d+)/)

判斷一個(gè)函數(shù)是宿主環(huán)境提供的還是用戶自定義的

console.log.toString()
// "function log() { [native code] }"

function fn(){}
fn.toString()
// "function fn(){}"

// 所以
function isNative (Ctor){
 return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}

以上所述是小編給大家介紹的Vue源碼中一些util函數(shù)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手