欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Vue源码中一些util函数

程序员文章站 2023-12-01 13:24:22
js中很多开源库都有一个util文件夹,来存放一些常用的函数。这些套路属于那种常用但是不在es规范中,同时又不足以单独为它发布一个npm模块。所以很多库都会单独写一个工具函...

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]

详解Vue源码中一些util函数

上图是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())
}

以上所述是小编给大家介绍的vue源码中一些util函数详解整合,希望对大家有所帮助