Question

注意：我提到了RxJS，但任何反应库都可以（Bacon，Kefir，Most等）。我的上下文是AngularJS，但解决方案可能是独立的（或多或少）。

我的问题/任务：我们有一个AngularJS应用程序，我们希望有侧面板（和一个中央面板），每个侧面板可能有子面板，可以添加，删除等。

这些面板必须在它们之间进行通信：不仅是父子交换，还有任何面板（侧/子/中央......）的任何面板。

我觉得古典的Angular方式（事件总线：$ emit / $ broadcast / $ on）在这里相当不足。即使对于简单的父/子通信，我也有问题，当父母在启动时触发事件，但孩子还没有听。解决了$ timeout，但这很脆弱。除此之外，为了让两个孩子进行交流，他们发送给传输的父母，这是笨拙的。

我认为这个问题是在项目中引入反应性编程的机会（在很早的阶段，这里不会造成破坏），但如果我已经阅读了很多关于这个主题的内容，那么到目前为止我几乎没有经验。 / p>

因此我的问题是：有没有一种干净的方法来管理这个FRP？

我正在考虑设置一个服务（因此是一个单身人士），它会收听新的面板，广播可观察者，接受观察者等等。但我不太清楚如何做到这一点。

我没有重新发明轮子，而是想问这个问题是否已经解决，没有太多耦合，没有不灵活等等。

注意：如果一个好的解决方案不使用FRP，那也没关系！： - ）

感谢。

Answer 1

感谢@xgrommx和@ user3743222的评论以及优秀的RxJS书籍，我能够达到目标。

我的实验操场位于http://plnkr.co/edit/sGx4HH?p=preview

通信中心服务的正文（剥离）：

var service = {};

service.channels = {};

/**
 * Creates a new channel with given behavior (options) and returns it.
 * If the channel already exists, just returns it.
 */
service.createChannel = function(name, behavior)
{
  checkName(name);
  if (_.isObject(service.channels[name]))
    return service.channels[name];

  behavior = behavior || {};
  _.defaults(behavior, { persistent: false });

  if (behavior.persistent)
  {
    _.defaults(behavior, { bufferSize: null /* unlimited */, windowSize: 5000 /* 5 s */ });
    service.channels[name] = new Rx.ReplaySubject(behavior.bufferSize, behavior.windowSize);
  }
  else
  {
    service.channels[name] = new Rx.Subject();
  }
  return service.channels[name];
};

/**
 * Returns the channel at given name, undefined if not existing.
 */
service.getChannel = function(name)
{
  checkName(name);
  return service.channels[name];
};

/**
 * Destroys an existing channel.
 */
service.destroyChannel = function(name)
{
  checkName(name);
  if (!_.isObject(service.channels[name]))
    return;

  service.channels[name].dispose();
  service.channels[name] = undefined;
};

/**
 * Emits an event with a value.
 */
service.emit = function(name, value)
{
  checkName(name);
  if (!_.isObject(service.channels[name]))
    return;

  service.channels[name].onNext(value);
};


function checkName(name)
{
  if (!_.isString(name))
    throw Error('Name of channel must be a string.');
}

return service;

我按如下方式使用它：

angular.module('proofOfConceptApp', [ 'rx' ])
.run(function (CommunicationCenterService)
{
  CommunicationCenterService.createChannel('Center', { persistent: true });
  CommunicationCenterService.createChannel('Left');
  CommunicationCenterService.createChannel('Right');
})
.controller('CentralController', function ($scope, $http, rx, observeOnScope, CommunicationCenterService) 
{
  var vm = this;

  CommunicationCenterService.getChannel('Right')
    .safeApply($scope, function (color) 
    {
      vm.userInput = color;
    })
    .subscribe();

  observeOnScope($scope, function () { return vm.userInput; })
    .debounce(1000)
    .map(function(change)
    {
      return change.newValue || "";
    })
    .distinctUntilChanged() // Only if the value has changed
    .flatMapLatest(searchWikipedia)
    .safeApply($scope, function (result) 
    {
      // result: [0] = search term, [1] = found names, [2] = descriptions, [3] = links
      var grouped = _.zip(result.data[1], result.data[3]);
      vm.results = _.map(grouped, function(r)
      {
        return { title: r[0], url: r[1] };
      });
      CommunicationCenterService.emit('Center', vm.results.length);
    })
    .subscribe();

  function searchWikipedia(term) 
  {
    console.log('search ' + term);
    return rx.Observable.fromPromise($http(
      {
        url: "http://en.wikipedia.org/w/api.php?callback=JSON_CALLBACK",
        method: "jsonp",
        params: 
        {
          action: "opensearch",
          search: encodeURI(term),
          format: "json"
        }
      }));             
  }

  CommunicationCenterService.emit('Center', 42); // Emits immediately
})
.controller('SubController', function($scope, $http, rx, observeOnScope, CommunicationCenterService) 
{
  var vm = this;

  vm.itemNb = $scope.$parent.results;//.length;

  CommunicationCenterService.getChannel('Left')
    .safeApply($scope, function (toggle) 
    {
      vm.messageFromLeft = toggle ? 'Left is OK' : 'Left is KO';
    })
    .subscribe();

  CommunicationCenterService.getChannel('Center')
    .safeApply($scope, function (length) 
    {
      vm.itemNb = length;
    })
    .subscribe();
})
.controller('LeftController', function($scope, $http, rx, observeOnScope, CommunicationCenterService) 
{
  var vm = this;

  vm.toggle = true;

  vm.toggleValue = function ()
  {
    CommunicationCenterService.emit('Left', vm.toggle);
  };

  observeOnScope($scope, function () { return vm.toggle; })
    .safeApply($scope, function (toggleChange) 
    {
      vm.valueToDisplay = toggleChange.newValue ? 'On' : 'Off';
    })
    .subscribe();

  CommunicationCenterService.getChannel('Center')
    .safeApply($scope, function (length) 
    {
      vm.messageFromCenter = 'Search gave ' + length + ' results';
    })
    .subscribe();
})
.controller('RightController', function($scope, $http, rx, observeOnScope, CommunicationCenterService) 
{
  var vm = this;

  var display = { red: 'Pink', green: 'Aquamarine', blue: 'Sky' };

  vm.color = { value: "blue" }; // Initial value

  observeOnScope($scope, function () { return vm.color.value; })
    .tap(function(x) 
    { 
      CommunicationCenterService.emit('Right', vm.color.value);
    })
    .safeApply($scope, function (colorChange) 
    {
      vm.valueToDisplay = display[colorChange.newValue];
    })
    .subscribe();

  CommunicationCenterService.getChannel('Left')
    .safeApply($scope, function (toggle) 
    {
      vm.messageFromLeft = toggle ? 'Left is on' : 'Left is off';
    })
    .subscribe();
})
;

我必须预先创建频道（在.run中），否则会收听未创建的频道崩溃。不确定我是否会解除限制......

这只是草稿，可能很脆弱，但到目前为止达到了我的预期。

我希望它对某些人有用。

[编辑]我更新了我的插件。

在Take 2中：http://plnkr.co/edit/0yZ86a我清理了API并制作了隐藏频道服务的中间服务。频道是预先创建的。我更容易清理订阅。

在Take 3中：http://plnkr.co/edit/UqdyB2我向频道添加主题（受到Postal.js的启发），允许更精细的沟通和更少的主题。

我可以使用RxJS进行面板间通信吗？

1 个答案: