JavaScript 中的简单 Observable 2-way 数据绑定

Question

我知道很多大牌的 MVC，M** 风格的 JavaScript 框架允许与 Observables 进行双向绑定。

如果我的意思：

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

在学习 JavaScript 时，我很想跳过大牌库，而是学习如何以最基本的原始 JavaSript 形式执行此操作。

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

jQuery 是可以接受的。

我将不胜感激，请提供帮助。

Answer 1

这在每个框架中都不同。

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

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

Angular 使视图保持最新状态，每次可能会更改“观察到的”变量时调用此摘要，例如 http 调用、用户交互……但例如，如果您从 angular（控制台）更改外部变量，则不会对 DOM 进行变量更改。您必须手动调用摘要循环才能执行此操作。

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

希望我能帮上忙