具有多个订阅的 Knockout 单个可观察对象

Knockout single observable with multiple subscriptions

我继承了一个使用 Knockout 为 UI 编写的应用程序,我很好奇对单个可观察对象进行多个订阅的效果如何 属性?

我有一个有 2 个订阅的可观察对象。通过登录到控制台,我可以看到两个订阅都被触发了,一个接一个。

使用以下示例:(为简洁起见,完整代码中的代码非常精简,其中有很多逻辑,其中一些是重复的)

self.VisitDate = ko.observable();

self.VisitDate.subscribe(function (newValue) {
    self.ListItemRemoved(removed);
});   

self.VisitDate.subscribe(function (newValue) {
    self.Basket.VisitDate(newValue);
});

我在想我应该看到某种错误,因为有多个订阅,但一切似乎都工作正常,但我找不到任何明确的解释来解释为什么可以这样做?

我只是想找出以下内容:

对单个可观察对象进行多次订阅是否正常且可以接受? 这样做是否有任何潜在的影响,即竞争条件? 是否真的需要多个订阅才能实现单个订阅无法实现的目标?

我很欣赏这在细节上可能有点害羞,但我真的只是想了解 knockout 是如何在幕后做事的,看看我是否应该考虑重构这段代码。

observer/observable design pattern 确实允许多个 observers/subscriptions。简而言之,设计模式的目的是:

  1. De-couple 更改效果的更改。
  2. 允许更改产生任何任意效果。

因此,Knockout 通过它的可观察对象来做到这一点。

var observable = ko.observable("a");

observable.subscribe(function(newValue) {
  console.log("observer 1", newValue)
});

observable.subscribe(function(newValue) {
  console.log("observer 2", newValue)
});

observable.subscribe(function(newValue) {
  console.log("observer 3", newValue)
});

observable("b");
observable("c");
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

没有真正需要担心的竞争条件,因为 your code will be run in a single thread, so it's pretty much guaranteed to be deterministic, unless you explicitly opt-into some sort of multi-threadedness

观察者通常也不会固有地调用多个线程,因为订阅者更新功能通常会采用类似以下的形式:

for (subscriber of this.subscribers) {
  subscriber.update(this.value);
}

话虽如此,您 可能 运行 会遇到问题,但前提是订阅者依赖于共享状态并且您无法保证或知道每个订阅的添加顺序。在这种情况下,您可以根据订阅的顺序获得不同的结果。简单演示:

var observable = ko.observable("a");

var sharedState = "";

observable.subscribe(function(newValue) {
  //append to the shared state
  sharedState += newValue;
  console.log("observer 1", sharedState);
});

observable.subscribe(function(newValue) {
  //double up the shared state
  sharedState += sharedState;
  console.log("observer 2", sharedState);
});

observable("b");
observable("c");
observable("d");
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

var observable = ko.observable("a");

var sharedState = "";


observable.subscribe(function(newValue) {
  //double up the shared state
  sharedState += sharedState;
  console.log("observer 2", sharedState);
});

observable.subscribe(function(newValue) {
  //append to the shared state
  sharedState += newValue;
  console.log("observer 1", sharedState);
});

observable("b");
observable("c");
observable("d");
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

所以,这将是一种不好的做法。如果可能的话最好避免。除非你能保证订阅的顺序——在上面的例子中,我一个接一个地添加订阅,以保证它们按照添加的顺序出现。但是您可能有代码有条件地或在应用程序的不同部分添加订阅,在这种情况下很难控制该顺序。