对 DOM Source 的细粒度控制

在我们目前的实现中，DOM Source 是固定的，只是一个来自于 document 对象的点击事件流：

function main(sources) {
  const click$ = sources.DOM;
  return {
    DOM: click$
      .startWith(null)
      .flatMapLatest(() =>
        Rx.Observable.timer(0, 1000)
          .map(i => ({
            tagName: 'H1',
            children: [{
              tagName: 'SPAN',
              children: [
                `Seconds elapsed ${i}`
              ]
            }]
          }))
      ),
    Log: Rx.Observable.timer(0, 2000)
      .map(i => 2 * i)
  };
}

如果我们的 DOM Source 提供的是一个灵活的、自由的、沟通 DOM 的接口，应该会更好一些：

function main(sources) {
  const hover$ = sources.DOM.selectEvents('span', 'mouseover');
  return {
    DOM: hover$
      .startWith(null)
      .flatMapLatest(() =>
        Rx.Observable.timer(0, 1000)
          .map(i => ({
            tagName: 'H1',
            children: [{
              tagName: 'SPAN',
              children: [
                `Seconds elapsed ${i}`
              ]
            }]
          }))
      ),
    Log: Rx.Observable.timer(0, 2000)
      .map(i => 2 * i)
  };
}

我们为 DOM driver 返回的 DOM Source 添加 selectEvents 方法：

function DOMDriver(sink) {
    // ....
    const DOMSource = {
        selectEvents: function (tagName, eventType) {
            return Rx.Observable.fromEvent(document, eventType)
                .filter(evt => evt.target.tagName === tagName.toUpperCase())
        }
    };
    return DOMSource;
}

查看示例