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模块,可以实现自定义事件的订阅、触发、移除功能的更多相关文章

  1. python 控制语句基础---->代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 | 作用域:作用的范围

    # ### 代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 # ### 作用域:作用的范围 print(11) print(12) prin ...

  2. js原生代码编写一个鼠标在页面移动坐标的检测功能,兼容各大浏览器

    function mousePosition(e) {     //IE9以上的浏览器获取     if (e.pageX || e.pageY) {         return {         ...

  3. Backbone事件管理——Backbone.Events模块API结构

    模块Backbone.Events的事件管理是通过Backbone提供的Events API来实现的,该API在1.0版本之前仅仅提供了几个基本的方法,如on.off.trigger.once分别执行 ...

  4. 模块(类)之间解耦利器:EventPublishSubscribeUtils 事件发布订阅工具类

    如果熟悉C#语言的小伙伴们一般都会知道委托.事件的好处,只需在某个类中提前定义好公开的委托或事件(委托的特殊表现形式)变量,然后在其它类中就可以很随意的订阅该委托或事件,当委托或事件被触发执行时,会自 ...

  5. 用原生JS实现一个轮播(包含全部代码和详细思路)

    在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面.这个案例是通过改变图片的透明度来实现轮播的效果. 我把涉及的知识点分为两个方面,分别是HTML+css和JS. 第一部分(html+cs ...

  6. [代码]--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. ...

  7. 深入出不来nodejs源码-events模块

    这一节内容超级简单,纯JS,就当给自己放个假了,V8引擎和node的C++代码看得有点脑阔疼. 学过DOM的应该都知道一个API,叫addeventlistener,即事件绑定.这个东西贯穿了整个JS ...

  8. Cordova - 与iOS原生代码交互2(使用Swift开发Cordova的自定义插件)

    在前一篇文章中我介绍了如何通过 js 与原生代码进行交互(Cordova - 与iOS原生代码交互1(通过JS调用Swift方法)),当时是直接对Cordova生成的iOS工程项目进行编辑操作的(添加 ...

  9. events模块

    /** * Created by Administrator on 2016/8/3. */ var http = require("http"); //Node 导入文件系统模块 ...

随机推荐

  1. Hadoop HDFS 源码解析记录

    版权说明: 本文章版权归本人及博客园共同所有,转载请标明原文出处( https://www.cnblogs.com/mikevictor07/p/12047502.html ),以下内容为个人理解,仅 ...

  2. 【JS】312- 复习 JavaScript 严格模式(Strict Mode)

    点击上方"前端自习课"关注,学习起来~ 注:本文为 < JavaScript 完全手册(2018版) >第30节,你可以查看该手册的完整目录. 严格模式是一项 ES5 ...

  3. 剑指Offer-41.和为S的连续正数序列(C++/Java)

    题目: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他就 ...

  4. 可编程逻辑(FPGA)与硬核处理器(HPS)之间互联的结构

    本周我想进一步探究可编程逻辑(FPGA)与硬核处理器(HPS)之间互联的结构.我发现了三种主要方式,它们是如何映射并处理通信的,哪些组件需要管控时序并且有访问权限. AXI Bridge 为了能够实现 ...

  5. CSDN Markdown编辑器插入代码块时不能代码高亮

    当我们点击插入代码块按钮,会提示我们在这里插入代码片,我们在三个单引号对之间输入代码后发现并没有实现代码块高亮, 如下图所示: <!DOCTYPE html> <html lang= ...

  6. c语言入门到精通怎么能少了这7本书籍?

    C语言作为学编程最好的入门语言,对一个初进程序大门的小白来说是很有帮助的,学习编程能培养一个人的逻辑思维,而C语言则是公认的最符合人们对程序的认知的一款计算机语言,很多大学都选择了使用C语言作为大学生 ...

  7. 一起学Vue之模板语法

    概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTM ...

  8. (办公)记事本_Linux权限

    参考谷粒学院Linux教程:http://www.gulixueyuan.com/course/300/task/7084/show# linux权限,什么用户可以操作什么. 1.基本权限的作用: 1 ...

  9. Nginx+Tomcat8+Memcached实现负载均衡及session共享

    1> 基础环境 简易拓扑图: 2> 部署Tomcat [root@node01 ~]# ll -h ~ |egrep 'jdk|tomcat'-rw-r--r-- 1 root root ...

  10. 非关系型数据库--redis

    0.1 新单词 expire 美 /ɪk'spaɪɚ/ 到期 range 美 /rendʒ/ 范围 idle美 /'aɪdl/ 闲置的 0.2 面试题:mysql和redis和memcached区别? ...