Vue 源碼中一些util函數

JS中不少開源庫都有一個util文件夾，來存放一些經常使用的函數。這些套路屬於那種經常使用可是不在ES規範中，同時又不足以單獨爲它發佈一個npm模塊。因此不少庫都會單獨寫一個工具函數模塊。

最進嘗試閱讀vue源碼，看到不少有意思的函數，在這裏分享一下。

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

上述兩個表達式都是嘗試將一個參數轉化爲字符串，可是仍是有區別的。

String(arg) 會嘗試調用 arg.toString() 或者 arg.valueOf(), 因此若是arg或者arg的原型重寫了這兩個方法，Object.prototype.toString.call(arg) 和 String(arg) 的結果就不一樣

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]
複製代碼

上圖是ES2018的截圖，咱們能夠知道Object.prototype.toString的規則，並且有一個規律，Object.prototype.toString的返回值老是 [object + tag + ],若是咱們只想要中間的tag，不要兩邊煩人的補充字符，咱們能夠

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

toRawType(null) // "Null"
toRawType(/sdfsd/) //"RegExp"
複製代碼

雖然看起來挺簡單的，可是很難自發的領悟到這種寫法，有木有。。

緩存函數計算結果

假若有這樣的一個函數

function computed(str) {
  // 假設中間的計算很是耗時
  console.log('2000s have passed')
  return 'a result'
}
複製代碼

咱們但願將一些運算結果緩存起來，第二次調用的時候直接讀取緩存中的內容，咱們能夠怎麼作呢？

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風格的轉化爲helloWorld風格

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

camelize('hello-world')
// "helloWorld"
複製代碼

判斷JS運行環境

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+)/)
複製代碼

判斷一個函數是宿主環境提供的仍是用戶自定義的

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())
}
複製代碼