jquery is so popular, must have its extraordinary place, through open source code to learn, is a good way to learn ah!
Here's how I simulate it, I try to simplify the method.
Define Object C (a $ method similar to jquery)--This is also a very ingenious place for jquery design
Copy Code code 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 results
Code Analysis
1, the Cquery register to the Window property, as a global variable use. Use C as a simple name.
Window. C = Window.cquery = Cquery;
2,
CQuery.fn.init.prototype = Cquery.fn;
Take a picture to speak (print the current object cquery):
Remove the screenshot of the sentence.
Fill in the screenshot of this sentence:
Difficulty Analysis: Prototype delivery
The prototype of Init is just the current function.
Use CQuery.fn.init.prototype = Cquery.fn to overwrite the Init constructor's prototype object for Cross-domain access.
Evaluation:
This is a coup, the new CQuery.fn.init () creates an object that owns the prototype prototype object of the Init constructor, and points to the prototype of the Cquery class by changing the direction of the prototype pointer. -This created object inherits the method defined by the Cquery.fn prototype object.
3, with a var definition variables, functions. The jquery code uses 79 lines to define a series of variables (in the beginning).
Each method
Copy Code code 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 results
Difficulty Analysis: Callback.call (Obj[name], name, Obj[name])
Callback is a function (name, type) {Console.log (this, name,type);} This method
The first obj[name] is the "height" or "width" string, which is the this in the callback function.
Name, second Obj[name] is the argument passed to the callback.
IsWindow () method
On the basis of the above code, write:
Copy Code code as follows:
Iswindow:function (obj) {
return obj!= null && obj = = Obj.window;
}
Call:
Copy Code code as follows:
Console.log (Cquery.iswindow (window));
Console.log (Cquery.iswindow (document));
Output results
The Window object has a special Property window, equivalent to the Self property, which contains a reference to the window itself. Use this property to determine if it is a Window object!
Summary
I was just beginning to study. There may be some places that are not very clear, if someone can add to me, it would be better.
It's getting late, next time we'll study.
