Question

这是更多broad question的一部分。它受到的关注度很低，所以请让我问一下我自己无法实现的唯一部分。如何为dom对象注册类似jquery的javascript函数？假设我有以下html页面：

<html><body>
  <div id = "table"/>
  <div id = "chart"/>
</body></html>

并希望能够拨打$('#table').update()和$('#chart').update()？我需要那些更新函数来包含不同的逻辑和局部变量，例如从中加载数据的不同url。很抱歉可能是菜鸟。

更新

如果我理解正确，插件是一个可以处理任何对象的全局命名空间中的函数。我宁愿把不同的功能与不同的元素联系起来。那是因为我认为将不同的update函数与不同的对象关联起来要容易得多，而不是写一个更新函数，对于每个对象必须调查它是否适用，如果是，那么如何。

Answer 1

你所追求的是jQuery's fn.extend()：

$.fn.extend({
    update: function() {
        /* Required code. */
    }
});

然后你可以简单地在jQuery对象上调用.update()来执行该函数：

$('myElement').update();

作为示例使用，如果我们想要记录元素的id，我们可以将update()函数定义为：

$.fn.extend({
    update: function() {
        console.log("ID = " + this.id);
    }
});

然后致电：

$('#table').update();

哪会记录：

ID = table

Answer 2

你不需要jQuery。 DOM元素是对象，因此您可以为它们提供所需的任何方法：

var table = document.getElementById('table');
table.update = function() {
  this.innerHTML += 'table updated ';
}.bind(table);

var chart = document.getElementById('chart');
chart.update = function() {
  this.innerHTML += 'chart updated ';
}.bind(chart);


document.getElementById('table').update();
document.querySelector('#chart').update();

示例：http://jsbin.com/uReyIRi/1/edit

Answer 3

您可以通过原型向DOM对象添加新方法。

/* extend existing prototype */
HTMLTable.prototype.update = function() {
    console.log( this );
}

/* call new method */
document.querySelector( 'table' ).update();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

如何在javascript中定义dom对象的函数

3 个答案: