Lingceng's Blog

jQuery Source Structure Tip

I was puzzled when I first see the jQuery source code. But I finally find a clue.

Put aside other modules, we can find out that jQuery has the ordinary JS class structrue.

jQuery = function() {

}

jQuery.prototype = {

}

$ is alias of jQuery.

// we can use the dollar sign to call the jQuery function
$ = jQuery;

// we can use the `jQuery.fn.newFeature = function() {}` to extend the jQuery instance function
// Why we can add fn key to jQuery?
// Answer is jQuery is a function and function is a object too. So we can add
// properties to function
jQuery.fn = jQuery.prototype;

But when $("#someid") always return a jQuery instance, where the new keyword?

jQuery = function() {
    // jQuery.prototype.init is the actually creator function
    return new jQuery.fn.init( selector, context );
}

//  mount prototype on jQuery to jQuery.fn.init
jQuery.fn.init.prototype = jquery.fn

Let’s see the complete struture now.

// utils

// class structure
jQuery = function() {
    return new jQuery.fn.init( selector, context );
}
jQuery.fn = {
   init: function(selector, context) {}
   // other core instance methods
}
jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototype = jquery.fn

// instance methods extend
// or use this style: jQuery.fn.hello = funtion() {}
jQuery.extend(jQuery.fn, {
   // ...
});

// class methods extend
// or use this style: jQuery.hello = funtion() {}
// maybe some utils
jQuery.extend(jQuery, {
  isFunction: function( obj ) {
    return jQuery.type(obj) === "function";
  }
  // ...
});

// module export or AMD
window.$ = window.jQuery = jQuery

Comments