javascript - JavaScript 中的简单 Observable 2 路数据绑定(bind)

Question

我知道很多大牌 MVC、M** 风格的 JavaScript 框架都允许与 Observables 进行 2 路绑定(bind)。

意思是如果我:

• 更新 DOM 输入字段，它还会更新 JavaScript 对象变量，该变量也可以通过 AJAX 请求保存到服务器。
• 如果我更新 JavaScript 对象变量，它也会依次更新 DOM 文本字段。

当我学习 JavaScript 时，我很想跳过那些大名鼎鼎的库，并学习如何以最基本的原始 JavaSript 形式来实现这一点。

任何人都可以在不使用 BackboneJS、Knockout、Angular 或其他库的情况下提供此功能的快速且易于理解的演示吗？

jQuery 是可以接受的。

我很感激这次类(class)并请提供帮助。

Answer 1

这在每个框架中都是不同的。

例如，Angular 将每个变量保存在作用域中。遍历范围变量并将值与之前的值进行比较，如果有更改，则会将其执行到 DOM。

此检查是在调用摘要周期时进行的。如果一个周期完成，它会再次调用，直到“观察到”的每个变量都与前一个周期中的相同。您还可以向此“观察者”添加对象或变量。

Angular 保持 View 最新，每次有东西可能改变“观察到的”变量时调用此摘要，例如 http 调用、用户交互......但是例如，如果您从 Angular(控制台)外部更改变量，那么变量的改变没有对 DOM 进行。您必须手动调用摘要周期才能执行此操作。

在 HTML5 中，使用 Object.observe 会更容易一些，但目前市场上的所有浏览器尚不支持它。

希望能帮上忙