Native Observables，RxRxnd 尚不存在的 observable-js教程-PHP中文网

Native Observables, RxRxnd the observable that doesn

现在正在发生很多有趣的事情。

RxJS 7 很强大，RxJS 8 处于 alpha 阶段，它似乎可用，今天在 Chrome 中可用的新 Native Observables 也是如此！

我们可以一起使用它们吗？
简短的回答，有点不。从技术上讲，它们都是 Observables，所以应该说相同的语言，对吗？只是 .subscribe、.next、.error、.complete 和瞧...

嗯，差不多了。除了 RxJS 做了一些额外的努力来确保它处理真正的 Obsevables 而不是“廉价导入”？.
因此，它会认真检查 Symbol.observable 或 @@observable 是否存在，因此您可以通过执行 Observable.prototype['@@observable'] = function(){ return this } 从技术上将它们修补到 DOM Observable 中，但是...即使你成功了并且你设法通过 document.when('click').subscribe(new subject()) 将两者插入在一起，它也会再次失败，因为 RxJS 流引用了它们自己的 this，在内部，它现在将指向其他地方......所以它崩溃了。

运气不好，我们需要一个自定义的桥来订阅 Native Observable 并将数据转发到 RxJS land。

太好了，假设我们这样做了，当然，它会起作用。如果你有这个包装愚蠢的功能，你会突然能够做类似以下的事情：

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

登录后复制

无论如何，虽然以上内容已经可以算是某种新闻，但这根本不是真正有趣的部分！

有趣的部分

当我们谈论在现实世界、实际应用程序中使用 Observables 时，有趣的部分就出现了，这些应用程序通常位于 Web 框架或较小的 UI 库中。

考虑在 JavaScript“组件”内使用 Observables 的点击计数器按钮的情况。

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

登录后复制

现在，对于 Native DOM Observables，我们遇到了一些有趣的问题。主体不存在，BehaviorSubject 也不存在。
除此之外，它甚至没有 .pipe() 方法来传递运算符。
最后，它的原生运算符都是 Observable 类的方法，而不是函数。

所以，最大的问题是：如何调用尚不存在的对象的方法？

（此时你可能迷路了...我知道，请稍等）

创建 Observables 的新方法类似于 element.when(eventName)。这是对 DOM 的本机调用。
然而，我们现在处于模板中，处于 JavaScript 组件中。尚未将任何 HTML 添加到 DOM，因此不可能调用 .when()。

我们要调用 .map().inspect().filter() ！

疏忽？直到几年前，RxJS 还使用相同的界面（Bacon 和 Zen Observables 等其他人仍然这样做），但为了帮助进行 tree-shaking，他们将所有 运算符方法 拆分为 运算符函数，所以现在您可以只导入您需要的内容，从而使您的应用程序变得更轻。太棒了！

天文台

那么，回到我们的新情况，我们如何从组件内部解决这个问题？
当然，嗯，这很容易！我们要么在 WICG 提案中获得Subject和BehaviorSubject（剧透：目前我们还没有），要么......我们发挥创造力，破解系统并构想类似代理的东西，帮助我们假装 Native DOM Observable 是存在的，即使它不存在，所以我们可以调用它的原生操作符方法。？

我称它为……观测台。

可观察的未来=观察。 Observaturus 是拉丁语，意思是“会观察的人”，所以如果我们将其强行翻译成英语，听起来应该是这样的。

很好，那么代码会是什么样子呢？

const clickCount = rx(
  wrap(document.when('click')),
  scan(x=>x+1, 0),
);

clickCount.subscribe(doSomething);

登录后复制

耶，看看那个！我们这里有一些东西： new Observature(0).scan(x=>x 1).
让我解释一下。
从技术上讲，这就像创建一个新的BehaviorSubject(0).scan(x=>x 1)，除了一件事：不再有BehaviorSubject了。？
观察站只是一个代理。它公开了来自 Observable 和 Observer 的方法，以便以后订阅和绑定！
如果你调用 .scan(fn)，它只会记住在时机到来时对它将订阅的实际 Observable 调用 .scan。

那么，观测带来了哪些有趣的东西？
首先，它们不是实际的主题，因此当您运行上面的代码时，您提供的运算符函数将在堆栈中的第 1/2 层运行。从点击到接收，它可能比您以前见过的任何东西都更轻、更快。不，还没有运行基准测试，我并不担心，目前重要的是概念。

啊，另一个小便条。现在规范中也没有 Observable.scan()，所以我们现在能做的一件事就是进行猴子补丁，但同样，这些只是微小的实现细节。我们有原生的 Observables，这很重要！

要保持 100% 原生，对于其他用例，您可以只使用 .map() 和 .filter()，但根据我的经验，如果没有 scan()，您也无法过上正常的生活。

接收JS 8

好吧，所以...上面使用的是原生内容，没有 RxJS。
如果使用 RxJS8，这一切会是什么样子？
我的回答是我不知道，问@benlesh，他是你的人:)

当前的障碍是相同的：RxJS 无法识别原生 Observable，因此还有一些工作要做。它可能看起来像这样：

import { Subject, scan } from 'rxjs';
import { rml } from 'rimmel';

const Component = () => {
  const counter = new BehaviorSubject(0).pipe(
    scan(x=>x+1)
  );

  return rml`
    <button onclick="${counter}">hit me</button>
    Count: <span>${counter}</span>
  `;
}

登录后复制

你有什么想法？你会用这样的东西吗？

现在，您可以在 Stackblitz 上使用 DOM Observables、Observatures

留言留下你的想法。

以上是Native Observables，RxRxnd 尚不存在的 observable的详细内容。更多信息请关注PHP中文网其他相关文章！