Question

选项＃1：

// Store the element as an object:
var counterEl = $("#counter");

// Attach a method to the object:
counterEl.updateCount = function (value) {
  // If the new value is greater than the existing value, update and animate the counter.
}

counterEl.updateCount(123); // Works.

$("#counter").updateCount(123); // Obviously does not work.

选项＃2：

var counterEl = $("#counter");

// Store the function expression in .data():
counterEl.data('updateCount', function (value) {
  // Major downside: If I access `this` here, it's the DOM window and not #counter.
}

counterEl.data('updateCount')(123); // Works.

$("#counter").data('updateCount')(123); // Works.

我理解为什么建议通常倾向于将方法附加到$.fn以使其可重用，但对于我来说，为什么将唯一方法附加到元素比附加唯一事件更糟糕的事情并不是很明显处理程序（如.click()）到元素。

有没有更好的方法将方法附加到jQuery中的DOM元素？如果我可以通过.data()访问该元素，this方法会很棒。

Answer 1

如何将方法附加到DOM jQuery中的元素？

有几种方法可以做到这一点，一种方法是使用jQuery.data，就像你自己提出的那样。另一种方法是直接在对象上添加函数作为方法。很多人都认为这种DOM污染，但实际上，这就像jQuery这样的库一直在做，所以如果你需要它，那就去做吧，先考虑后果，并确保你不要破坏过程中的东西;）

我应该这样做吗？

这取决于你需要什么，它本身没有任何问题，但它打破了你可能想要遵循的几种设计模式。

任何不存储功能的原因表达式.data（）？

不是真的，jQuery一直在内部做这件事。

Answer 2

将函数放在数据中可以这样做：

$('#SomeId').data('func', function() { alert('Hello world!'); });

并且这样称呼：

$('#SomeId').data('func')();

没有什么可以阻止你这样做，但它确实有一些代码味道的id。你应该考虑这是否真的是最好的解决方案。

另一种方法是将对象存储在数据中，该数据可以包含方法。例如：

var info = {
    message: 'Hello world!';
    show: function() { alert(this.message); };
};
$('#SomeId').data('info', info);

这样称呼：

$('#SomeId').data(info').show();

Answer 3

...简单地

$("p").click(function(){
    // do something
});

...其中"p"可以是任何类似CSS3的选择器。例子：

.classname
#someID

如何在jQuery中将方法附加到DOM元素？

3 个答案: