javascript - 为什么要使用发布/订阅模式(在 JS/jQuery 中)？

Question

所以，一位同事向我介绍了发布/订阅模式(在 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 的能力。不同事件的功能等。

但是，如果它做同样的事情，你为什么要决定实现发布/订阅模式并转到以下长度？ (仅供引用，我使用了 jQuery tiny pub/sub )

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

我肯定已经阅读过有关该模式的内容，但我无法想象为什么这会是必要的。我所看到的解释如何实现这种模式的教程只涵盖了与我自己的示例一样的基本示例。

我想 pub/sub 的用处会在更复杂的应用程序中体现出来，但我无法想象。恐怕我完全没有捕获重点；但我想知道这一点，如果有的话!

你能解释一下 简洁为什么以及在什么情况下这种模式是有利的？对于像我上面的例子那样的代码片段使用 pub/sub 模式是否值得？

Answer 1

这完全是关于松散耦合和单一职责，这与过去几年非常现代的 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);
      }
   }
}());

另一个例子。如果您不喜欢 MV* 方法，您可以使用一些不同的方法(我接下来要描述的方法和最后提到的方法之间存在交集)。只需在不同的模块中构建您的应用程序。例如看看推特。



如果您查看界面，您只会看到不同的框。您可以将每个框视为不同的模块。例如，您可以发布一条推文。此操作需要更新几个模块。首先它必须更新您的个人资料数据(左上框)，但它也必须更新您的时间线。当然，您可以保留对两个模块的引用，并使用它们的公共(public)接口(interface)分别更新它们，但发布事件更容易(也更好)。由于松散耦合，这将使您的应用程序的修改更容易。如果您开发依赖于新推文的新模块，您只需订阅“publish-tweet”事件并处理它。这种方法非常有用，可以使您的应用程序非常解耦。您可以非常轻松地重用您的模块。

这是最后一种方法的基本示例(这不是原始 twitter 代码，它只是我的一个示例):

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 .它具有命名空间和事件“冒泡”等功能，当然可以被中断。发布/订阅的另一个缺点是很难进行单元测试，可能很难隔离模块中的不同功能并独立测试它们。