As I Googled particular things, I've numerously run into the concept of "create a wrapper and extend that." In my case, I want to extend DOM. I know how advised against that is, but what I'm trying to do is slightly different and to do it I need to at-least explore these methodologies. So my question to you, after not getting a straight answer nomatter what blog/wiki/tut I looked at, is: What is a wrapper object/function and how do you make and use one?
Sorry if it turns out I made no sense; I'm getting this idea from when I read that prototype library and JQuery did things of these sorts once upon a time. If you could use DOM as an example, it would be appreciated.
As I Googled particular things, I've numerously run into the concept of "create a wrapper and extend that." In my case, I want to extend DOM. I know how advised against that is, but what I'm trying to do is slightly different and to do it I need to at-least explore these methodologies. So my question to you, after not getting a straight answer nomatter what blog/wiki/tut I looked at, is: What is a wrapper object/function and how do you make and use one?
Sorry if it turns out I made no sense; I'm getting this idea from when I read that prototype library and JQuery did things of these sorts once upon a time. If you could use DOM as an example, it would be appreciated.
Share Improve this question asked Jan 26, 2012 at 20:05 TERMtmTERMtm 1,9333 gold badges24 silver badges30 bronze badges 1- 1 A wrapper typically offers up a lot of the methods of the underlying object. So you create a 'class' wrapper which contains a reference to the thing you are wrapping, then create methods that call the objects methods, and add your own to the mix. If I remember correctly, once upon a time you could just extend the prototype of a dom element, at least in some browsers -- I doubt that is true anymore. – Mark Robbins Commented Jan 26, 2012 at 20:26
1 Answer
Reset to default 15Silly example, assuming <div id='my-div'></div>
MyDiv = {
_e:document.getElementById('my-div'),
setText:function(s) {
this._e.innerText = s;
},
getText:function() {
return this._e.innerText;
},
red:function() {
this._e.style.backgroundColor = 'red';
}
}
Wrapping the DOM element my_div inside MyDiv allows you to filter (or augment) the wrapped object's interface.
MyDiv.setText('Hello');
MyDiv.red();
alert(MyDiv.getText());