Question

我正在尝试用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操作时，带有getters / setters的属性返回false。

Edit2：事实证明TypeScript是针对原型而不是对象添加属性，这就是为什么无法访问它们的原因。我改为致电Object.getOwnPropertyDescriptor(o.__proto__, old_key)，这给了我所需的描述符。

Answer 1

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

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

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

Object.defineProperty(model, key, propDescriptor);

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

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

1 个答案: