详解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 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
vue axios封装及API统一管理的方法
Apr 18 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
js实现简单商品筛选功能
Feb 02 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列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php数组删除元素示例
2014/03/21 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python 远程统计文件代码分享
2015/05/14 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python实现银行实战系统
2020/02/26 Python
Django封装交互接口代码
2020/07/12 Python
最新销售员个人自荐信
2013/09/21 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
商业融资计划书
2014/04/29 职场文书
中秋节活动总结
2014/08/29 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
钱学森观后感
2015/06/04 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
PHP正则表达式之RCEService回溯
2022/04/11 PHP