Author: nuysoft/qq:47214707 email:nuysoft@gmail.com
After all, read and write, the wrong place please tell me, a lot of exchanges and common progress. This chapter has not finished, will submit the PDF.
Previous note:
Want to write the system well, but start with the interesting part first.
Recently, a reader of the PDF to the Baidu Library, the first thanks to reprint and dissemination, but according to have and set a very high wealth to download the value can not be good, and then I will be sorted out to the library. Please understand.
3. Constructing jquery objects
3.1 Source structure
First look at the overall structure, and then do the decomposition:
Copy Code code as follows:
(Function (window, undefined) {
var jQuery = (function () {
Building a JQuery Object
var jQuery = function (selector, context) {
Return to New JQuery.fn.init (selector, context, rootjquery);
}
jquery Object Prototypes
Jquery.fn = Jquery.prototype = {
Constructor:jquery,
Init:function (selector, context, rootjquery) {
Selector has the following 7 types of branches:
DOM element
Body (optimized)
Strings: HTML tags, html strings, #id, selector expressions
function (as ready callback function)
Finally, the pseudo array is returned
}
};
Give the INIT function the JQuery prototype for later instantiation
JQuery.fn.init.prototype = Jquery.fn;
Merging content into the first argument, most of the subsequent functions are extended through the function
Most of the functions that are extended by jQuery.fn.extend call functions with the same name extended by Jquery.extend
Jquery.extend = JQuery.fn.extend = function () {};
Extending the static method on jquery
Jquery.extend ({
Ready Bindready
Isplainobject Isemptyobject
Parsejson Parsexml
Globaleval
Each makearray inArray merge grep map
Proxy
Access
Uamatch
Sub
Browser
});
Here, the jquery object is constructed, and the code behind it is an extension of the jquery or jquery object.
return jQuery;
})();
Window.jquery = window.$ = JQuery;
}) (window);
L The jquery object was created not by new jquery, but by the new JQuery.fn.init
Copy Code code as follows:
var jQuery = function (selector, context) {
Return to New JQuery.fn.init (selector, context, rootjquery);
}
N jquery objects are jQuery.fn.init objects
N If you execute the new Jqeury (), the resulting jquery object is discarded, and the JQuery.fn.init object is returned, so you can call jquery (selector, context) directly, and there is no need to use the New keyword
L Execute Jquery.fn = Jquery.prototype First, then execute JQuery.fn.init.prototype = Jquery.fn, the merged code is as follows:
JQuery.fn.init.prototype = Jquery.fn = Jquery.prototype
All the methods that are mounted to the Jquery.fn are the equivalent of a mount to the Jquery.prototype, which is mounted on the jquery function (the first jquery = function (selector, context)), but in the end it is equivalent to a mount JQuery.fn.init.prototype, which is equivalent to hanging on to the object returned by the first jquery function, is mounted on the jquery object that we end up using.
This process is very winding, keeps things interesting "Shun" among them!
3.2 JQuery.fn.init
The function of JQuery.fn.init is to analyze the incoming selector parameters, perform various processing, and then generate the jquery object.
Type (selector)
Treatment mode
DOM element
Wrapped into a jquery object, returned directly
Body (optimized)
Read from Document.body
A separate HTML tag
Document.createelement
HTML string
Document.createdocumentfragment
#id
document.getElementById
Selector expression
$ (...). Find
Function
Callback functions registered to the DOM ready
3.3 Jquery.extend = JQuery.fn.extend
Copy Code code as follows:
To merge the properties of two or more objects into the first object, most of the following jquery functionality extends through the function
Most of the functions that are extended by jQuery.fn.extend call functions with the same name extended by Jquery.extend
If two or more objects are passed in, the properties of all objects are added to the first object target
If only one object is passed in, the properties of the object are added to the jquery object.
In this way, we can add new methods for the jquery namespace. Can be used to write jquery plug-ins.
If you do not want to change the incoming object, you can pass in an empty object: $.extend ({}, Object1, object2);
The default merge operation is Budie, and even if one of the target's properties is an object or property, it is completely overwritten rather than merged
The first argument is true, the merge is iterated
Attributes inherited from the object stereotype are copied
Undefined values are not copied
JavaScript-type attributes are not merged because of performance reasons
Jquery.extend (target, [Object1], [objectn])
Jquery.extend ([deep], Target, Object1, [objectn])
Jquery.extend = JQuery.fn.extend = function () {
var options, name, SRC, copy, Copyisarray, clone,
target = Arguments[0] | | {},
i = 1,
Length = Arguments.length,
Deep = false;
Handle a deep copy situation
If the first argument is a Boolean, it may be a deep copy
if (typeof target = = "Boolean") {
Deep = target;
target = Arguments[1] | | {};
Skip the Boolean and the target
Skip Boolean and Target, starting from 3rd
i = 2;
}
Handle case as Target is a string or something (possible in deep copy)
Target is not an object or function, force set to null object
if (typeof target!== "Object" &&!jquery.isfunction (target)) {
target = {};
}
Extend JQuery itself if only one argument is passed
If only one argument is passed, the jquery extension is considered
if (length = = i) {
target = this;
I.;
}
for (; i < length; i++) {
Only deal with non-null/undefined values
Handle only Non-null parameters
if (options = arguments[i])!= null) {
Extend the Base Object
for (name in options) {
src = target[name];
copy = options[name];
Prevent never-ending Loop
Avoid circular references
if (target = = copy) {
Continue
}
recurse if we ' re merging plain objects or arrays
The depth copy and the value is a pure object or array, recursion
if (deep && copy && jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy)) ) {
If copy is an array
if (Copyisarray) {
Copyisarray = false;
Clone is a fixed value of SRC
clone = src && jquery.isarray (src)? SRC: [];
If the copy is an object
} else {
Clone is a fixed value of SRC
clone = src && jquery.isplainobject (src)? src: {};
}
Never move original objects, clone them
Recursive call Jquery.extend
target[name] = Jquery.extend (deep, clone, copy);
Don ' t bring in undefined values
Cannot copy null value
else if (copy!== undefined) {
target[name] = copy;
}
}
}
}
Return the Modified Object
Returns the Changed object
return target;
};
To be Continued
