观察者模式 - dom事件 / 自定义事件 / Promise 我的理解

观察者模式(Observer)

又称作为发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者对象之间通讯和耦合的问题;

观察者模式例子引用于<JavaScript设计模式>

var Observer = (function(){var _messages = {}; // 监听信息容器return {/*** 注册监听信息接口* @param {String} type 监听信息类型* @param {Function} fn  对应的回调函数*/regist: function(type, fn){// 如果过目前没有该类信息 创建数组添加  如果已经存在该类信息通过push数组添加避免覆盖if(typeof _messages[type] === 'undefined'){_messages[type] = [fn];}else{_messages[type].push(fn);}},/**    * 发布信息接口* @param {String} type 发布相关信息,触发所有该信息的回调函数* @param {Object} args 传给回调函数的信息参数  */fire: function(type, args){// 如果该类信息没有注册信息则,直接返回if(!_messages[type]) return;// 通过args参数定义 响应事件的事件对象var event = {type: type,args: args || {},},i = 0,len = _messages[type].length;for(;i < len; i++){// 传入参数调用 回调函数_messages[type][i].call(this,event);}},/*** 移除监听信息* @param {String} type* @param {Function} fn*/remove: function(type,fn){if(_messages[type] instanceof Array){var i = _messages[type].length-1;for(;i>=0;i--){// 遍历该类型的函数 找出对应的 函数并删除_messages[type][i] === fn && _messages[type].splice(i,1);}}},};
})();// 观察者->主题:今天中午吃什么菜呢,中午开饭的时候告诉我
function getFoodMenu(obj){console.log('今天的吃的是:'+obj.args.foodMenu)
}
Observer.regist('lunch',getFoodMenu );// 主题->观察者: 开饭了 ,今天只有番茄鸡蛋/豆腐汤 呵呵~~
Observer.fire('lunch',{foodMenu: '番茄鸡蛋,豆腐汤',
}); // 调用getFoodMenu ==打印==> 今天的吃的是:番茄鸡蛋,豆腐汤

View Code

从用法上简单的总结就是,添加回调函数和触发回调函数

DOM事件也是同样的原理

注册监听: addEventListener(type,fn)注册事件

取消监听: removeEventListener(type,fn)

当主体发布消息时传入Event事件对象z执行回调函数

DOM事件和自定义事件区别:自动发布信息 , 手动发布信息

DOM事件类型是固定的 click / mmouseover / keydown ....

当DOM受到相关操作的时候DOM节点自动发布信息 ,触发回调函数

而自定义事件,而自定义事件需要创建事件对象,再去手动的发布信息触发回调函数

Promise也有类似的原理

转载于:https://www.cnblogs.com/liang1100/p/8280586.html

观察者模式 - dom事件 / 自定义事件 / Promise 我的理解相关推荐

观察者模式和js自定义事件
事件是一种叫做观察者的设计模式,观察者模式由两类对象组成:主体和观察者.主体负责发布事件,同时观察者通过订阅这些事件来观察该主体.拿DOM来说,DOM就是主体,事件处理代码便是观察者. 下面是一个自定 ...
C#事件-自定义事件
事件有很多,比如说鼠标的事件:MouserMove,MouserDown等. 键盘的事件:KeyUp,KeyDown,KeyPress. 有事件,就会有对事件进行处理的方法,而事件和处理方法之间是怎 ...
html 自动触发事件,js自动触发事件自定义事件
在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件 ...
Yii2 事件--自定义事件和系统事件
首先撇开yii,让我们来理解一下js的事件以js的click事件为例--点击按钮时的弹出警告,首先要定义click事件,然后在点击的时候回触发事件,最后是弹出警告. 事件就是这么一个过程. 总结一下 ...
JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录一.事件与事件流二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式三.事件对象四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
在AdMob中介内创建横幅广告自定义事件
一:前提条件 1:将KeyMob与应用集成. 2:您可能还需要先了解发送AdRequest的相关信息以及中介的工作原理. 二:横幅广告自定义事件在以下示例中,您将首先在KeyMob中介内创建一个横幅 ...
【就你不知道-Flex 自定义事件-龙骑士之死】（2012-05-25 08:29）
一:目的问:为什么要自定义事件? 答:系统提供事件不能满足. 举例:需要传递参数. 二:背景事件不是鼓励存在的,事件始终是和一个对象相关联的,否则,单独说事件毫无意义. 举例:当英雄血为0时,死亡 ...
【QT】自定义事件 QCustomEvent
[QT]自定义事件一.自定义事件的优势尽管 Qt 已经提供了很多事件,但对于更加千变万化的需求来说,有限的事件都是不够的.例如,我要支持一种新的设备,这个设备提供一种崭新的交互方式,那么,这种事件 ...

观察者模式 - dom事件 / 自定义事件 / Promise 我的理解

观察者模式(Observer)

观察者模式例子引用于<JavaScript设计模式>

DOM事件也是同样的原理

DOM事件和自定义事件区别:自动发布信息 , 手动发布信息

Promise也有类似的原理

观察者模式 - dom事件 / 自定义事件 / Promise 我的理解相关推荐

最新文章

热门文章

观察者模式 - dom事件 / 自定义事件 / Promise 我的理解

观察者模式(Observer)

观察者模式例子 引用于<JavaScript设计模式>

DOM事件也是同样的原理

DOM事件和自定义事件 区别:自动发布信息 , 手动发布信息

Promise也有类似的原理

观察者模式 - dom事件 / 自定义事件 / Promise 我的理解相关推荐

最新文章

热门文章

观察者模式例子引用于<JavaScript设计模式>

DOM事件和自定义事件区别:自动发布信息 , 手动发布信息