Learning javascript with jQuery source code (1)

Jquery is so popular that it must be extraordinary. Learning through open source code is a good learning method!

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.

Copy codeThe 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
Copy codeThe 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:Copy codeThe Code is as follows: isWindow: function (obj ){
Return obj! = Null & obj = obj. window;
}

Call:Copy codeThe 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.