Question

我正在尝试将JavaScript原型与jQuery的.data()函数一起使用。我的代码如下所示：

el = this.element;

el.data("state", {
   someValue: null,
   anotherValue: function() {
      this._val = 0;
   }
});

el.data("state").anotherValue.prototype.getValue = function() {
   return this._val;
}

el.data("state").anotherValue.prototype.setValue = function(val) {

   if (val === Infinity || val < 1) {
      this._val = 1;
   } else {
      this._val = val;
   }

}

console.log(el.data("state").anotherValue.getValue());

这似乎不起作用，我只是想知道为什么？

运行此代码时得到的结果是：

Uncaught TypeError: Object function () {
   this._val = 0;
} has no method 'getValue'

我正在开发一个基于widget工厂的jQuery插件，我想在这个插件中构建一个可管理的状态机 - 一个可以存储和访问插件当前状态的中心位置。我想尝试这个的原因之一是我希望能够监视某些值是否发生变化并在发生时触发其他事情。我需要使用.data（）函数存储数据，因为它必须绑定到元素。如果在同一页面上获得插件的多个实例，则会发生奇怪的事情。

Answer 1

原型似乎不是这里的方式。相反，我将尝试使用setters and getters。我不是100％确定浏览器兼容性，但是当重写上面的例子时，代码如下所示：

el = this.element;

el.data("someValue", { 
   val: null,
   get value() { return this.val; },
   set value(val) { 
      if (val === Infinity || val < 1) {
         this.val = 1;
      } else {
         this.val = val;
      }
});

console.log(el.data("someValue").value);
el.data("someValue").value = 0;
console.log(el.data("someValue").value);

如果您运行此代码，则会获得以下输出（在Google Chrome中）：

null
10

当以这种方式实现时，我可以运行检查，并在更改或访问变量的值时使事情发生。请记住这是初步代码 - 我没有时间在几个平台上的几个浏览器中运行它。阅读this blog post似乎IE8存在浏览器兼容性问题。

JavaScript原型与jQuery的.data（）函数一起使用？

1 个答案: