Use jQuery source code to learn javascript (1) _ jquery

Recently, I am working on the log statistics program and found that the program of the other party is developed based on Jquery, and the framework of the company's website is prototype. I also wanted to know Jquery source code for a long time, so I decided to study Jquery source code. to simulate the method of Jquery so popular, it must be extraordinary. I learned it through open source code, it's a good way to learn!

The following is my simulated method. I try to simplify it as much as possible.

Define Object C (similar to jquery's $ method) -- this is also a clever design of jquery.

The Code is as follows:

(Function (){
Var
_ CQuery = window. cQuery,
CQuery = function (){
Return new cQuery. fn. init ();
};
CQuery. fn = cQuery. prototype = {
Init: function (){
Console. log (this );
Return this;
},
Test: function (){
Console. log ('test ');
}
};
CQuery. fn. init. prototype = cQuery. fn;
Window. C = window. cQuery = cQuery;
})();

C (). test ();

Output result

Code Analysis

1. Register cQuery to the window attribute and use it as a global variable. Use C as the simple name.

Window. C = window. cQuery = cQuery;

2,
CQuery. fn. init. prototype = cQuery. fn;
Figure-Based Speech (print the current object cQuery ):

Remove this sentence.

Fill in this sentence:

Difficulty Analysis: Prototype Transfer
The init prototype is only the current function.

Use cQuery. fn. init. prototype = cQuery. fn; overwrite the prototype object of the init constructor to implement cross-origin access.
Evaluation:
This is a good move, new cQuery. fn. the new object created by init () has the prototype object method of the init constructor. You can change the prototype pointer to the prototype of the cQuery class. -- In this way, the created object inherits the method defined by the cQuery. fn prototype object.
3. Use a var to define variables and functions. Line 79 is used in Jquery source code to define a series of variables (at the beginning ).

Each method

The Code is as follows:

(Function (){
Var
_ CQuery = window. cQuery,
CQuery = function (){
Return new cQuery. fn. init ();
};
CQuery. fn = cQuery. prototype = {
Init: function (){
Return this;
},
Each: function (obj, callback) {// each method
Var name, length = obj. length;
For (name in obj ){
If (callback. call (obj [name], name, obj [name]) === false ){
Break;
}
}
},
IsWindow: function (obj ){
Return obj! = Null & obj = obj. window;
}
};
CQuery. fn. init. prototype = cQuery. fn;
Window. C = window. cQuery = cQuery;
})();

C (). each ({Height: 'height', Width: 'width'}, function (name, type) {console. log (this, name, type );});

Output result

Difficulties: callback. call (obj [name], name, obj [name])
Callback is function (name, type) {console. log (this, name, type);} this method
The first obj [name] is a "height" or "width" string, which is this in the callback function.
Name, the second obj [name] is the parameter passed to callback.

IsWindow () method

Based on the above Code, write:

The Code is as follows:

IsWindow: function (obj ){
Return obj! = Null & obj = obj. window;
}

Call:

The Code is as follows:

Console. log (cquery. isWindow (window ));
Console. log (cquery. isWindow (document ));

Output result

A window object has a special property window, which is equivalent to the self property and contains references to the window itself. This attribute is used to determine whether it is a window object!

Summary

I also just started my research. It may not be clear in some places. If someone can help me, it would be better.
It's not too early. I will study it next time.