使用原生代码实现一个Events模块,可以实现自定义事件的订阅、触发、移除功能
function Events() {
// 放置所有添加的 监听事件
this._events = {}
}
Events.prototype = {
on: function (name, fn, ...argOrg) {
// 必传参数验证
if (!name || !fn) {
throw new Error(`[Events TypeError] Failed to execute 'Events' on '${name}' : arguments required`)
return
}
// 阻止重复添加相同的监听
let fns = this._events[name] || []
if(fns.find(item=> item.fnOrg===fn)){
return;
}
this._events[name] = fns.concat({
fn: arg => fn.apply(null, [...argOrg, ...arg]),
fnOrg:fn
})
},
once: function (name, fn, ...argOrg) {
const onFn = (...arg) =>{
fn.apply(null, arg)
this.off(name, onFn)
}
this.on(name, onFn, ...argOrg)
},
emit: function (name, ...arg) {
(this._events[name]||[]).forEach(item =>{
item.fn(arg)
})
},
off: function (name,fn) {
// 无参数 : 清掉所有监听
if(!arguments.length){
this._events = Object.create(null)
}
// 一个参数 : 清掉该事件名下所有监听
if(arguments.length==){
delete this._events[name]
}
let fns = this._events[name];
if(!fns || !fns.length)return;
this._events[name] = (fns||[]).filter(item=> {
return item.fnOrg !== fn
});
}
}
// 调用demo
const event = new Events();
const fn1 = (...args)=>console.log('I want sleep1',...args)
const fn2 = (...args)=>console.log('I want sleep2',...args)
// part1: 添加多次监听
event.on('sleep', fn1, , , );
event.on('sleep', fn2, , , );
event.emit('sleep', ,,);
// 输出
// I want sleep1 1 2 3 4 5 6
// I want sleep2 1 2 3 4 5 6
// part2:once监听 只触发一次
event.once('sleep1', fn1, , );
event.emit('sleep1',);
event.emit('sleep1',);
// 输出
// I want sleep1 11 12 13
// part3: 重复监听“相同回调”无效(匿名函数除外)
event.on('sleep2', fn2, );
event.on('sleep2', fn2, );
event.emit('sleep2',);
// 输出
// I want sleep2 22 25
// part3: 清除监听
event.off('sleep2', fn2);
event.off('sleep1'); // 清除该事件下所有监听
event.off(); // 全部清除
event.emit('sleep2',);
// 输出
// 无
使用原生代码实现一个Events模块,可以实现自定义事件的订阅、触发、移除功能的更多相关文章
- python 控制语句基础---->代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 | 作用域:作用的范围
# ### 代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 # ### 作用域:作用的范围 print(11) print(12) prin ...
- js原生代码编写一个鼠标在页面移动坐标的检测功能,兼容各大浏览器
function mousePosition(e) { //IE9以上的浏览器获取 if (e.pageX || e.pageY) { return { ...
- Backbone事件管理——Backbone.Events模块API结构
模块Backbone.Events的事件管理是通过Backbone提供的Events API来实现的,该API在1.0版本之前仅仅提供了几个基本的方法,如on.off.trigger.once分别执行 ...
- 模块(类)之间解耦利器:EventPublishSubscribeUtils 事件发布订阅工具类
如果熟悉C#语言的小伙伴们一般都会知道委托.事件的好处,只需在某个类中提前定义好公开的委托或事件(委托的特殊表现形式)变量,然后在其它类中就可以很随意的订阅该委托或事件,当委托或事件被触发执行时,会自 ...
- 用原生JS实现一个轮播(包含全部代码和详细思路)
在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...
- [代码]--IIS发布网站浏览之后看到的是文件目录 & Internal Server Error 处理程序“ExtensionlessUrlHandler-ISAPI-4.0_64bit”在其模块列表中有一个错误模块“IsapiModule” 解决方法 & App_global.asax.pduxejp_.dll”--“拒绝访问。 ”
Q:IIS发布网站浏览之后看到的是文件目录 A:它出现了一个说到.NET4.0 更高框架什么的错误,所以我将 .NTE CRL版本由4.0改为2.0了,改为2.0后就出现了只能浏览文件目录了.改为4. ...
- 深入出不来nodejs源码-events模块
这一节内容超级简单,纯JS,就当给自己放个假了,V8引擎和node的C++代码看得有点脑阔疼. 学过DOM的应该都知道一个API,叫addeventlistener,即事件绑定.这个东西贯穿了整个JS ...
- Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)
在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加 ...
- events模块
/** * Created by Administrator on 2016/8/3. */ var http = require("http"); //Node 导入文件系统模块 ...
随机推荐
- Python递归函数如何写?正确的Python递归函数用法
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归 ...
- 轻松构建基于 Serverless 架构的弹性高可用音视频处理系统
前言 随着计算机技术和 Internet 的日新月异,视频点播技术因其良好的人机交互性和流媒体传输技术倍受教育.娱乐等行业青睐,而在当前, 云计算平台厂商的产品线不断成熟完善, 如果想要搭建视频点播类 ...
- Vue单页面应用打包app处理返回按钮
情况 顶部返回,在header.vue公用组件中使用 this.$router.go(-1) 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不 ...
- 在Linux系统下制作系统启动盘(Ubuntu Linux)
在Linux系统下制作系统启动盘有两种方法: 1.用dd命令 2.用Linux自带的图形界面工具 Startup Disk Creator 本教程使用第2种方式,用Linux自带的图形界面工具制作系统 ...
- Ubuntu系统下arm-linux-gcc交叉编译环境搭建过程
搭建所需环境Linux版本:Ubuntu 14.10 交叉编译器版本:arm-linux-gcc-4.4.3资源链接 何为交叉编译环境搭建交叉编译环境,即安装.配置交叉编译工具链.在Ubuntu环境下 ...
- 千呼万唤始出来——uFUN开发板2.0开箱评测
前言 今年3月,我参与了面包板社区组织的第一批uFUN开发板评测活动,并有幸能获得试用机会,那是我第一次了解到uFUN这个项目及背后的故事,4月份,uFUN 2.0版本来了,收到了张工送的一块样板,后 ...
- 简单实现vue列表点击某个高亮显示
比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...
- 找不到UseInMemoryDatabase方法
创建WebApi项目时,在ConfigureServices中注册数据库上下文时,提示找不到UseInMemoryDatabase方法. 打开“工具-Nuget包管理器-程序包管理器控制台”,输入“I ...
- Spring Cloud Config实现集群配置中心
Spring Cloud Config为分布式系统提供了配置服务器和配置客户端,可以管理集群中的配置文件.使用Git.SVN等版本管理系统存放配置文件,配置服务器会到版本管理系统获取配置,集群中的配置 ...
- Linux MySQL的root无法登录数据库ERROR 1045 (28000)
Linux环境下,脚本自动安装完数据库,命令行用mysql -uroot -ppasswaord 登录却报了这么个错: ERROR 1045 (28000): Access denied for us ...