Архитектура JavaScript - посредники, когда их использовать? - PullRequest
Новая
       6

Архитектура JavaScript - посредники, когда их использовать?

6 голосов
/ 27 февраля 2012

Это более общий вопрос о структуре моего кода JavaScript и о правильном направлении к хорошо структурированному коду.

Текущий код, который я получил: 

(function (myNamespace, $, undefined) {
    myNamespace.className = {
       init:function { } // do stuff
    }
} (window.myNamespace= window.myNamespace|| {}, jQuery)));

(function (myNamespace, $, undefined) {
        myNamespace.className2 = {
           init:function { } // do stuff
        }
} (window.myNamespace= window.myNamespace|| {}, jQuery)));

Очевидно, с помощью приведенного выше кода я могу использовать то же пространство имен (как в разделе страницы / сайта) и вызывать их через myNamespace.className.init() и т. Д. Я также могу комбинировать их, если хочу, но я инкапсулирую классы для удобства чтения .

Теперь я читал http://addyosmani.com/largescalejavascript/ о концепции посредников. Мой вторичный вопрос: когда (и если) я должен использовать это? Из className2, очевидно, я могу сделать: 

 myNamespace.className2 = {
               init:function { myNamespace.className.init() } // do stuff
            }

Так почему же это когда-либо подписывается на className, например mediator.subscribe("classNameInit"), и публикует это событие в className?

Я очень открыт для предложений относительно структуры моего кода, так как это то, что мне нужно понять, пока я меняю способ написания своего JavaScript.

1 Ответ

8 голосов
/ 01 марта 2012

Вы бы использовали его, когда у вас есть несколько частей, которые будут работать вместе в неограниченных комбинациях, когда вы не знаете всех комбинаций заранее или когда более эффективно принимать все комбинации.

Допустим, вы былисоздавая приложение для социальных сетей, вы написали класс для инкапсуляции списка пользователей.На некоторых экранах при нажатии на пользователя в списке открывается его профиль, на другом экране, возможно, при щелчке пользователя выполняется поиск каждого оставленного комментария, а на третьем экране происходит что-то еще.

Если вы должны были написать это не с использованием mediator / pubsub, в результате вы получите кучу операторов if в событии onclick ... 

UserList.prototype.onUserClick = function(user) {
     // Check if we're supposed to open a popup
     if (this.mode === 'profile')

     // Check for something else
     else if (this.mode === 'something else')

     // Check for another case
     else if (this.mode === 'foo')
}

Посредник - это решение этой проблемы, потому чтоне требует, чтобы UserList знал каждую ситуацию, в которой он может оказаться. Вместо этого приведенный выше код в UserList может быть просто уточнен для трансляции, когда пользователь нажимает на ... 

UserList.prototype.onUserClick = function(user) {
    this.publish('user-click', user);
}

Затемкаждый из ваших других экранов или элементов пользовательского интерфейса может просто прослушивать сообщение о щелчке пользователя ... 

// On pages where there needs to be a popup profile
Mediator.onMessage('user-click', function(data) {
    showProfilePopup(data);
});

// Or perhaps on a search page
SearchBox.onMessage('user-click', function(data) {
    this.searchByUser(data);
});

Кроме того, посредник начинает сиять, потому что эти другие компоненты пользовательского интерфейса, такие как SearchBox, не заинтересованыв частности, когда UserList запускает щелчок пользователя, их интересует только когда публикуется щелчок пользователя, другие элементы управления пользовательским интерфейсом на странице cщелчок огня пользователем, и эти части могут реагировать на него.

Что касается примечания, className = { } не создает класс.То, что вы, вероятно, хотите, это className = function() { }.

...