Главная

Pub-Sub JavaScript объект

2014-07-12 в 9:58, admin, рубрики: ajax, Events, javascript, web-разработка, асинхронное программирование, Веб-разработка, Программирование

Перевод статьи «Pub/Sub JavaScript Object», David Walsh

Есть три техники написания AJAX веб-сайтов: делегация событий, управление историей и коммуникация pub/sub на уровне приложения. Я использую все три техники и я хотел бы поделиться с вами самой простой из них: крошечным pub/sub модулем, который я использую на своем веб-сайте.

Если вы не знаете, что такое pub/sub, то суть в том, что вы публикуете в некую тему(topic), и кто угодно может на нее подписываться. Это похоже на то, как работает радио: радиостанция вещает (публикует) и каждый может слушать (подписываться). Это превосходный подход для модульных веб-приложений; это способ глобальной коммуникации без привязки к какому-то конкретному объекту.

JavaScript

Сам по себе модуль очень миниатюрный, но очень полезный:

var events = (function(){
  var topics = {};

  return {
    subscribe: function(topic, listener) {
      // создаем объект topic, если еще не создан
      if(!topics[topic]) topics[topic] = { queue: [] };

      // добавляем listener в очередь
      var index = topics[topic].queue.push(listener) -1;

	// предоставляем возможность удаления темы
	return {
		remove: function() {
			delete topics[topic].queue[index];
		}
	};
    },
    publish: function(topic, info) {
      // если темы не существует или нет подписчиков, не делаем ничего
      if(!topics[topic] || !topics[topic].queue.length) return;

      // проходим по очереди и вызываем подписки
      var items = topics[topic].queue;
      items.forEach(function(item) {
      		item(info || {});
      });
    }
  };
})();

Публикуем в тему:

events.publish('/page/load', {
	url: '/some/url/path' // любой аргумент
});

… подписываемся на тему, чтобы получать уведомления о событиях:

var subscription = events.subscribe('/page/load', function(obj) {
	// делаем что-нибудь, когда событие происходит
});

// ...теперь мне эта подписка больше не нужна...
subscription.remove();

Я скрупулезно использую pub/sub religiously на своем веб-сайте, и этот объект сделал мне кучу добра. У меня есть тема на загрузку страницы через AJAX и несколько подписок, которые вызываются при этом событии (перерисовка рекламы, комментариев, социальных иконок, и тд.). Проверьте, где в вашем приложении можно использовать pub/sub!

Автор: jojo97

Источник