Режим наблюдателя (также известный как режим Publisher-Subscriber) должен быть одним из наиболее часто используемых режимов. Он широко используется на многих языках, включая события DOM, с которыми мы обычно обращаемся. Это также режим наблюдателя, реализованный между JS и DOM.
Кода -копия выглядит следующим образом:
div.onclick = function click () {
Alert ("Нажмите ')
}
Пока вы подпишитесь на событие Click Div, будет запустить Function Click.
Так что же такое режим наблюдателя? Давайте посмотрим на режим наблюдателя в жизни.
В Голливуде есть знаменитая поговорка. «Не звони мне, я позвоню тебе». Это предложение объясняет вкоды и выходы модели наблюдателя. Среди них «Я» - это издатель, а «Ты» - это подписчик.
Позвольте мне привести еще один пример. Когда я пришел в компанию для интервью, каждый интервьюер сказал мне после того, как я закончил: «Пожалуйста, оставьте вашу контактную информацию, и мы уведомим вас, если есть какие -либо новости». Здесь «я» является подписчиком, а интервьюер - издатель. Поэтому мне не нужно спрашивать о результатах интервью каждый день или каждый час, и инициатива в общении находится в руках интервьюера. И мне просто нужно предоставить контактную информацию.
Режим наблюдателя может очень хорошо достигать развязки между двумя модулями. Если я разрабатывал игру HTML5 в команде, когда игра началась, необходимо загрузить какой -то материал изображения. Игровая логика выполняется только после загрузки этих изображений. Предположим, что это проект, который требует от нескольких людей для работы. Я завершил модули геймера и карты, и мой коллега A написал загрузчик изображения.
Код загрузки такова следующим образом:
Кода -копия выглядит следующим образом:
LoadImage (Imgary, function () {
Map.init ();
Gamer.init ();
})
Когда изображение загружено, карта отображается и выполняется игровой логику. Ну, программа работает хорошо. Вдруг однажды я вспомнил, что я должен добавить звуковую функцию в игру. Я должен иметь загрузчик изображения добавить строку кода.
Кода -копия выглядит следующим образом:
LoadImage (Imgary, function () {
Map.init ();
Gamer.init ();
Sount.init ();
})
Но мой коллега А, который написал этот модуль, отправился в поездку за границу. Итак, я позвонил ему, эй. Где ваша функция загрузки? Могу я это изменить? Будут ли какие -либо побочные эффекты после его изменения? Как вы думаете, произошли все виды непростых вещей. Если бы мы могли написать это в начале:
Кода -копия выглядит следующим образом:
loadimage.listen ("ready ', function () {
Map.init ();
})
loadimage.listen ("ready ', function () {
Gamer.init ();
})
loadimage.listen ("ready ', function () {
Sount.init ();
})
После того, как LoadMage будет завершена, не заботится о том, что произойдет в будущем, потому что его работа будет выполнена. Затем он просто публикует сигнал.
Кода -копия выглядит следующим образом:
LoadImage.trigger ("ready ');
Тогда субъекты, которые слушали «Готовое» событие Loadimage, получат уведомления. Так же, как последний пример интервью. Интервьюер не заботится о том, где будут есть интервьюеры после получения результатов собеседования. Он несет ответственность только за сбору резюме интервьюеров. Когда выйдет результаты интервью, они уведомит их один за другим в соответствии с номером телефона в резюме.
После разговора о многих концепциях, мы можем достичь конкретной реализации. Процесс реализации на самом деле очень прост. Интервьюер бросает резюме в коробку, а затем интервьюер вызывает один за другим, чтобы уведомить результаты в нужное время.
Кода -копия выглядит следующим образом:
Events = function () {
var прослушивание, журнал, obj, один, удалить, триггер, __this;
obj = {};
__ Это = это;
Слушать = function (key, eventfn) {// бросить резюме в поле, ключ - это контактная информация.
var stack, _ref; // стек - это коробка
Stack = (_ref = obj [Key])! = NULL? _ref: obj [key] = [];
return stack.push (eventfn);
};
One = function (key, eventfn) {
удалить (ключ);
вернуть прослушивание (Key, Eventfn);
};
удалить = function (key) {
var _ref;
return (_ref = obj [Key])! = NULL? _ref.length = 0: void 0;
};
trigger = function () {// звонит интервьюер, чтобы уведомить интервьюера
var fn, stack, _i, _len, _ref, key;
key = array.prototype.shift.call (аргументы);
Stack = (_ref = obj [Key])! = NULL? _ref: obj [key] = [];
for (_i = 0, _len = Stack.length; _i <_len; _i ++) {
fn = стек [_i];
if (fn.apply (__this, аргументы) === false) {
вернуть ложь;
}
}
возвращаться {
Слушай: Слушай,
один: один,
удалить: удалить,
Триггер: триггер
}
}
Наконец, используйте режим наблюдателя, чтобы сделать небольшое приложение для телевизионных станций для взрослых.
Кода -копия выглядит следующим образом:
// подписчики
var udulttv = event ();
udulttv .listen ("play ', function (data) {
оповещение («чей фильм сегодня» + Data.Name);
});
// Издатель
udulttv .trigger ("play ', {' name ':' ki aso '})