所以，一位同事向我介绍了发布/订阅模式(在 JS/jQuery 中)，但我很难理解为什么人们会在“普通”JavaScript/jQuery 上使用这种模式。

例如，以前我有以下代码...

$container.on('click', '.remove_order', function(event) {
    event.preventDefault();
    var orders = $(this).parents('form:first').find('div.order');
    if (orders.length > 2) {
        orders.last().remove();
    }
});

removeOrder = function(orders) {
    if (orders.length > 2) {
        orders.last().remove();
    }
}

$container.on('click', '.remove_order', function(event) {
    event.preventDefault();
    removeOrder($(this).parents('form:first').find('div.order'));
});

removeOrder = function(e, orders) {
    if (orders.length > 2) {
        orders.last().remove();
    }
}

$.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'));
});

最佳答案

这完全是关于松散耦合和单一职责，这与过去几年非常现代的 JavaScript 中的 MV*(MVC/MVP/MVVM)模式密切相关。

Loose coupling是一个面向对象的原则，其中系统的每个组件都知道自己的职责并且不关心其他组件(或者至少尽量不关心它们)。松耦合是一件好事，因为您可以轻松地重用不同的模块。您没有与其他模块的接口(interface)耦合。使用发布/订阅，您只需要与发布/订阅接口(interface)相结合，这没什么大不了的——只有两种方法。所以如果你决定在不同的项目中重用一个模块，你只需复制和粘贴它，它可能会起作用，或者至少你不需要太多努力让它起作用。

在谈论松散耦合时，我们应该提到 separation of concerns .如果您正在使用 MV* 架构模式构建应用程序，您总是有一个模型和一个 View 。模型是应用程序的业务部分。您可以在不同的应用程序中重用它，因此将它与单个应用程序的 View 结合起来并不是一个好主意，您希望在其中显示它，因为通常在不同的应用程序中您有不同的 View 。因此，使用发布/订阅进行模型- View 通信是一个好主意。当您的模型更改它发布一个事件时， View 会捕获它并更新自身。你没有任何来自发布/订阅的开销，它可以帮助你解耦。以同样的方式，您可以将应用程序逻辑保留在 Controller 中(例如 MVVM、MVP，它不完全是 Controller )并尽可能保持 View 简单。当你的 View 改变(或者用户点击某些东西，例如)它只是发布一个新事件，Controller 捕获它并决定做什么。如果您熟悉 MVC模式或与 MVVM在 Microsoft 技术 (WPF/Silverlight) 中，您可以将发布/订阅视为 Observer pattern .这种方法用于 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);
      }
   }
}());

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);
           });
       }
   };
}());

关于javascript - 为什么要使用发布/订阅模式(在 JS/jQuery 中)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13512949/