How does the skeleton of jQuery work?

Question

I've been programming in JavaScript for a couple of years, but I've never understood how different techniques work in JavaScript, only that it works..

Now, after learning properly how prototypes and constructors work, I took a look at jQuery to learn something before I set out to make my own (not publicly accessible) plugin for my own website.

The problem is just that I don't understand how it works. Here is a almost working sample: http://jsfiddle.net/3zWvR/1/

(function() {
    test = function(selector) {
        return new test.prototype.init(selector);
    }
    test.prototype = {
        init: function(selector) {
            alert("init ran");
            if (!arguments[0]) {
                return this;
            }
        }
    }
 // As I understand the jQuery code, the next line should really be
 // test.prototype = {
    test.prototype.init.prototype = {
        send: function() {
            alert("send ran");
        }
    }

    window.ob = test;
})()

ob().send();​

I've commented a line in there that shows what I think really should be there if I do it like jQuery. But I'm not able to replicate it so that you could do ob.method() either...

How is the jQuery "framework" or skeleton built and how does it work?

Answer 1

Well, your question is very interesting, and it's something that has been on my head since I started to look at the source code of jQuery. Your code should work as you wanted to if you add this:

test.prototype.init.prototype = test.prototype;
test.send = test.prototype.send = function(){
  alert("send ran");
};

instead of this:

test.prototype.init.prototype = {
  send: function() {
    alert("send ran");
  }
};

You are probably saying "I already know that, you are just adding the method send() to the test object and to the prototype of itself", but doing it this way, you are doing exactly what you want: make that ob, ob() and all the variables created with it, like var somevar = ob() have the method send().

If you take a look at the jQuery source code, they use the method extend() to extend the jQuery object. Looking at some of the .extend() calls, you will see that if one method/property is added only to the jQuery.fn object (that is a shorthand to the prototype), the jQuery object doesn't have that method/property. You can see this if you type in a console jQuery.off, it will return undefined, but the method off exists in the jQuery.fn object (type jQuery.fn.off in a console and you will see it).

If you think in jQuery, when you write a plugin, you start by doing jQuery.fn.plugin =, so you add your plugin to the objects created by jQuery, but your plugin is not accessible directly from jQuery.

Think of jQuery as a constructor that also has a lot of utilities. The object returned when you do $(selector) have all the methods in jQuery.fn but not all of the jQuery object, only the ones that they have added into the jQuery.fn.