推荐使用或不使用Subject

Question

我在我的代码中使用了 Subject，我想知道是否推荐这样做。

首先，我使用的主题是，当切换按钮被按下时，其他按钮将被设置为非活动状态。

按下 edit 后：

主题定义和订阅者实现代码：

  let oButtonSubject = new Rx.Subject();
  this._subscribeButtonState(oButtonSubject);

_subscribeButtonState: function (oButtonSubject) {
      let self = this;
      return oButtonSubject
        .subscribe(function (oBtnState) {
          let oModel = self.getModel("vmButtonsState");
          oModel.setProperty("/edit", oBtnState.bEdit);
          oModel.setProperty("/mass", oBtnState.bMass);
          oModel.setProperty("/save", oBtnState.bSave);
          oModel.setProperty("/cancel", oBtnState.bCancel);
        });
    },

上面的代码将设置按钮的状态。

每次按下 edit 时，都会调用 next 方法并将数据推送到 oButtonSubject。

_subscribeEditPressOb: function (oEditPressed, oButtonSubject) {
      let self = this;
      return oEditPressed
        .map(function (oSource) {
          return oSource;
        })
        .subscribe(function (oSource) {

            // Determine select state for the calendar.
            // The calendar is only allowed to select, if
            // EDIT button is clicked.
            if (oSource.getId().indexOf("cal-edit") >= 0 && oSource.getPressed()) {
              oButtonSubject.next({bEdit: true, bMass: false, bSave: false, bCancel: false});
            } else {
              oButtonSubject.next({bEdit: true, bMass: true, bSave: true, bCancel: true});
            }
          },
          function (err) {
            jQuery.sap.log.fatal(err);
          });
    },

上面的代码在将数据推送到主题后，在按下 edit 按钮时订阅了它。

subject 的使用方法正确吗？

Answer 1

A Subject 意味着从非反应世界进入 Rx 世界的入口。在您的情况下，您正在使用 Subject 来 根据编辑按钮上的 单击事件 发出事件 。

我建议您不要为此特定实施使用主题，而是通过使用 fromEvent

将您的点击直接用作流

下面是一个例子（忽略粗糙的边缘；它在DOM中保持状态）（jsbin）

const editButton = document.getElementById('enable-edit-mode')
const saveChangesButton = document.getElementById('save-changes');
const cancelChangesButton = document.getElementById('cancel-save-changes');

const enableEditModeStream = Rx.Observable.fromEvent(editButton, 'click')
.do(() => {
  editButton.setAttribute('disabled','disabled')
  saveChangesButton.removeAttribute('disabled');
  cancelChangesButton.removeAttribute('disabled');
});

const saveChangesStream = Rx.Observable.fromEvent(saveChangesButton, 'click')
  .do(() => {
    console.log('saving changes')
  });
const cancelChangesStream = Rx.Observable.fromEvent(cancelChangesButton, 'click');

const saveCancelEditModeStream = Rx.Observable.merge(
  saveChangesStream,
  cancelChangesStream
)
.do(() => {
  editButton.removeAttribute('disabled');
  saveChangesButton.setAttribute('disabled','disabled')
  cancelChangesButton.setAttribute('disabled','disabled')
});


Rx.Observable.merge(
  enableEditModeStream,
  saveCancelEditModeStream
)
.subscribe();

推荐使用或不使用Subject

Recommended to use Subject or not

javascript

reactive-programming

rxjs

rxjs5