如何在javascript中定义dom对象的函数
[英]How to define function for a dom object in javascript
问题描述
This is a part of a more broad question . 
这是一个更广泛问题的一部分。 It is getting low attention, so let me please ask the only part of it that I can't implement myself. 它受到的关注度很低，所以请让我问一下我自己无法实现的唯一部分。 How can I register jquery-like javascript function for a dom object? 如何为dom对象注册类似jquery的javascript函数？ Say i have a following html page: 说我有一个以下的HTML页面：
<html><body>
<div id = "table"/>
<div id = "chart"/>
</body></html>
and want to be able to call $('#table').update() and $('#chart').update() ? 并希望能够调用$('#table').update()和$('#chart').update() ？ I need those update functions to contain different logic and local variables, for example different url to load data from. 我需要那些更新函数来包含不同的逻辑和局部变量，例如从中加载数据的不同url。 Sorry for probably being noob. 对不起，可能是菜鸟。
UPDATE UPDATE
If I understand correctly, plugin is a function in a global namespace that can process any object. 如果我理解正确，插件是一个可以处理任何对象的全局命名空间中的函数。 I'd rather want to associate different functions with different elements. 我宁愿把不同的功能与不同的元素联系起来。 That because I thought that it would be easier to associate different update functions with different objects, than write one update function which for every object has to investigate is it applicable, and if yes, how. 那是因为我认为将不同的update函数与不同的对象相关联会比将每个对象必须调查的一个更新函数更容易适用，如果是，那么如何。
3 个解决方案
解决方案1
6 2013-10-28 14:06:29
What you're after is jQuery's fn.extend() : 你所追求的是jQuery的fn.extend() ：
$.fn.extend({
update: function() {
/* Required code. */
}
});
Then you can simply call .update() on a jQuery object to execute that function: 然后你可以简单地在jQuery对象上调用.update()来执行该函数：
$('myElement').update();
As an example use, if we wanted to log the id of an element, we could define our update() function as: 作为示例用法，如果我们想记录元素的id ，我们可以将update()函数定义为：
$.fn.extend({
update: function() {
console.log("ID = " + this.id);
}
});
Then call: 然后打电话：
$('#table').update();
Which would log: 哪个会记录：
ID = table
解决方案2
3 已采纳 2013-10-28 14:10:13
You don't need jQuery for this. 你不需要jQuery。 DOM elements are objects, so you can give them any methods you want: 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();
Example: http://jsbin.com/uReyIRi/1/edit 示例： http ： //jsbin.com/uReyIRi/1/edit
解决方案3
2 2013-10-28 14:17:31
You can add new methods to the DOM objects via their prototypes. 您可以通过原型向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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.