详解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 中关于CSS操作部分使用说明
Jun 10 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
微信小程序实现签字功能
Dec 23 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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
如何使用PHP中的字符串函数
2006/11/24 PHP
2014过年倒计时示例
2014/01/31 PHP
php session的锁和并发
2016/01/22 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
自己动手封装一个React Native多级联动
2018/09/19 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python之Socket网络编程详解
2016/09/29 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
班级寄语大全
2014/04/10 职场文书
教师读书活动总结
2014/05/07 职场文书
植树节标语
2014/06/27 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
大学生个人总结范文
2015/02/15 职场文书
护士实习自荐信
2015/03/06 职场文书
上诉答辩状范文
2015/05/22 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
公历12个月名称的由来
2022/04/12 杂记