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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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-метод, имеет смыл немного все поменять:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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 более доступным и гибким. Он добавляет хороший уровень абстракции, что помогает сделать код более чистым и легко поддерживаемым. Безусловно этот шаблон не может быт использован везде, но он может быть весьма полезен в многочисленных ситуациях.

comments powered by HyperComments
Observer - Блог Данилова Анатолия
2012-10-04 23:41:25
[...] уже писал о шаблоне &#171;Observer&#187;. Сейчас выкладываю свою [...]
danilov
2014-03-20 15:25:56
Починил, читайте
Ateiri
2014-03-20 14:33:17
с табуляцией было бы понятно, так лениво читать и вникать