详解Vue源码中一些util函数


Posted in Javascript onApril 24, 2019

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函数详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
Javascript中的arguments对象
Jun 20 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 #Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 #Javascript
详解一个小实例理解js原型和继承
Apr 24 #Javascript
微信小程序实现的一键复制功能示例
Apr 24 #Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 #Javascript
解决vue 单文件组件中样式加载问题
Apr 24 #Javascript
vue router 用户登陆功能的实例代码
Apr 24 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
php5 图片验证码实现代码
2009/12/11 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js Date概念详细介绍
2013/11/22 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
使用python为mysql实现restful接口
2018/01/05 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python队列Queue的详解
2019/05/10 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python安装scipy的方法步骤
2019/06/26 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
法律进学校实施方案
2014/03/15 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2016国庆促销广告语
2016/01/28 职场文书
详解Redis复制原理
2021/06/04 Redis
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android