Implementation code for the jquery constructor summary _jquery

Source: Internet
Author: User
Obviously, the implementation of this step is quite complex, and this implementation is its Init method, the real constructor of jquery. It's also upgraded with version upgrades and is growing longer.
Published in 2009-01-13, version 1.3
Copy Code code as follows:

Init:function (Selector, context) {
Make sure that a selection is provided
Selector = Selector | | Document
Process node parameters, add attributes directly to the new instance
if (Selector.nodetype) {
This[0] = selector;
This.length = 1;
This.context = selector;
return this;
}
Handling String parameters
if (typeof selector = = "string") {
Determines whether an HTML fragment or an ID
var match = quickexpr.exec (selector);
if (Match && (match[1] | | |!context)) {
If it is an HTML fragment, convert an array constructed by the node
if (Match[1])
selector = Jquery.clean ([match[1]], context);
If it is an ID, find this element if it is found in an empty array
else {
var elem = document.getElementById (match[3]);
Make sure a element was located
if (elem) {
Process IE and Opera to confuse IDs with name Bugs
if (elem.id!= match[3])
Return JQuery (). Find (selector);
var ret = jQuery (elem);
Ret.context = document;
Ret.selector = selector;
return ret;
}
selector = [];
}
} else
Use sizzle to process other CSS expressions, generate an instance, and return
return JQuery (context)-find (selector);
Processing function parameters, direct Domready
else if (jquery.isfunction (selector))
return JQuery (document). Ready (selector);
Process the jquery object parameter and simply assign its two properties to the new instance
if (selector.selector && selector.context) {
This.selector = Selector.selector;
This.context = Selector.context;
}
To get the array of nodes from the above, use the SetArray method to transform them into the elements of the instance
Return This.setarray (Jquery.makearray (selector));
},

Published in 2009-02-19, version 1.32
Copy Code code as follows:

Init:function (Selector, context) {
Make sure that a selection is provided
Selector = Selector | | Document
Process node parameters, add attributes directly to the new instance
if (Selector.nodetype) {
This[0] = selector;
This.length = 1;
This.context = selector;
return this;
}
Handling String parameters
if (typeof selector = = "string") {
Determines whether an HTML fragment or an ID
var match = quickexpr.exec (selector);
if (Match && (match[1] | | |!context)) {
If it is an HTML fragment, convert an array constructed by the node
if (Match[1])
selector = Jquery.clean ([match[1]], context);
else {
var elem = document.getElementById (match[3]);
If it is an ID, find this element if it is found in an empty array
if (elem && elem.id!= match[3])
Return JQuery (). Find (selector);
Here are some optimizations for version 1.3, more concise
var ret = jQuery (Elem | | [] );
Ret.context = document;
Ret.selector = selector;
return ret;
}
} else
Use sizzle to process other CSS expressions, generate an instance, and return
return JQuery (context)-find (selector);
Handle function arguments, perform domready operations
else if (jquery.isfunction (selector))
return JQuery (document). Ready (selector);
Process the jquery object parameter and simply assign its two properties to the new instance
if (selector.selector && selector.context) {
This.selector = Selector.selector;
This.context = Selector.context;
}
Here are some extensions to version 1.3 that allow the collection of elements (Htmlcollection) and Node collections (nodelist)
The array of elements may have been converted by string, or it could have been transmitted directly by the user.
Return This.setarray (Jquery.isarray (selector) Selector:jQuery.makeArray (selector));
},

Published in 2010-01-13, version 1.4
Copy Code code as follows:

Init:function (Selector, context) {
var match, Elem, ret, doc;
Handles white-space strings, null,undefined arguments (new), returns a very pure instance
if (!selector) {
return this;
}
Process node parameters, add attributes directly to the new instance
if (Selector.nodetype) {
This.context = this[0] = selector;//optimization
This.length = 1;
return this;
}
Handling String parameters
if (typeof selector = = "string") {
Determines whether an HTML fragment or an ID
Match = quickexpr.exec (selector);
if (Match && (match[1] | | |!context)) {
If it is an HTML fragment
if (Match[1]) {
Get Document Object
Doc = (context? context.ownerdocument | | context:document);
If it's a single label, use document.createelement to create this node and put it in an array
ret = rsingletag.exec (selector);
if (ret) {
If followed by a pure JS object, add the corresponding property or style to this node
if (jquery.isplainobject (context)) {
selector = [Document.createelement (ret[1])];
JQuery.fn.attr.call (selector, context, true);
} else {
selector = [Doc.createelement (ret[1])];
}
} else {
To generate a node collection (nodelist) by buildfragment
ret = Buildfragment ([match[1]], [Doc]);
Selector = (ret.cacheable? Ret.fragment.cloneNode (True): ret.fragment). childnodes;
}
} else {
If it is an ID, find this element if it is found in an empty array
Elem = document.getElementById (match[2]);
if (elem) {
Process IE and Opera to confuse IDs with name Bugs
if (elem.id!== match[2]) {
return Rootjquery.find (selector);
}
Some optimizations have been made here, and the original is very silly to regenerate into a jquery instance
This.length = 1;
This[0] = Elem;
}
This.context = document;
This.selector = selector;
return this;
}
If the character is very simple tag Selector, that basically does not need to walk sizzle route, direct getelementsbytagname, very good optimization
else if (!context &&/^\w+$/.test (selector)) {
This.selector = selector;
This.context = document;
selector = document.getElementsByTagName (selector);
If the second argument does not exist or is a jquery object, use it or Rootjquery call find to locate the target node (take the Sizzle route)
else if (!context | | context.jquery) {
Return (Context | | rootjquery)-FIND (selector);
HANDLE: $ (expr, context)
(which is just equivalent to: $ (context). Find (expr)
} else {
If the second argument has been specified as an element node, the jquery object, take the sizzle route
return JQuery (context)-find (selector);
}
Processing function parameters, direct Domready
else if (jquery.isfunction (selector)) {
return Rootjquery.ready (selector);
}
Process the jquery object parameter and simply assign its two properties to the new instance
if (selector.selector!== undefined) {
This.selector = Selector.selector;
This.context = Selector.context;
}
Here's a little bit of modification, because Makearray can accept the second argument (can be an array or an array of classes, and then quite a merge operation)
return Jquery.isarray (selector)?
This.setarray (selector)://Internally using the Push method, quickly converts a normal object into a class array object
Jquery.makearray (selector, this);
},

followed by the popular 2010-02-13 release of the 1.42 edition
Copy Code code as follows:

Init:function (Selector, context) {
var match, Elem, ret, doc;
Process blank strings, null,undefined parameters
if (!selector) {
return this;
}
Handling node Parameters
if (Selector.nodetype) {
This.context = this[0] = selector;
This.length = 1;
return this;
}
Process body parameters (new)
if (selector = = "Body" &&!context) {
This.context = document;
This[0] = document.body;
This.selector = "Body";
This.length = 1;
return this;
}
Handle string parameters in seven different cases:
① single label, with object property bag---> Jquery.merge
② single label with no object property Package---> attr + jquery.merge
③ Complex HTML Fragment---> buildfragment + jquery.merge
The ④id selector is different from the ID of the element found---> getElementById + Sizzle + pushstack
⑤id selector with the same ID as the element found---> getElementById + simple Properties Add
⑥ Tag Selector---> getElementsByTagName + jquery.merge
⑦ Other CSS Expressions---> Sizzle + pushstack
if (typeof selector = = "string") {
Match = quickexpr.exec (selector);
if (Match && (match[1] | | |!context)) {
if (Match[1]) {
Doc = (context? context.ownerdocument | | context:document);
ret = rsingletag.exec (selector);
if (ret) {
if (jquery.isplainobject (context)) {
selector = [Document.createelement (ret[1])];
JQuery.fn.attr.call (selector, context, true);
} else {
selector = [Doc.createelement (ret[1])];
}
} else {
ret = Buildfragment ([match[1]], [Doc]);
Selector = (ret.cacheable? Ret.fragment.cloneNode (True): ret.fragment). childnodes;
}
Return Jquery.merge (this, selector);
} else {
Elem = document.getElementById (match[2]);
if (elem) {
if (elem.id!== match[2]) {
return Rootjquery.find (selector);
}
This.length = 1;
This[0] = Elem;
}
This.context = document;
This.selector = selector;
return this;
}
else if (!context &&/^\w+$/.test (selector)) {
This.selector = selector;
This.context = document;
selector = document.getElementsByTagName (selector);
Return Jquery.merge (this, selector);
else if (!context | | context.jquery) {
Return (Context | | rootjquery)-FIND (selector);
} else {
return JQuery (context)-find (selector);
}
Processing function parameters, direct Domready
else if (jquery.isfunction (selector)) {
return Rootjquery.ready (selector);
}
Handling jquery Object Parameters
if (selector.selector!== undefined) {
This.selector = Selector.selector;
This.context = Selector.context;
}
Whether an array or a class array (such as nodelist), use Jquery.makearray to add a new element to the instance
return Jquery.makearray (selector, this);
},

Another attached Makearray method and the merge method, the merge method is wonderful,
Copy Code code as follows:

Makearray:function (array, results) {
var ret = Results | | [];
if (array!= null) {
The window, strings (and functions) also have ' length '
The extra typeof function check is to prevent crashes
In Safari 2 (#3039)
if (Array.Length = null | | typeof array = = "string" | | | jquery.isfunction (array) | | (typeof array!== "function" && array.setinterval)) {
Push.call (ret, array);
} else {
Jquery.merge (ret, array);
}
}
return ret;
},
Merge:function (the second) {
var i = first.length, j = 0;
if (typeof second.length = = "Number") {
for (var L = second.length J < L; j + +) {
first[i++] = second[J];
}
} else {
while (Second[j]!== undefined) {
first[i++] = second[j + +];
}
}
First.length = i;
return A;
},

The 1.5 edition, released in 2011-01-23, had little to do with the init approach and 1.42: Only two changes were made:
Copy Code code as follows:

1.42
-ret = Buildfragment ([match[1]], [Doc]);
-selector = (ret.cacheable. Ret.fragment.cloneNode (True): ret.fragment). childnodes;
1.5
+ ret = jquery.buildfragment ([match[1]], [Doc]);
+ selector = (ret.cacheable jquery.clone (ret.fragment): ret.fragment). childnodes;
1.42
-Return JQuery (context). Find (selector);
1.5
+ Return This.constructor (context). Find (selector);/To stop generating new instances

The jquery1.6, which was released in 2011-05-02, changed little, only to make a more rigorous decision on the HTML fragment:
Copy Code code as follows:

Are we dealing with HTML string or a ID?
if (Selector.charat (0) = = "<" && Selector.charat (selector.length-1) = = ">" && selector.length >= 3) {
Assume that strings so start and end with <> are HTML and skip the Regex check
Match = [NULL, selector, NULL];
} else {
Match = quickexpr.exec (selector);
}

On the whole, jquery's constructors have done a perfectly good job of basically "change". But to ensure its efficient operation, we also need a bit of selector knowledge and understanding of the operation of the Buildfragment method, because these two are too common, but also the most performance-consuming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.