Как избавиться от дублирования кода при слушании подобных потоков?

423

08 декабря 2017, 06:07

Я сделал приблизительную модель шаблона одностраничного приложения на RX. Навигация состоит из кнопок двух видов. Первый вид выводит алерт с значением, второй вид выводит алерт с фразой 'start':

document.addEventListener("DOMContentLoaded", ready);
function ready() {
    var source = Rx.Observable.fromEvent(document, 'click');
    var subscription = source
                                        .map(e => e.target)
                                        .filter(t => t.className === 'li')
                                        .subscribe(function (t) {
                                            alert(t.innerHTML); 
                                        });
    var subscription2 = source
                                        .map(e => e.target)
                                        .filter(t => t.className === 'start')
                                        .subscribe(function (t) {
                                            alert('start'); 
                                        });                                     
};

Проблема в том, что я дублирую код для такой простой задачи. Как записать прослушивание потока правильнее?

jsfiddle

Answer 1

Сложно сказать, как "правильнее". Можно, к примеру, объединить эти подписки и проверку в самом subscribe сделать:

var source = Rx.Observable.fromEvent(document, 'click');
var subscription = source
  .map(e => e.target)
  .filter(t => t.className === 'start' || t.className === 'li')
  .subscribe(function(t) {
    switch (t.className) {
      case 'start':
        alert('start');
        break;
      case 'li':
        alert(t.innerHTML);
        break;
    }
  });

Ну, или, как минимум, мапить один раз хотя бы:

var source = Rx.Observable.fromEvent(document, 'click');
var maped = source
  .map(e => e.target);
var subscription = maped
  .filter(t => t.className === 'li')
  .subscribe(function(t) {
    alert(t.innerHTML);
  });
var subscription = maped
  .filter(t => t.className === 'start')
  .subscribe(function(t) {
    alert('start');
  });