JavaScript - 修改属性/数据绑定时执行代码答案

【问题标题】：JavaScript - Executing code when property modified / Data bindingJavaScript - 修改属性/数据绑定时执行代码
【发布时间】：2023-03-26 05:33:01
【问题描述】：

我正在尝试用 JavaScript 构建一个简单的绑定框架。我希望有一个具有getters 和setters 的模型，以保持一切一致，即更新一个属性会影响其他属性，然后 JavaScript 会将其绑定到页面中的字段。

我遇到的问题是我需要在绑定时为模型上的设置器add 一些额外的代码，以便更新属性执行已经在设置器中的代码以保持模型一致，然后更新绑定输入。

我考虑重命名现有属性并添加一个具有原始名称的新属性，它可以设置原始属性并更新输入，但我看不到重命名字段的方法。

有什么方法可以使用 getter/setter 重命名属性、修改 setter 或获取 setter 中的代码以便我可以复制它？

或者，还有其他方法可以实现我想要做的事情吗？

我试图在业务逻辑（模型）和 UI（html）之间保持分离，而不要求编写模型的人必须考虑 UI/绑定。

我也不想使用任何大型库，例如 Angular 或 Knockout，因为它们需要在页面中包含大量代码以满足非常有限的要求，而且这是我们一直在开发/维护的项目20 多年了，所以我们不想使用一个有大量重大变化（Angular）历史的库。

我们目前需要支持 IE10/11 和现代版本的 Chrome / Edge / Firefox / Safari（iOS 和 Mac）。但是，如果有一些东西不支持所有这些，我们愿意做一个“不错”的方式和一个“讨厌”的后备，直到我们可以放弃对 IE 的支持。

如果有什么不同，我们将使用TypeScript 来编写 JavaScript。

编辑：自从提交我的问题后，我找到了this。它说你可以重命名一个属性：

Object.defineProperty(o, new_key, Object.getOwnPropertyDescriptor(o, old_key));
delete o[old_key];

这适用于重命名简单变量类型的属性，但不适用于使用 getter 和 setter 重命名属性。我不确定为什么，尽管当我对它们执行 hasOwnProperty 时，我的带有 getter / setter 的属性返回 false。

编辑2：事实证明，TypeScript 是针对原型而不是对象添加属性，这就是它们无法访问的原因。我打电话给Object.getOwnPropertyDescriptor(o.__proto__, old_key)，这给了我我需要的描述符。

【问题讨论】：

看看How do data-binding works in angularjs你可能会有一些想法。
你能发布一些代码来说明你想要实现的目标吗？
同意@FedericoG，这不是一个简单的答案，发布一些示例代码将帮助我们为您提供帮助。作为旁注，您可以在具有侦听器的道具上注册自定义 emitters 以反映修改后的数据。也许您可以尝试将INotifiyPropertyChanged 从C# 反映到您的代码中？

标签： javascript data-binding

【解决方案1】：

我发现您可以通过执行以下操作来编辑/扩展设置器：

var propDescriptor = Object.getOwnPropertyDescriptor(model, key);

propDescriptor.set = function (value) {
    setter.call(model, value);
    //Do extra stuff here
}

Object.defineProperty(model, key, propDescriptor);

这意味着该属性仍然保持一致性，同时允许您扩展它以更新绑定的输入字段。

【讨论】：