详解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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
vue中promise的使用及异步请求数据的方法
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
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python中property函数用法实例分析
2018/06/04 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Keras自定义IOU方式
2020/06/10 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
J2EE面试题大全
2016/08/06 面试题
法律进学校实施方案
2014/03/15 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书