扩展DOM元素

Question

Im working on a jQuery/Zepto slider plugin and wanted ask you about extending dom elements. I know that this method is not very elegant for different browsers environment but its make life so much easier.

Also to make names unique ive added all methods into one object 'pluginName'

So each slider item will get a set of custom methods:

item = document.createElement('div');
itemMethods(item); // add methods to item element

itemMethods = function(el){
 el.pluginName= {};
 el.pluginName.getIndex = function(){};
 el.pluginName.setLocalData = function(){};
 el.pluginName.getLoaclData = function(){};
}

Is this method worth a try? Are there any huge issues with custom element methods? Im not sure am i going to right direction. Thanks

Answer 1

Notice that document.createElement('div'); returns an instance of HTMLDivElement :

var div = document.createElement('div');
console.log(div, div.constructor === HTMLDivElement);  // HTMLDivElement, true

Therefore, you can extend the HTMLDivElement class by simply adding properties to its .prototype object:

HTMLDivElement.prototype.pluginName = {};
HTMLDivElement.prototype.pluginName.getIndex = function () {};
HTMLDivElement.prototype.pluginName.getLocalData = function () {};
HTMLDivElement.prototype.pluginName.setLocalData = function () {};

Or even shorter:

HTMLDivElement.prototype.pluginName = {
    getIndex: function () {},
    getLocalData: function () {},
    setLocalData: function () {}
};

EDIT If you just want to add new methods to a single div, try the following:

var itemMethods = function (el) {
    var index = 0;
    var data = {};
    el.pluginName = {
        getIndex: function () {
            // access the element by el
        },
        getLocalData: function () {
            // access the element by el
        },
        setLocalData: function () {
            // access the element by el
        }
    };
};

item = document.createElement('div');
itemMethods(item); // add methods to item element

Answer 2

Since you mentioned jQuery, how about something like this:

var $div = $('<div/>').data({ 
    pluginName: { 
        doStuff: function(s){ console.log('hello ' + s); } 
    } 
});

$div.data('pluginName').doStuff('world');

http://jsfiddle.net/LHk8j/