javascript属性改变事件

Question

我需要在每次更新/更改属性时触发一个事件，以便使 dom 元素与模型上的属性值保持同步（我使用 john resig 的简单继承 http://ejohn.org/blog/simple-javascript-inheritance/）。这可以通过跨浏览器的方式实现吗？在我看来，如果我可以包装 js 用于设置属性的任何函数并使其触发一个事件，那么它就可以工作，我只是不知道该怎么做。

Answer 1

JavaScript 不使用函数来设置属性。它们只是变量，设置它们不需要任何复杂的包装。

您不过，可以使用函数来设置属性 - 与您在支持类中的私有数据的语言中可能使用的 getter/setter 排列相同。通过这种方式，您的函数可以轻松运行已注册为回调的其他函数。使用 jQuery，您甚至可以将它们作为事件处理。

$(yourObject).bind('some-event-you-made-up', function() { 
    // This code will run whenever some-event-you-made-up is triggered on yourObject
});

// ... 

$(yourObject).trigger('some-event-you-made-up');

Answer 2

也许您已经使用 jQuery 绑定/触发解决了您的问题，但我想告诉您，我正在构建一个更改跟踪和（在此之上）实体建模 Javascript 框架，名为“帐篷”，它可以解决您暴露的问题，而不需要有关对象操作的任何特殊语法，其开源并托管于：

https://github.com/benjamine/tent

它使用 JSDoc 进行记录，并使用 js-test-driver 进行单元测试。

您可以通过这种方式使用更改跟踪模块：

   var myobject = { name: 'john', age: 34 };

   // add a change handler that shows changes on alert dialogs
   tent.changes.bind(myobject, function(change) {
       alert('myobject property '+change.data.propertyName+' changed!');
   });

   myobject.name = 'charly'; // gets notified on an alert dialog

它也适用于数组更改（添加、删除）。
此外，您可以使用“实体”上下文来保留所有检测到的更改（添加、删除、修改项目）的更改集，这些更改按集合分组、级联添加和删除、保持反向属性同步、跟踪 1 对 1、1 对 N以及 N 对 M 关系等。

Answer 3

对象defineProperty/defineProperties 就可以解决这个问题。
这是一个简单的代码。我基于此构建了一些数据绑定框架，它可能会变得非常复杂，但要像这样练习：

var oScope = {
    $privateScope:{},
    notify:function(sPropertyPath){
        console.log(sPropertyPath,"changed");
    }
};
Object.defineProperties(oScope,{
    myPropertyA:{
        get:function(){
            return oScope.$privateScope.myPropertyA
        },
        set:function(oValue){
            oScope.$privateScope.myPropertyA = oValue;
            oScope.notify("myPropertyA");
        }
    }
});

oScope.myPropertyA = "Some Value";
//console will log: myPropertyA changed

Answer 4

您可以尝试 Javascript 属性事件 (jpe.js)

我遇到了类似的问题，最终为 Object.defineProperty 编写了一个重载函数，将事件处理程序添加到属性中。它还提供类型检查（js-base-types）并在内部存储其值，防止不必要的更改。

正常的 DefineProperty 示例：

Object.defineProperty(document, "property", {
    get:function(){return myProperty},
    set:function(value){myProperty = value},
})
var myProperty = false;

具有 onchange 事件的属性示例：

Object.defineProperty(document, "property", {
    default:false,
    get:function(){},
    set:function(value){},
    onchange:function(event){console.info(event)}
})