[javascript] 발행 / 구독 패턴 (JS / jQuery에서)을 사용하는 이유는 무엇입니까?

지난 몇 년 동안 매우 현대적인 JavaScript의 MV * (MVC / MVP / MVVM) 패턴과 함께 사용되는 느슨한 결합과 단일 책임에 관한 것입니다.

느슨한 결합 은 시스템의 각 구성 요소가 자신의 책임을 알고 다른 구성 요소에 대해서는 신경 쓰지 않는 객체 지향 원칙입니다 (또는 최소한 가능한 한 신경 쓰지 않으려 고합니다). 느슨한 결합은 다른 모듈을 쉽게 재사용 할 수 있기 때문에 좋은 것입니다. 다른 모듈의 인터페이스와 연결되지 않습니다. 발행 / 구독을 사용하면 큰 문제가 아닌 발행 / 구독 인터페이스와 결합됩니다. 두 가지 방법 만 있습니다. 따라서 다른 프로젝트에서 모듈을 재사용하기로 결정한 경우 복사하여 붙여 넣기 만하면 작동 할 수 있거나 적어도 작동하도록 만드는 데 많은 노력이 필요하지 않습니다.

느슨한 결합에 대해 이야기 할 때 우려 의 분리를 언급해야합니다.. MV * 아키텍처 패턴을 사용하여 애플리케이션을 빌드하는 경우 항상 모델과 뷰가 있습니다. 모델은 애플리케이션의 비즈니스 부분입니다. 다른 응용 프로그램에서 재사용 할 수 있으므로 일반적으로 다른 응용 프로그램에서 다른보기를 갖기 때문에 표시하려는 단일 응용 프로그램의보기와 결합하는 것은 좋지 않습니다. 따라서 Model-View 통신을 위해 게시 / 구독을 사용하는 것이 좋습니다. 모델이 변경되면 이벤트를 게시하고 뷰는 이벤트를 포착하고 자체적으로 업데이트합니다. 게시 / 구독으로 인한 오버 헤드가 없으므로 디커플링에 도움이됩니다. 같은 방식으로 컨트롤러에 애플리케이션 로직을 유지하고 (MVVM, MVP는 정확히 컨트롤러가 아님) 가능한 한 간단하게보기를 유지할 수 있습니다. 뷰가 변경되면 (예를 들어 사용자가 무언가를 클릭) 새 이벤트를 게시하고 컨트롤러가이를 포착하여 수행 할 작업을 결정합니다. 당신이 익숙한 경우MVC 패턴 또는 Microsoft 기술 (WPF / Silverlight)의 MVVM 을 사용하면 게시 / 구독을 Observer 패턴 과 같이 생각할 수 있습니다 . 이 접근 방식은 Backbone.js, Knockout.js (MVVM)와 같은 프레임 워크에서 사용됩니다.

다음은 예입니다.

//Model
function Book(name, isbn) {
    this.name = name;
    this.isbn = isbn;
}

function BookCollection(books) {
    this.books = books;
}

BookCollection.prototype.addBook = function (book) {
    this.books.push(book);
    $.publish('book-added', book);
    return book;
}

BookCollection.prototype.removeBook = function (book) {
   var removed;
   if (typeof book === 'number') {
       removed = this.books.splice(book, 1);
   }
   for (var i = 0; i < this.books.length; i += 1) {
      if (this.books[i] === book) {
          removed = this.books.splice(i, 1);
      }
   }
   $.publish('book-removed', removed);
   return removed;
}

//View
var BookListView = (function () {

   function removeBook(book) {
      $('#' + book.isbn).remove();
   }

   function addBook(book) {
      $('#bookList').append('<div id="' + book.isbn + '">' + book.name + '</div>');
   }

   return {
      init: function () {
         $.subscribe('book-removed', removeBook);
         $.subscribe('book-aded', addBook);
      }
   }
}());

다른 예시. MV * 접근 방식이 마음에 들지 않으면 약간 다른 것을 사용할 수 있습니다 (다음에 설명 할 것과 마지막에 언급 한 것 사이에 교차점이 있습니다). 애플리케이션을 다른 모듈로 구성하기 만하면됩니다. 예를 들어 Twitter를보십시오.

인터페이스를 보면 단순히 다른 상자가 있습니다. 각 상자를 다른 모듈로 생각할 수 있습니다. 예를 들어 트윗을 게시 할 수 있습니다. 이 작업을 수행하려면 몇 가지 모듈을 업데이트해야합니다. 먼저 프로필 데이터 (왼쪽 상단 상자)를 업데이트해야하지만 타임 라인도 업데이트해야합니다. 물론 두 모듈에 대한 참조를 유지하고 공개 인터페이스를 사용하여 개별적으로 업데이트 할 수 있지만 이벤트를 게시하는 것이 더 쉽고 (더 좋습니다). 이렇게하면 결합이 느슨해져 애플리케이션을 더 쉽게 수정할 수 있습니다. 새 트윗에 의존하는 새 모듈을 개발하는 경우 “publish-tweet”이벤트를 구독하고 처리 할 수 ​​있습니다. 이 접근 방식은 매우 유용하며 애플리케이션을 매우 분리 할 수 ​​있습니다. 모듈을 매우 쉽게 재사용 할 수 있습니다.

다음은 마지막 접근 방식의 기본 예입니다 (이는 원본 트위터 코드가 아니라 제가 작성한 샘플 일뿐입니다).

var Twitter.Timeline = (function () {
   var tweets = [];
   function publishTweet(tweet) {
      tweets.push(tweet);
      //publishing the tweet
   };
   return {
      init: function () {
         $.subscribe('tweet-posted', function (data) {
             publishTweet(data);
         });
      }
   };
}());


var Twitter.TweetPoster = (function () {
   return {
       init: function () {
           $('#postTweet').bind('click', function () {
               var tweet = $('#tweetInput').val();
               $.publish('tweet-posted', tweet);
           });
       }
   };
}());

이 접근 방식에 대해 Nicholas Zakas 의 훌륭한 강연이 있습니다. MV * 접근 방식의 경우 내가 아는 최고의 기사와 책은 Addy Osmani 가 출판했습니다 .

단점 : 발행 / 구독의 과도한 사용에주의해야합니다. 수백 개의 이벤트가있는 경우 모든 이벤트를 관리하는 것이 매우 혼란 스러울 수 있습니다. 네임 스페이스를 사용하지 않거나 올바른 방식으로 사용하지 않는 경우에도 충돌이 발생할 수 있습니다. 게시 / 구독과 매우 유사한 Mediator의 고급 구현은 여기 https://github.com/ajacksified/Mediator.js 에서 찾을 수 있습니다 . 물론 중단 될 수있는 이벤트 “버블 링”과 같은 네임 스페이스 및 기능이 있습니다. 게시 / 구독의 또 다른 단점은 하드 단위 테스트입니다. 모듈에서 다른 기능을 분리하고 독립적으로 테스트하기가 어려울 수 있습니다.

답변

class Relay {
    function RelaySignal(signal) {
        //do something we don't care about right now
    }
}

class Radio {
    function ReceiveSignal(signal) {
        //how do I send this signal to other relays?
    }
}

class Radio {
    var relayList = [];

    function AddRelay(relay) {
        relayList.add(relay);
    }

    function ReceiveSignal(signal) {
        for(relay in relayList) {
            relay.Relay(signal);
        }
    }

}

class Speakers {
    function PlaySignal(signal) {
        //do something with the signal to create sounds
    }
}

class Radio {
    var relayList = [];
    var speakerList = [];

    function AddRelay(relay) {
        relayList.add(relay);
    }

    function AddSpeaker(speaker) {
        speakerList.add(speaker)
    }

    function ReceiveSignal(signal) {

        for(relay in relayList) {
            relay.Relay(signal);
        }

        for(speaker in speakerList) {
            speaker.PlaySignal(signal);
        }

    }

}

class RadioMast {

    var receivers = [];

    //this is the "subscribe"
    function RegisterReceivers(signaltype, receiverMethod) {
        //if no list for this type of signal exits, create it
        if(receivers[signaltype] == null) {
            receivers[signaltype] = [];
        }
        //add a subscriber to this signal type
        receivers[signaltype].add(receiverMethod);
    }

    //this is the "publish"
    function Broadcast(signaltype, signal) {
        //loop through all receivers for this type of signal
        //and call them with the signal
        for(receiverMethod in receivers[signaltype]) {
            receiverMethod(signal);
        }
    }
}

class Radio {
    function ReceiveSignal(signal) {
        RadioMast.Broadcast("specialradiosignal", signal);
    }
}

RadioMast.RegisterReceivers("specialradiosignal", speakers.PlaySignal);
RadioMast.RegisterReceivers("specialradiosignal", relay.RelaySignal);

$.subscribe('iquery/action/remove-order', removeOrder);

$container.on('click', '.remove_order', function(event) {
    event.preventDefault();
    $.publish('iquery/action/remove-order', $(this).parents('form:first').find('div.order'));
});

$.subscribe('iquery/action/remove-order-requested', handleRemoveOrderRequest);

$container.on('click', '.remove_order', function(event) {
    event.preventDefault();
    $.publish('iquery/action/remove-order-requested', $(this).parents('form:first').find('div.order'));
});

handleRemoveOrderRequest = function(e, orders) {
    logAction(e, "remove order requested");
    if( !isUserLoggedIn()) {
        adviseUser("You need to be logged in to remove orders");
    } else if (isOkToRemoveOrders(orders)) {
        orders.last().remove();
        adviseUser("Your last order has been removed");
        logAction(e, "order removed OK");
    } else {
        adviseUser("Your order was not removed");
        logAction(e, "order not removed");
    }
    remindUserToFloss();
    increaseProgrammerBrowniePoints();
    //etc...
}

var person = {
    name: "John",
    age: 23,

    setAge: function( age ) {
        this.age = age;
        showAge( age );
    }
};

//Different module

function showAge( age ) {
    $("#age").text( age );
}

var pubSub = {};
(function(q) {

  var messages = [];

  q.subscribe = function(message, fn) {
    if (!messages[message]) {
      messages[message] = [];
    }
    messages[message].push(fn);
  }

  q.publish = function(message) {
    /* fetch all the subscribers and execute*/
    if (!messages[message]) {
      return false;
    } else {
      for (var message in messages) {
        for (var idx = 0; idx < messages[message].length; idx++) {
          if (messages[message][idx])
            messages[message][idx]();
        }
      }
    }
  }
})(pubSub);

pubSub.subscribe("event-A", function() {
  console.log('this is A');
});

pubSub.subscribe("event-A", function() {
  console.log('booyeah A');
});

pubSub.publish("event-A"); //executes the methods.