关键词：
var EventTarget = (function()
var _toArray = (function(obj, offset)
offset = offset >= 0 ? offset : 0;
if (Array.from)
// Array.from: convert an obj or an array-like obj to an array
return function(obj, offset)
return Array.from(obj).slice(offset);
return function(obj, offset)
return Array.prototype.slice.call(obj, offset);
)();
// var a = EventTarget(id: 1)
// var a = new EventTarget(id: 1)
function EventTarget(obj, isSimple)
// 没有使用 new 操作符调用时
if (!this instanceof EventTarget)
return new EventTarget(obj);
if (this instanceof EventTarget)
if (obj !== null && obj !== undefined)
for (var prop in obj)
if (obj.hasOwnProperty(prop))
this[prop] = obj[prop];
this._handlers = ;
EventTarget.prototype =
constructor: EventTarget,
_get: function(eventName)
return this._handlers[eventName] || (this._handlers[eventName] = on: [], one: []);
,
// 订阅
on: function(eventName, handler)
let events = this._get(eventName);
// 同一个消息一次性增加多个订阅者
if (Array.isArray(handler))
for (var i = 0, len = handler.length; i < len; i++)
if (typeof handler[i] === 'function')
events.on.push(handler[i]);
return this;
if (typeof handler !== 'function')
return this;
this._handlers[eventName].on.push(handler);
return this;
,
// 订阅的另一种写法
subscribe: function(eventNotification, handler)
return this.on(eventNotification, handler);
,
one: function(eventName, handler)
let events = this._get(eventName);
// 同一个消息一次性增加多个订阅者
if (Array.isArray(handler))
for (var i = 0, len = handler.length; i < len; i++)
if (typeof handler[i] === 'function')
events.one.push(handler[i]);
return this;
if (typeof handler !== 'function')
return this;
this._handlers[eventName].one.push(handler);
return this;
,
first: function(eventName, handler)
if (!handler || typeof handler !== 'function')
return this;
this._get(eventName).first = handler;
return this;
,
last: function(eventName, handler)
if (!handler || typeof handler !== 'function')
return this;
this._get(eventName).last = handler;
return this;
,
// 消息通知
emit: function(eventName, data)
var eventObject = this._get(eventName);
eventObject.first && eventObject.first(
name: eventName,
type: 'first',
data: data
);
var oneArr = eventObject.one;
while (oneArr.length)
oneArr.shift()(
name: eventName,
type: "one",
data: data
);
for (var i = 0, len = eventObject.on.length; i < len; i++)
eventObject.on[i](
name: eventName,
type: 'on',
data: data
);
eventObject.last && eventObject.last(
name: eventName,
type: 'last',
data: data
);
return this;
,
// 消息通知的另一种写法
dispatch: function(eventName, data)
return this.emit(eventName, data);
,
// 消息通知的再一种写法
trigger: function(eventName, data)
return this.emit(eventName, data);
,
clear: function(eventName)
if (eventName in this._handlers)
this._handlers[eventName] = on: [], one: [];
return this;
,
empty: function()
this._handlers = ;
return this;
;
return EventTarget;
)();
观察者模式——javascript
观察者模式又被称为发布-订阅模型或消息机制。基本思想是观察者一个静态（或全局）对象，为大家提供三个方法：发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息，当发布者发布某些消息的时候对应的订... 查看详情
javascript设计模式——观察者模式
观察者模式，又称发布-订阅模式或消息机制，定义了一种依赖关系，解决了主题对象与观察者之间功能的耦合。通过运用观察者模式，可以解决团队开发中的模块间通讯问题，这是模块间解耦的一种可行方案。首先，我们来把... 查看详情
发布-订阅者模式(观察者模式)(代码片段)
发布订阅者模式还有一些好的列子应用可以看看javascript设计模式与开发实践这本书！！！！！一、发布订阅模式是什么发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，... 查看详情
javascript原生实现观察者模式
观察者模式又叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，... 查看详情
javascript设计模式与开发实践–观察者模式
概述观察者模式又叫发布–订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生... 查看详情
javascript发布订阅者模式和观察者模式及区别(代码片段)
一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情
javascript发布订阅者模式和观察者模式及区别(代码片段)
一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情
javascript观察者模式
...状态发生该变时，所有依赖于它的对象都将得到通知。在JavaScript中，一般用事件模型来替代传统的观察者模式。 下面是售楼处(发布者)与各看房者(订阅者)的例子： varevent={ 查看详情
发布-订阅模式
...象的状态发生改变，所有依赖他的对象都将得到通知。在javascript开发中，我们一般用事件模型来替代传统的发布-订阅模式。2.Dom事件实际上，只要我们曾经在dom节点上绑定过事件函数，那么我们就曾经使用过发布-订阅模式。docu... 查看详情
发布-订阅模式
...的状态发生改变时,所有依赖于它的对象都将得到通知。JavaScript开发中我们一般用事件模型来代替传统的发布-订阅模式现实中的发布-订阅模式 小明最近喜欢上吃老北京烧饼,可是到了卖烧饼的地方 查看详情
javascript设计模式观察者模式
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。举个例子，... 查看详情
javascript手撕前端面试题：寄生组合式继承|发布订阅模式|观察者模式(代码片段)
🧑💼个人简介：大三学生，一个不甘平庸的平凡人🍬🖥️NodeJS专栏：Node.js从入门到精通🖥️博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长... 查看详情
javascript---设计模式之观察者模式
概念观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。作用支... 查看详情
javascript设计模式与开发实践–观察者模式http://web.jobbole.com/87809/
概述观察者模式又叫发布–订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生变... 查看详情
设计模式-发布-订阅者模式(代码片段)
...象的状态发生改变时，所有依赖于它的对象都将得到通知观察者模式和发布订阅模式区别观察者模式是由具体目标（发布者／被观察者）调度的，而发布/订阅模式是由独立的调度中心进行调度，所以观察者模式的订阅者与发布... 查看详情
[设计模式]观察者模式与订阅模式
在读《设计模式》时，观察者模式一直理解为订阅者/发布者，其实这两种模式还是有差异的。 一、观察者模式 相关概念：目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体... 查看详情
观察者模式vs发布-订阅模式
参考技术A差异总结：1.在观察者模式中，观察者（Observer）是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者（Publisher）和订阅者（Subscriber）不知道对方的存在。它们只有通过消息代理（信息... 查看详情
观察者模式与发布订阅模式的区别
观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系... 查看详情