详解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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php无序树实现方法
2015/07/28 PHP
php中使用websocket详解
2016/09/23 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
python和C语言混合编程实例
2014/06/04 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
保安员岗位职责
2013/11/17 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
详解Flask开发技巧之异常处理
2021/06/15 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
html5调用摄像头截图功能
2022/01/18 Javascript
box-shadow单边阴影的实现
2023/05/21 HTML / CSS