Read one of jQuery (composition of objects)

I am very confused about how jQuery is written. Especially after using Prototype $, I cannot understand jQuery's $ at one time. For the current front-end students, jQuery may be the first contact, and they will feel very comfortable and natural.

So far, the computer still stores the API documentation at that time.

During this period, my entry-level teacher is Mo mo, but he is still one of my favorite colleagues. He has a high level of programming skills, and I believe he has already broken through the restrictions of programming languages. When we were using Prototype. js, jQuery was introduced into the project when it was not popular in China.

Let's get down to it. The current jQuery version has reached 1.6.1. It expanded from around 2000 rows to 9000 rows. I believe it will soon be over lines. For some simple web pages, introducing jQuery is no longer so lightweight. Here we are studying the version 1.6.1. I will read and write it, and I will write a "Mini jQuery" line around 1000 ".

The following is the jQuery 1.6.1 code snippet.

Copy codeThe Code is as follows: var jQuery = function (selector, context ){
// The jQuery object is actually just the init constructor 'enabled'
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;

It seems that you are using a prototype to write a class jQuery (alias $), but actually we use a function call $ ("# id "), but not new $ ("# id ").
The identifier jQuery is a function. It contains a new function init instance and returns it. Now we know that the real constructor is jQuery. fn. init. JQuery is a strange one. It hangs init on the prototype of jQuery again.

JQuery. fn. init. prototype = jQuery. fn;Is a key sentence. This sentence assigns the function jQuery prototype to the function init prototype. When $ ("# id") is called, the returned object consists of two parts.
1. this is included in function init (such as this. context );
2. Included in prototype of function jQuery (such as this. size/this. toArray );

Write

Copy codeThe 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; // chained call
},
Hide: function (){
Var self = this;
SetTimeout (function (){
Self [0]. style. display = "none ";
},3000 );
Return this; // chained call
}
}
$. Prototype. init. prototype = $. prototype;

For the sake of simplicity, here the selector only transmits the html element or element id (which will be enhanced later, but not all css selector). The length attribute is attached to this and the value is assigned to 1.
When we callCopy codeThe Code is as follows: var obj = $ ();
Console. dir (obj );

$ () Is actually meaningless, just to test the composition of the called obj. 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 $. prototype in function init.
Let's take a look at the $. prototype method. I only added the css and hide methods. The implementation of these two methods is also extremely simple.Copy codeThe Code is as follows: <script src = "http://files.cnblogs.com/snandy/zchain-0.1.js"> </script>
<Div id = 'content'> 3 seconds later I will hide. </div>
<Script type = "text/javascript">
$ ("Content" 2.16.css ("color", "red"). hide ();
</Script>

First, call css to set the font color to red, which is hidden after 3 seconds.
Summary:
The jQuery object refers to the jQuery. prototype. init instance. In short, it is new jQuery. prototype. init. Here, the jQuery. prototype. init type is function and can be considered as a class.

JQuery objects consist of the following parts:
1. attributes or methods attached to this in jQuery. prototype. init.
2. attributes or methods attached to jQuery. prototype. init. prototype.
3. Because jQuery. prototype is assigned to jQuery. prototype. init. prototype, attributes and Methods attached to jQuery. prototype are part of the jQuery object.
4. extend attributes or methods through jQuery. fn. extend ({...}) (as mentioned later ).
/201106/yuanma/zchain.rar