Read one of jQuery (composition of objects)_jquery

I was very confused about how to write jQuery, especially after using Prototype's $, I couldn't understand jQuery's $ for a while. For current front-end students, jQuery may be the first thing they come into contact with, and they will find it very accustomed and natural.

The API documentation from that time is still stored in my computer, so I’ll post a picture to express my appreciation

During this period, my entry-level teacher was Mo Mo. In fact, he is still one of my admired colleagues to this day. His programming skills are very high and he believes that he has already broken through the limitations of programming languages. When everyone was using Prototype.js, and before jQuery was yet popular in China, he had already introduced jQuery into the project.

Let’s get back to business, the current jQuery version has reached 1.6.1. It has expanded from about 2,000 lines at that time to 9,000 lines. I believe it will break through the 1w line soon. For some simple web pages, introducing jQuery is no longer so lightweight. The study here is version 1.6.1. I will read and write at the same time, and finally write a "mini jQuery" of about 1,000 lines.

The following is the jQuery 1.6.1 code snippet

Copy the code The code is as follows:

var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
...
class2type = {};

jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function(selector, context, rootjQuery){
}
}

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

At first glance, it looks like we are using the prototype method to write a class jQuery (alias $), but in fact when we use it, we use the function call $("#id"), not new $("# id").
Identifier jQuery is a function, which creates a new instance of function init and then returns. So far we know that its real constructor is jQuery.fn.init. The writing of jQuery is really weird. It hangs init on the jQuery prototype, which is a bit confusing to read.

jQuery.fn.init.prototype = jQuery.fn; is the key sentence. This sentence assigns the prototype of function jQuery to the prototype of function init. The object returned when calling $("#id") consists of two parts.
1, brought by this in function init (such as this.context);
2, brought by the prototype of function jQuery (such as this.size/this.toArray);

Imitate jQuery and write a

Copy code The code is as follows:

// zchain-0.1 .js
function $(selector){
return new $.prototype.init(selector);
}
$.prototype={
init:function(selector){
if(selector === undefined){
this.length = 0;
return this;
}
if(selector.nodeType==1){
this[0] = selector ;
}else{
this[0]=document.getElementById(selector);
}
this.length=1;
},
css:function(name,value ){
this[0].style[name] = value;
return this;//chain call
},
hide:function(){
var self=this;
setTimeout(function(){
self[0].style.display="none";
},3000);
return this;//chain call
}
}
$.prototype.init.prototype=$.prototype;

For the sake of simplicity, the selector here only passes html element or element id (will be enhanced in the future, but all css selectors will not be implemented) ), the length attribute is attached to this and is assigned a value of 1.
When we call

Copy the code The code is as follows:

var obj = $( );
console.dir(obj);

$() is actually meaningless, just to test the composition of obj after the call. The firebug console output is as follows:
length:0;
init:function
attr:function
hide:function

That is, the obj object is composed of this and function $ in function init. Composed of prototype.
Looking at the methods on $.prototype, I only added the css and hide methods. The implementation of these two methods is also extremely simple.

Copy code The code is as follows:

3 seconds later I will hide.

First call css to set the font color to red, and hide it after 3 seconds.
To summarize:
The jQuery object refers to an instance of jQuery.prototype.init, which is simply new jQuery.prototype.init. The type of jQuery.prototype.init here is function, which can be regarded as a class.

The jQuery object consists of the following parts:
1. Properties or methods hanging on this in jQuery.prototype.init.
2, properties or methods hanging on jQuery.prototype.init.prototype.
3. Because jQuery.prototype is assigned to jQuery.prototype.init.prototype, the properties and methods hanging on jQuery.prototype are also part of the jQuery object.
4. Properties or methods extended through jQuery.fn.extend({...}) (mentioned later).
/201106/yuanma/zchain.rar