JavaScript шаблоны проектирования: Observer или Наблюдатель

Это вольный перевод статьи JavaScript Design Patterns: Observer

У паттерна наблюдателя очень простая концепция. Наблюдатель(Observer, он же подписчик) подписывается у наблюдаемого объекта(Observable, он же издатель) на события и ждет пока не произойдет что-нибудь интересное. Наблюдатели также могут отказаться от наблюдения. Существует два простых метода у наблюдателя для получения информации о том, что происходит: push(принудительно) и pull(по запросу). В методе push, всякий раз когда что то происходит уведомляется наблюдатель. В методе pull наблюдатель сам проверяет изменилось ли что то у издателя.

Лучше я вам покажу пример. Вы ведь программист, и код понимаете лучше чем английский язык. Начнем с примера push-метода:

var Observable = function() {
this.subscribers = [];
}

Observable.prototype = {
subscribe: function(callback) {
// В большинстве случаев вам нужно будет проверять
// существует ли подписчик в списке наблюдателей или нет,
// что бы не добавлять его повторно. Но здесь просто
// добавим вызов в список
this.subscribers.push(callback);
},
unsubscribe: function(callback) {
var i = 0,
len = this.subscribers.length;

// Пробегаем про всему список если находим нужного нам
// подписчика, то удаляем его.
for (; i < len; i++) { if (this.subscribers[i] === callback) { this.subscribers.splice(i, 1); // Если нашли то что искали, // продолжать не надо. return; } } }, publish: function(data) { var i = 0, len = this.subscribers.length; // Пробегаем по всему списку подписчиков и запускаем // функции. for (; i < len; i++) { this.subscribers[i](data); } } }; var Observer = function (data) { console.log(data); } // А вот как все это используется. observable = new Observable(); observable.subscribe(Observer); observable.publish('Опубликовано!');

Сделаю несколько заметок про этот пример. Во-первых, все функции связанные с паттерном наблюдателя, реализуются в рамках наблюдаемого объекта. Благодаря гибкости JavaScipt`a, вы могли бы реализовать подписки и отписки в самом наблюдателе, но, я считаю, осуществить это в рамках наблюдаемого объекта(издателя) будет разумнее и понятнее. Еще одним примечательным моментом является то, что наблюдатель - это просто функция, которая используется в качестве функции обратного вызова. В таких языках как Java, наблюдатель должен быть объектом, реализующий специфический интерфейс. Ну и наконец, в пример наблюдаемый объект - это класс, который может использовать сам по себя, хотя гораздо полезнее наследовать его, чтобы сделать другие объекты наблюдаемыми.

Ну а теперь реализация pull-метода. Когда вы используете pull-метод, имеет смыл немного все поменять:


Observable = function() {
this.status = "construct";
}
Observable.prototype.getStatus = function() {
return this.status;
}

Observer = function() {
this.subscriptions = [];
}
Observer.prototype = {
subscribeTo: function(observable) {
this.subscriptions.push(observable);
},
unsubscribeFrom: function(observable) {
var i = 0,
len = this.subscriptions.length;

// Пробегаем по всему списку и если находим, то что искали,
// удаляем
for (; i < len; i++) { if (this.subscriptions[i] === observable) { this.subscriptions.splice(i, 1); // Не стоит искать дальше, // если уже нашли то, что искали return; } } } doSomethingIfOk: function() { var i = 0; len = this.subscriptions.length; // Пробегаемся по списку подписчиков и определяем // изменился ли статус на Ок , // и выполняем то, что нужно подписчику, если это так for (; i < len; i++) { if (this.subscriptions[i].getStatus() === "ok") { // Делаем, что нибудь, потому что стутус // такой какой нам нужен } } } } var observer = new Observer(), observable = new Observable(); observer.subscribeTo(observable); // Ничего не произойдет так как статус еще не изменен observer.doSomethingIfOk(); // Изменяем статус на "Ок", чтобы что то произошло observable.status = "ok"; observer.doSomethingIfOk();

Это сильно отличается от push-метода. Не так ли? Теперь, всякий раз когда наблюдателю вздумается, а в данном случае, тогда когда я ему сказал, он проверит статус. Как правило это происходит по таймеру, но  я решил поступить просто и вызвать его в ручную. И вновь наблюдаемый объект в коде не должен использоваться сам по себе. Вместо это должны быть подклассы со встроенными механизмами, а не вручную изменять его, как я сделал в примере.

Я привел очень простой пример, на самом деле, у наблюдаемого объекта может быть много событий. Говоря о событиях вы уже осознали, а может быть еще и нет, что события в DOM являются реализацией этого паттерна. Кроме того, многие плагины jQuery, использующие анимацию, содержат паттерн наблюдателя и таким образом, есть возможность вставить свои функции в разные точки анимации.

Паттерн наблюдателя это изумительный инструмент для сопровождения и организации больших приложений,опирающихся на действия, или даже просто для того, чтобы сделать ваш плагин для jQuery более доступным и гибким. Он добавляет хороший уровень абстракции, что помогает сделать код более чистым и легко поддерживаемым. Безусловно этот шаблон не может быт использован везде, но он может быть весьма полезен в многочисленных ситуациях.

JavaScript шаблоны проектирования: Observer или Наблюдатель: 3 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *