javascript - jquery(或纯 js)将更改事件绑定(bind)到数组中对象的属性

Question

我有一个对象数组，这些对象都有一个“isvalid”属性。

有没有办法使用 JQuery 或纯 javascript 将代码绑定(bind)到该属性值发生变化的事件？

所以当我有一个包含 10 个对象的数组时，我想在其中一个对象的“isvalid”属性发生变化时执行一个函数。

这可能吗？

米歇尔

Answer 1

通过使用属性 setter 函数，可以使用纯 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 的值，这不太理想，但对于示例来说很好且简单。

要以与非 ES5 JavaScript 引擎兼容的方式执行此操作，您要么必须使用 Mozilla 的一些专有且现已弃用的语法(不适用于其他引擎)，要么只使用 < em>显式 setter 函数(live example):

// 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");

(同样，这只是一个使用简单方法存储 foo 值的示例。)

这样做的好处是它几乎可以与任何 JavaScript 引擎一起工作，而不仅仅是符合 ES5 的引擎，并且明确地设置 foo 是一个函数调用，而不仅仅是一个属性赋值(而使用ES5 setter/getter 语法，设置 foo 属性的人不知道这是一个函数调用——这有优点也有缺点。

这就是您捕获属性更改这一事实的方式。然后只需允许注册和删除回调以接收更改通知即可。这些很容易在一个简单的数组中进行管理。这是一个基于 ES5 的示例，在每个对象的基础上进行；显然，您可以以某种分组方式来执行此操作，而不是针对您想让人们观看的整个对象数组。 ( live copy )

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);
  }
};

要在没有 ES5 JavaScript 引擎的情况下做到这一点，只需设置前面描述的 setFoo/getFoo 模型，并确保引擎支持 Array#indexOf 正确(一些引擎根本没有它，一些使用 == 而不是 === 等价物)或替换使用 Array#indexOf 在 removeFooChangeHandler 中用一个简单的循环遍历数组寻找回调:

// 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;
    }
  }
};

旁注:这些示例中有许多匿名函数。我这样做是为了避免让事情看起来很复杂，但是 I'm not a fan of anonymous functions ，我更喜欢函数有名字。有关详细信息，请参阅链接。