首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue源码中9个可借鉴的基础方法

Vue源码中9个可借鉴的基础方法

作者头像
Javanx
发布于 2020-02-28 06:22:42
发布于 2020-02-28 06:22:42
50400
代码可运行
举报
文章被收录于专栏:web秀web秀
运行总次数:0
代码可运行

1、基础判断

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function isUndef(v) {
        return v === undefined || v === null
    }
    function isDef(v) {
        return v !== undefined && v !== null
    }
    function isTrue(v) {
        return v === true
    }
    function isFalse(v) {
        return v === false
    }

2、检查是否是原始值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function isPrimitive(value) {
        return (
            typeof value === 'string' ||
            typeof value === 'number' ||
            // $flow-disable-line
            typeof value === 'symbol' ||
            typeof value === 'boolean'
        )
    }

3、快速对象检查

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function isObject(obj) {
        return obj !== null && typeof obj === 'object'
    }

4、获取值的原始类型字符串

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    var _toString = Object.prototype.toString;

    function toRawType(value) {
        return _toString.call(value).slice(8, -1)
    }

5、严格的对象类型检查

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function isPlainObject(obj) {
        return _toString.call(obj) === '[object Object]'
    }
    // 这里大家可以思考一下为什么使用这种方式,还有下面的正则检查

6、严格的正则类型检查

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function isRegExp(v) {
        return _toString.call(v) === '[object RegExp]'
    }

7、检查是够是有效的数组下标

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function isValidArrayIndex(val) {
        var n = parseFloat(String(val));
        return n >= 0 && Math.floor(n) === n && isFinite(val)
    }

8、值转换为实际的字符串

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function toString(val) {
        return val == null ?
            '' :
            Array.isArray(val) || (isPlainObject(val) && val.toString === _toString) ?
            JSON.stringify(val, null, 2) :
            String(val)
    }

9、值转换为数字以进行持久化

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function toNumber(val) {
        var n = parseFloat(val);
        return isNaN(n) ? val : n
    }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue 源码解析之工具方法
检测是否是正则表达式 export function isRegExp (v) { return _toString.call(v) === '[object RegExp]' }
公众号---人生代码
2021/03/16
4260
【源码共读】Vue2工具函数
点击在线地址查看,会发现该文件实际上有很多函数。实际上就是Vue2的工具函数库。下面就来简单学习一下。因为源码用的是ts,理解起来可能会加点成本,所以下面讲解会把类型部分去掉(其实是本人的ts水平不高,很难很好的解释)
赤蓝紫
2023/03/06
8850
【源码共读】Vue2工具函数
初学者也能看懂的 Vue2 源码中那些实用的基础工具函数
想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue、玩具vite等10余篇源码文章。
若川
2021/11/10
1K0
我从Vue源码中学到的一些JS编程技巧
在我们面试的过程中,经常会遇到问源码的环节,因为优秀的框架通常都会包含很多设计理念跟编程实践。这段时间我一直在看Vue2的源码,发现了很多有意思的实现。虽然现在Vue3都已经发布了,也无法否认Vue2是个优秀的框架这个事实,不影响我们从中学到一些最佳实践。
写代码的阿宗
2020/10/22
5690
我从Vue源码中学到的一些JS编程技巧
第173天:面向对象——数据类型检测的四种方法
使用typeof检测数据类型,首先返回的都是一个字符串,其次字符串中包含了对应的数据类型,例如:"number"、"string"、"boolean"、"undefined"、"function"、"object"
半指温柔乐
2018/09/11
3380
从Vue.js源码中我学到的几个实用函数
如果想看Vuejs源码,不知道如何下手,一般推荐配置Sourcemap,针对单个问题调试来看,如何调试Vuejs源码,我的vuex源码文章中写了。
若川
2021/04/23
2.7K0
从Vue.js源码中我学到的几个实用函数
读 Zepto 源码之内部方法
数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice
对角另一面
2017/12/27
8700
vue源码中值得学习的方法
作者:chinamasters https://segmentfault.com/a/1190000025157159
桃翁
2020/10/23
7510
vue源码中值得学习的方法
这些Zepto中实用的方法集
根据文章内容撰写摘要总结。
IMWeb前端团队
2017/12/29
8630
这些Zepto中实用的方法集
underscore.js源码解析2
undefined派生自null,所以两者相等(==),但是不全等(===),所以这里如果obj是undefined则会返回false。
Ewall
2018/09/04
1.1K0
初学者也能看懂的 Vue3 源码中那些实用的基础工具函数
我们也可以通过ts文件,查看使用函数的位置。同时在VSCode运行调试JS代码,我们比较推荐韩老师写的code runner插件。
用户7108768
2021/09/19
4530
jQuery中的isPlainObject()方法 实现原理
jQuery中的isPlainObject() 函数用于判断指定参数是否是一个纯粹的对象,返回值为Boolean类型。
FEWY
2019/05/27
1.4K0
JavaScript中的类型判断
类型判断在 web 开发中有非常广泛的应用,简单的有判断数字还是字符串,进阶一点的有判断数组还是对象,再进阶一点的有判断日期、正则、错误类型,再再进阶一点还有比如判断 plainObject、空对象、Window 对象等等。
ConardLi
2019/05/23
1.4K0
javascript 数据类型的判断
Boolean, Number, String, Function, Array, Date, RegExp, Object, Error, Symbol等等.
用户7293182
2022/01/17
5790
初学者也能看懂的 Vue3 源码中那些实用的基础工具函数
写相对很难的源码,耗费了自己的时间和精力,也没收获多少阅读点赞,其实是一件挺受打击的事情。从阅读量和读者受益方面来看,不能促进作者持续输出文章。
若川
2021/09/07
8810
Axios 源码阅读 | 深入剖析 Axios 1.x 源码:探索 utils 通用工具库的奥秘
在前端开发的世界里,网络请求是不可或缺的一环。Axios 作为一个强大且广受欢迎的 HTTP 客户端库,以其简洁的 API、强大的功能和良好的兼容性,成为了众多开发者的首选。而在 Axios 的源码中,utils.js 文件扮演着至关重要的角色,它提供了一系列通用的工具函数,这些函数贯穿整个 Axios 库,为其他模块的正常运行提供了坚实的基础。
叶一一
2025/05/01
1330
Axios 源码阅读 | 深入剖析 Axios 1.x 源码:探索 utils 通用工具库的奥秘
[咖聊] 从 render 到 VNode
由于 _render 和 _update 的过程还是挺复杂的,分成两期。这一期我们就先聊聊 _render 过程。
码农小余
2022/06/16
1.2K0
[咖聊] 从 render 到 VNode
vue源码分析之defineReactive方法中为什么有两种dep在收集依赖?
了解vue响应式原理对童鞋,想必对defineReactive方法有印象,这是vue响应式的核心方法。在这个方法,给obj的每个key对应的都new了一个dep,这个dep保存在defineReactive闭包中。这个dep的作用非常明显,收集当前watcher,以便在触发obj属性set方法的时候通知watcher更新。
玖柒的小窝
2021/10/05
1.9K1
JavaScript 类型的那些事
JavaScript的类型判断是前端工程师们每天代码中必备的部分,每天肯定会写上个很多遍if (a === 'xxx')或if (typeof a === 'object')类似的类型判断语句,所以掌握JavaScript中类型判断也是前端必备技能,以下会从JavaScript的类型,类型判断以及一些内部实现来让你深入了解JavaScript类型的那些事。
疯狂的技术宅
2019/03/28
7990
「面试基础小册」数据类型及其延伸
「面试基础小册」系列正式开写。主要是对一些基础相关的知识进行归纳整理与拓展。后续还有更多,敬请期待
小皮咖
2020/07/03
7290
相关推荐
Vue 源码解析之工具方法
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档