详解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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
深入了解JS之作用域和闭包
Jun 16 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python如何实现反向迭代
2018/03/20 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python实现图片九宫格分割
2021/03/07 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
国贸专业毕业求职信
2014/06/11 职场文书
市场营销专业求职信
2014/06/17 职场文书
妈妈活动方案
2014/08/15 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
新年晚会开场白
2015/05/29 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers