记录--对于$off,Exclude 和 Extract的一点理解
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
一.typescript 高阶类型 Exclude 和 Extract
Exclude<T, U>
TypeScript 2.8
中增加了 Exclude
类型,该如何理解这个高级类型的定义呢?
type Exclude<T, U> = T extends U ? never : T;
从 Exclude
的定义来看,就是判断 T
是否继承于 U
,如果是,则返回 never
,否则返回 T
。
1. T, U 之间的关系,是否是基于结构相似呢?
interface IPerson {
name: string,
age: number,
sex: 0 | 1,
} interface IMan {
name: string,
age: number,
} type Man = Exclude<IPerson, IMan> // 等效于 type Man = never
结论:只需要两者类型能够保持一致,同时 T
的类型能够兼容 U
的类型即可。
2. 对于联合类型,是如何进行类比的?
type Fruits = "apple" | "banana" | 'peach' | 'orange';
type DislikeFruits = "apple" | "banana";
type FloveFruits = Exclude<Fruits, DislikeFruits> // 等效于 type FloveFruits = "peach" | "orange" // 实际上 Exclude 进行的比较
type FloveFruits =
| ("apple" extends "apple" | "banana" ? never : "apple")
| ("banana" extends "apple" | "banana" ? never : "banana")
| ("peach" extends "apple" | "banana" ? never : "peach")
| ("orange" extends "apple" | "banana" ? never : "orange")
// 所以最后的结果
type FloveFruits = "peach" | "orange"
当入参是联合类型时,它会以分布式的形式去进行比较。
Extract<T, U>
Extract
的功能,与 Exclude
相反,它是 提取 T
中可以赋值给 U
的类型。
type Extract<T, U> = T extends U ? T : never
1. T, U 之间的关系,是否是基于结构相似呢?
interface IPerson {
name: string,
age: number,
sex: 0 | 1,
} interface IMan {
name: string,
age: number,
} type Man = Extract<IPerson, IMan> // 等效于 type Man = IPerson
与 Exclude
相同,均是保持相同的结构即可,只不过他们的取值逻辑相反。
2. 对于联合类型,是如何进行类比的?
type Fruits = "apple" | "banana" | 'peach' | 'orange';
type DislikeFruits = "apple" | "banana";
type FloveFruits = Extract<Fruits, DislikeFruits> // 等效于 type FloveFruits = "apple" | "banana"
原理与 Exclude
类似,仅仅是取值的逻辑不同而已。
二.vue事件方法之$off方法的实现原理
vue中事件方法一共就四个,挂载在vue实例上的$off移除事件中心里面某个事件的回调函数,通常会用到,那么$off的内部实现原理是什么呢?下面我们来详细说下$off:
vm.$off( [event, callback] )
参数:
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]
作用:
移除自定义事件监听器。
如果没有提供参数,则移除所有的事件监听器;
如果只提供了事件,则移除该事件所有的监听器;
如果同时提供了事件与回调,则只移除这个回调的监听器。
原理:
该方法用来移除事件中心里面某个事件的回调函数,根据所传入参数的不同,作出不同的处理。
Vue.prototype.$off = function (event, fn) {
const vm: Component = this
// all
if (!arguments.length) {
vm._events = Object.create(null)
return vm
}
// array of events
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.$off(event[i], fn)
}
return vm
}
// specific event
const cbs = vm._events[event]
if (!cbs) {
return vm
}
if (!fn) {
vm._events[event] = null
return vm
}
if (fn) {
// specific handler
let cb
let i = cbs.length
while (i--) {
cb = cbs[i]
if (cb === fn || cb.fn === fn) {
cbs.splice(i, 1)
break
}
}
}
return vm
}
该方法内部就是通过不断判断所传参数的情况进而进行不同的逻辑处理。
首先,判断如果没有传入任何参数(即arguments.length
为0),这就是第一种情况:如果没有提供参数,则移除所有的事件监听器。我们知道,当前实例上的所有事件都存储在事件中心_events
属性中,要想移除所有的事件,那么只需把_events
属性重新置为空对象即可。
接着,判断如果传入的需要移除的事件名是一个数组,就表示需要一次性移除多个事件,那么我们只需同订阅多个事件一样,遍历该数组,然后将数组中的每一个事件都递归调用$off方法进行移除即可。
接着,获取到需要移除的事件名在事件中心中对应的回调函数cbs。
接着,判断如果cbs不存在,那表明在事件中心从来没有订阅过该事件,那就谈不上移除该事件,直接返回,退出程序即可。
接着,如果cbs存在,但是没有传入回调函数fn,这就是第二种情况:如果只提供了事件,则移除该事件所有的监听器。这个也不难,我们知道,在事件中心里面,一个事件名对应的回调函数是一个数组,要想移除所有的回调函数我们只需把它对应的数组设置为null即可。
接着,如果既传入了事件名,又传入了回调函数,cbs也存在,那这就是第三种情况:如果同时提供了事件与回调,则只移除这个回调的监听器。那么我们只需遍历所有回调函数数组cbs,如果cbs中某一项与fn相同,或者某一项的fn属性与fn相同,那么就将其从数组中删除即可。
就这么简单。
本文转载于:
https://blog.csdn.net/leelxp/article/details/107212699
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--对于$off,Exclude 和 Extract的一点理解的更多相关文章
- 对socket的一点理解笔记
需要学web service,但是在视频中讲解到了socket套接字编程.以前貌似课上老师有提过,只是没用到也感觉乏味.现在遇到,自己看了些博客和资料.记录一点理解,不知正确与否. 首先说这个名字,叫 ...
- iOS 的一点理解(一) 代理delegate
做了一年的iOS,想记录自己对知识点的一点理解. 第一篇,想记录一下iOS中delegate(委托,也有人称作代理)的理解吧. 故名思议,delegate就是代理的含义, 一件事情自己不方便做,然后交 ...
- mycat的schema.xml的个人的一点理解
官方文档里讲的详细的部分的我就不再赘述了,我只是谈谈我自己的理解 刚开始接触mycat,最重要的几个配置文件有server.xml,schema.xml,还有个rule.xml配置文件 具体都是干啥用 ...
- 三层架构的一点理解以及Dapper一对多查询
1.首先说一下自己对三层架构的一点理解 论坛里经常说会出现喜欢面相对象的写法,所以使用EF的,我个人觉得他俩没啥关系,先别反对,先听听我怎么说吧. 三层架构,基本都快说烂了,但今天还是说三层架构:UI ...
- gslb(global server load balance)技术的一点理解
gslb(global server load balance)技术的一点理解 前言 对于比较大的互联网公司来说,用户可能遍及海内外,此时,为了提升用户体验,公司一般会在离用户较近的地方建立机房,来服 ...
- opencv笔记5:频域和空域的一点理解
time:2015年10月06日 星期二 12时14分51秒 # opencv笔记5:频域和空域的一点理解 空间域和频率域 傅立叶变换是f(t)乘以正弦项的展开,正弦项的频率由u(其实是miu)的值决 ...
- 关于web开发的一点理解
对于web开发上的一点理解 1 宏观上的一点理解 网页从请求第地址 到获得页面的过程:从客户端(浏览器)通过地址 从soket把请求报文封装发往服务端 服务端通过解析报文并处理报文最后把处理的结果 ...
- angular.js的一点理解
对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...
- RxSwift 入坑好多天 - 终于有了一点理解
一.前言 江湖上都在说现在就要赶紧学 swift 了,即将是 swift 的天下了.在 api 变化不大的情况下,swift 作为一门新的语言,集众家之所长,普通编码确实比 oc 要好用的多了 老早就 ...
- rt-thread中动态内存分配之小内存管理模块方法的一点理解
@2019-01-18 [小记] rt-thread中动态内存分配之小内存管理模块方法的一点理解 > 内存初始化后的布局示意 lfree指向内存空闲区首地址 /** * @ingroup Sys ...
随机推荐
- NC16857 [NOI1999]生日蛋糕
题目链接 题目 题目描述 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 ≤ i ≤ M)层蛋糕是半径为Ri, 高度为Hi ...
- Python Print 显示颜色
1.顺序:显示方式,前景颜色,背景颜色 2.顺序非固定,但尽量按默认书写方式 3.也可以在input中输出使用 4.格式: print('\033[显示方式:前景颜色:背景颜色m .......... ...
- pip指定镜像安装
清华大学开源软件镜像站
- 建立DNS隧道绕过校园网认证
建立DNS隧道绕过校园网认证 因为之前在本科的时候破解过校园网三次,主要就是利用其业务逻辑上的漏洞.53端口未过滤包.重放攻击的手段,然后就是一个博弈的过程,这三次加起来用了大概有一年的时间就被完全堵 ...
- Js的GC机制
Js的GC机制 在Js七种基本类型中的引用类型Object的变量其占据内存空间大且大小不固定,在堆内存中实际存储对象,在栈内存中存储对象的指针,对于对象的访问是按引用访问的.在栈区中执行的变量等是通过 ...
- win32 - ListView_GetItemPosition的使用
ListView_GetItemPosition : Gets the position of a list-view item 理论上获得桌面图标的正确方法是使用shell项,=> IFold ...
- 项目实战:Qt数据分析处理平台(兼容各国产麒麟系统)(文件域字符串解析,上万文件批量导入,折线图、散点图,正态分布图分析处理导出等)
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/114710650长期持续带来更多项目与技术分享, ...
- dilb安装的三种方法
dilb库安装失败,源码安装嘎嘎报错,所以这里记录一下 dlib库是一个很特殊的库,在下载dlib库之前需要下载两个库(cmake.boost这两个库) pip install cmake boost ...
- Linux的这些命令你需要掌握
查看进程: 查看所有进程:ps -ef 查看指定的进程: ps -ef|grep pid(进程号) 查看前40个内存占用的进程: ps auxw|head -1;ps auxw|sort -rn -k ...
- 【Azure 环境】记录使用Notification Hub,安卓手机收不到Push通知时的错误,Error_Code 30602 or 30608
问题描述 使用Azure Notification Hub + Baidu 推送遇见的两次报错为: 1. {"request_id":2921358089,"error_ ...