Creating a JavaScript Plugin

Question

How to create pure JavaScript (without using any library) that looks like this:

document.getElementById('id').myPlugin(); 

How is jQuery?

Answer 1

You can create your own wrapper (similar to jQuery) and this will allow you to get around all the issues discussed with the direct DOM extension.

 myWrapper = (function(){ function NodeList(elems) { this.length = 0; this.merge(this, elems.nodeType ? [elems] : elems); } function myWrapper(elems) { return new NodeList(elems); } myWrapper.NodeList = NodeList; NodeList.prototype = { merge: function(first, second) { var i = first.length, j = 0; for (var l = second.length; j < l; ++j) { first[i++] = second[j]; } first.length = i; return first; }, each: function(fn) { for (var i = -1, l = this.length; ++i < l;) { fn.call(this[i], this[i], i, l, this); } return this; } }; return myWrapper; })(); 

And you can add your own methods as follows:

 myWrapper.NodeList.prototype.myPlugin = function() { return this.each(function(){ // Do something with 'this' (the element) }); }; 

Using:

 myWrapper(document.getElementById('id')).myPlugin(); 

Answer 2

I am embarrassed to say that you cannot. In the end, Prototype.js did.

To be able to call getElementById('id').someNewMethod() , you will have to "extend the prototype of the return type of the getElementById object, which is Element . In some browsers, you can actually do this:

 Element.prototype.someNewMethod= function() { alert('hello from a '+this.tagName); }; document.body.someNewMethod(); // hello from a BODY 

However, this is highly doubtful. Prototyping on your own JavaScript objects, such as Object or String , is potentially pretty tricky that when names collide between browsers and libraries, but Element and all other DOM objects can be "host objects" that don't allow prototyping.

Even if DOM objects are implemented with a full built-in JavaScript interface, no specification says that Element should expose a prototype / constructor function under the variable window property / global variable called Element .

In fact, this works in Firefox, Webkit, and Opera and IE starting with version 8. However, it is non-standard, not all browsers make all the same interfaces accessible under all the same names, and it will not work in IE6, IE7, or many smaller browsers ( e.g. in mobile browsers).

The prototype had a reserve for these browsers: it would try to increase each instance of Element with new members when it first saw each element. But it had extremely dirty side effects, and many consider them a mistake; Prototype 2.0 will no longer attempt to extend the DOM interfaces .

Perhaps in the future, someone will tie this up and make it a reliable part of the browser environment. But this is not the case today, so you should continue to use other, clunkier methods, such as wrapper functions.

Answer 3

I agree with spender . You really shouldn't bother with standard JavaScript elements. It’s better to make a wrapper for it (i.e. $ , as jQuery uses). If you want to make a shorthand for the elements, make a wrapper method and continue with this. This will simplify the code. Because, if you change the standard functionality in JavaScript, it can interfere with standard behavior. This can lead to some really complicated debugging. It’s better to make a wrapper function, do whatever you like with it.

But despite this, if you want to tinker with standard behavior, you can always bind new methods to standard objects using prototyping. For instance:

 Object.prototype.myMethod = function () {} 

Answer 4

Why use this format? I think,

 myPlugin(document.getElementById('id')) 

will probably be clearer to anyone who supports the code. I'm not a big fan of fixing monkeys .