我有一个对象数组,这些对象都有一个'isvalid'属性。
是否可以使用JQuery或纯JavaScript将代码绑定到该属性值更改的事件?
因此,当我有一个包含10个对象的数组时,我希望在其中一个对象的'isvalid'属性更改时执行函数。
这是可能的吗?
米歇尔
是否可以使用JQuery或纯JavaScript将代码绑定到该属性值更改的事件?
因此,当我有一个包含10个对象的数组时,我希望在其中一个对象的'isvalid'属性更改时执行函数。
这是可能的吗?
米歇尔
通过使用一个属性设置器函数,可以使用纯JavaScript实现。使用ES5语法,代码如下(live example--在Chrome和其他合理支持ES5的浏览器中运行):
// Our constructor function
function Thing() {
}
// Define a "foo" property with a setter and getter
Object.defineProperty(Thing.prototype, "foo", {
set: function(value) {
this.fooStorage = value;
display("Foo was set to '" + value + "'");
},
get: function() {
return this.fooStorage;
}
});
// Create a `Thing`
var t = new Thing();
// Set its property
t.foo = "bar";
t.foo = "bar";
赋值语句时,会调用setter函数。如果需要,你可以让setter函数调用回调函数来通知你Thing
对象已被更改。fooStorage
属性存储foo
的值,这不是最理想的方式,但对于示例而言简单易懂。// Our constructor function
function Thing() {
}
// Define a "foo" property with a setter and getter
Thing.prototype.setFoo = function(value) {
this.fooStorage = value;
display("Foo was set to '" + value + "'");
};
Thing.prototype.getFoo = function() {
return this.fooStorage;
};
// Create a `Thing`
var t = new Thing();
// Set the property
t.setFoo("bar");
window.onload = function() {
// Our constructor function
function Thing() {
this.fooHandlers = [];
}
// Add a listener for "foo" changes
Thing.prototype.addFooChangeHandler = function(callback) {
this.fooHandlers.push(callback);
};
// Remove a listener for "foo" changes
Thing.prototype.removeFooChangeHandler = function(callback) {
var index;
index = this.fooHandlers.indexOf(callback);
if (index >= 0) {
this.fooHandlers.splice(index, 1);
}
};
// Define a "foo" property with a setter and getter
Object.defineProperty(Thing.prototype, "foo", {
set: function(value) {
var index;
for (index = 0; index < this.fooHandlers.length; ++index) {
try {
// Handler receives a reference to this Thing,
// foo's old value, and foo's new value.
this.fooHandlers[index](this, value, this.fooStorage);
}
catch (e) {
}
}
this.fooStorage = value;
},
get: function() {
return this.fooStorage;
}
});
// Create a `Thing`
var t = new Thing();
// Add a foo change handler
t.addFooChangeHandler(function(t, newValue, oldValue) {
display("Handler 1: Foo changed from '" + oldValue + "' to '" + newValue + "'");
});
// Add another
t.addFooChangeHandler(function(t, newValue, oldValue) {
display("Handler 2: Foo changed from '" + oldValue + "' to '" + newValue + "'");
});
// Set the property
t.foo = "bar";
t.foo = "boo";
// === Basic utility functions
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
};
// Remove a listener for "foo" changes
Thing.prototype.removeFooChangeHandler = function(callback) {
var index;
for (index = 0; index < this.fooHandlers.length; ++index) {
if (this.fooHandlers[index] === callback) {
this.fooHandlers.splice(index, 1);
break;
}
}
};
顺便提一下:这些示例中有许多匿名函数。我这样做是为了避免让事情变得复杂,但我不喜欢匿名函数,我更喜欢函数有名称。详情请参见链接。
看一下这个:http://blog.hydroprofessional.com/?p=84
这可以让你在属性改变时得到通知