Введение
Режим наблюдателя и режим публикации/подписки, вероятно, такие же, как отношения между помидорами и помидорами черри. Возможно, мы также слышали некоторые различия между двумя режимами, но я полагаю, что большинство людей воспринимают разницу еще очень слабо. В JavaScript паттерн Observer обычно реализуется нами с паттерном Publish/Subscribe, нельзя отрицать, что эти паттерны очень похожи, но все же принципиально разные!
Во-вторых, разница между шаблоном наблюдателя и шаблоном публикации/подписки
Изображение, чтобы понять разницу макроскопически:
1. Понимание шаблона наблюдателя
Шаблон наблюдателя: объект (называемый субъектом) поддерживает ряд объектов (называемых наблюдателями), которые зависят от него, автоматически уведомляя их (наблюдателей) о любых изменениях состояния.
2. Понимание модели публикации/подписки
Режим публикации/подписки: в зависимости от канала темы/события объект, который хочет получать уведомления (называемый подписчиком), подписывается на тему с помощью настраиваемых событий, а объект, активирующий событие (называемый издателем), уведомляется путем публикации событий темы.
3. Различия между двумя режимами
- Режим наблюдателя требует, чтобы наблюдатель подписывался на события, в которых изменяется содержимое, и определяет зависимость «один ко многим»;
- Шаблон публикации/подписки использует канал темы/события между подписчиками и издателями;
- В режиме наблюдателя наблюдатель «принуждается» выполнять событие изменения содержимого (событие предметного содержимого), в режиме публикации/подписки подписчик может настроить обработчик события;
- Между двумя объектами в шаблоне наблюдателя существует сильная зависимость; связь между двумя объектами в шаблоне публикации/подписки считывается.
3. Возьмите каштан
Используйте два изображения каштана, чтобы объяснить разницу в применении двух режимов, чтобы вы могли воспринимать его красоту изнутри, сверху вниз! история @paigepig
1. Применение шаблона наблюдателя
// 以下为半伪代码
// 定义下观察者
function Observer () {
this.update = function(){}
}
// 定一个下目标
function Subscribe () {}
// 添加观察者
Subscribe.prototype.addObserver = function(observer){}
// 目标通知变更
Subscribe.prototype.notify = function(){}
var subscribe = new Subscribe();
// 定义一个佩奇猪的观察者
var peikizhuObs = new Observer();
peikizhuObs.update = function(what){
console.log("12 o'clock! 佩奇猪想要" + what);
}
subscribe.addObserver(peikizhuObs);
// 定义一个皮卡丘的观察者
var pikachuObs = new Observer();
pikachuObs.update = function(what){
console.log("皮卡丘还可以做一点自己比较个性的事情，但是12点我也是要去吃饭的！");
console.log("12 o'clock! 皮卡丘想要" + what);
}
subscribe.addObserver(pikachuObs);
// 假装12点到了
subscribe.notify('去吃饭啦～'); // 它们都去吃饭了
// or
subscribe.notify('继续玩耍～'); // 它们还在一起玩耍
инструкция:Можно видеть, что, хотя каждый наблюдатель также может настроить свой собственный обработчик (метод обновления), в режиме наблюдателя все наблюдатели делают одни и те же вещи.
2. Применение модели публикации/подписки
// 以下为半伪代码
// 简易的发布订阅
var pubsub = {
subscribe: function(){},
publish: function(){}
}
// 佩奇猪：我要订阅一个「12点」的主题事件，提醒我继续工作
pubsub.subscribe("12 o'clock", function(){
console.log'佩奇猪要继续工作！这就是为什么本猪上了屏幕，而你们上了餐桌。')
});
// 皮卡丘：我也要订阅一个「12点」的主题事件，提醒我去吃饭
pubsub.subscribe("12 o'clock", function(){
console.log('皮卡丘要吃饭，去它的工作！')
});
// 假装12点到了
pubsub.publish("12 o'clock");
инструкция:Как видите, модель публикации/подписки подписывается на обработчики соответствующей логики подписчиков, аналогично подписке jQuery на события кликов.
В-четвертых, поймите отличие от метода реализации
Итак, здесь есть еще чувства? Вы дошли до того, что... можете понять только невыразимое?
до сих пор нет? ? ?
Простите меня за грубость, я просто хочу скинуть вам кусок кода. Разница между ними с точки зрения реализации
1. Реализуйте шаблон наблюдателя
/**
* 观察者模式组件
* @author wilton
*/
define(function(require, exports, module) {
function ObserverList () {
this.observerLists = [];
}
// 添加观察者对象
ObserverList.prototype.add = function(obj){
// 保证observer的唯一性
if (this.observerLists.indexOf(obj) != -1) return this.observerLists;
return this.observerLists.push(obj);
},
// 清空观察者对象
ObserverList.prototype.empty = function(){
this.observerLists = [];
},
// 计算当前的观察者数量
ObserverList.prototype.count = function(){
return this.observerLists.length;
},
// 取出对应编号的观察者对象
ObserverList.prototype.get = function(index){
if (index > -1 && index < this.observerLists.length) {
return this.observerLists[index];
}
},
// 指定位置上插入观察者对象
ObserverList.prototype.insert = function(obj,index){
var pointer = -1;
if (index === 0) {
this.observerLists.unshift(obj);
pointer = index;
} else if (index === this.observerLists.length) {
this.observerLists.push(obj);
pointer = index;
} else {
this.observerLists.splice(index, 0, obj);
pointer = index;
}
return pointer;
},
// 查找观察者对象所在的位置编号
ObserverList.prototype.indexOf = function(obj, startIndex){
var i = startIndex || 0, pointer = -1;
while (i < this.observerLists.length) {
if (this.observerLists[i] === obj) {
pointer = i;
break;
}
i++;
}
return pointer;
},
// 移除指定编号的观察者
ObserverList.prototype.removeIndexAt = function(index){
var temp = null;
if (index === 0) {
temp = this.observerLists.shift();
} else if (index === this.observerLists.length) {
temp = this.observerLists.pop();
} else {
temp = this.observerLists.splice(index, 1)[0];
}
return temp;
}
// 定义目标类
function Subject(){
this.observers = new ObserverList();
}
// 添加观察者
Subject.prototype.addObserver = function(observer){
this.observers.add(observer);
}
// 移除观察者
Subject.prototype.removeObserver = function(observer){
this.observers.removeIndexAt(this.observers.indexOf(observer, 0));
}
// 通知观察者
Subject.prototype.notify = function(params){
var observersCount = this.observers.count();
for(var i = 0; i < observersCount; i++){
this.observers.get(i).update(params);
}
}
function Observer(){
// 定义观察者内容更新事件
this.update = function(){}
}
module.exports = {
Observer: Observer,
Subject: Subject,
// 对象扩展
extend: function(obj, extension){
for (var key in obj) {
extension[key] = obj[key];
}
}
};
});
2. Внедрите модель публикации/подписки
/**
* 发布/订阅模式组件
* @author wilton
*/
// 定义发布/订阅类
class Pubsub {
constructor () {
this.topics = {};
this.subUid = -1;
}
// 发布事件
publish (topic, args) {
if (!this.topics[topic]) return false;
let subscribers = this.topics[topic];
let len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
return this;
}
// 订阅事件
subscribe (topic,func) {
if (!this.topics[topic]) this.topics[topic] = [];
let token = (++this.subUid).toString();
this.topics[topic].push({
token: token,
func: func
})
return token;
}
// 取消订阅
unsubscribe (token) {
for (let m in topics) {
if (topics[m]) {
for (let i = 0; i < topics[m].length; i++) {
if (topics[m][i].token == token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return this;
}
}
export default Pubsub;
V. Заключение
Вышеприведенные взгляды - это только личное понимание в сочетании с практическими выводами. Добро пожаловать к старшим братьям, которые проходят мимо, чтобы добавить топор ~