如何在javascript中定義dom對象的函數

Question

這是一個更廣泛問題的一部分。 它受到的關注度很低，所以請讓我問一下我自己無法實現的唯一部分。 如何為dom對象注冊類似jquery的javascript函數？ 說我有一個以下的HTML頁面：

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

並希望能夠調用$('#table').update()和$('#chart').update() ？ 我需要那些更新函數來包含不同的邏輯和局部變量，例如從中加載數據的不同url。 對不起，可能是菜鳥。

UPDATE

如果我理解正確，插件是一個可以處理任何對象的全局命名空間中的函數。 我寧願把不同的功能與不同的元素聯系起來。 那是因為我認為將不同的update函數與不同的對象相關聯會比將每個對象必須調查的一個更新函數更容易適用，如果是，那么如何。

Answer 1

你所追求的是jQuery的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 =表

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 個解決方案

解決方案1
6 2013-10-28 14:06:29

解決方案2
3 已采納 2013-10-28 14:10:13

解決方案3
2 2013-10-28 14:17:31

如何在javascript中定義dom對象的函數

問題描述

3 個解決方案

解決方案1 6 2013-10-28 14:06:29

解決方案2 3 已采納 2013-10-28 14:10:13

解決方案3 2 2013-10-28 14:17:31

解決方案1
6 2013-10-28 14:06:29

解決方案2
3 已采納 2013-10-28 14:10:13

解決方案3
2 2013-10-28 14:17:31