Question

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.

Answer 1

Silly 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());