Analysis of jQuery framework and constructor, analysis of jquery framework

Analysis of jQuery framework and constructor, analysis of jquery framework

This is an analysis of the text of the jQuery framework. Readers must meet the following requirements:

1. Very familiar with HTML

2. Familiar with javascript syntax

3. Familiar with javascript Object-Oriented Knowledge

4. Familiar with jQuery framework

Let's get down to the truth!

JQuery object initialization is written in anonymous functions.

Like this:

(Function () {alert ("jQuery framework analysis ")})();

The first bracket declares a function, and the second bracket executes the function. That is to say, the jQuery framework has done some things during page loading (this anonymous function has been executed ). These tasks allow us to get page elements by using $ ("# yourId") or $ (". yourClass"), and encapsulate the obtained elements into jQuery objects.

How do anonymous functions implement these functions?

First, the Framework defines two core objects.

JQuery = window. jQuery = window. $ = function (selector, context ){}

One is jQuery.

One is $

Both objects point to a function.

This function is the entry when we use the $ () or jQuery () method. This method returns a jQuery. fn. init (selector, context); is actually a jQuery object.

What kind of object is a jQuery object?

The jQuery object is actually a javascript array.

This array object contains 125 methods and 4 attributes

The four attributes are

Current jQuery Framework Version Number of jQuery

Length indicates the number of elements in the array object.

Generally, context is directed to the HtmlDocument object.

The content of the selector is as follows: # yourId or. YourClass, etc.

If you get the jQuery object through the $ ("# yourId") method, and your page has only one element with the id yourId, then $ ("# yourId ") [0] is the HTML element and document. getElementById ("yourId") obtains the same element.

How is a jQuery object constructed?

This object is just mentioned.

JQuery = window. jQuery = window. $ = function (selector, context ){}

The framework not only defines a method for this object, but also defines its prototype)

JQueryjQuery. fn = jQuery. prototype = {// json object here}

The prototype is defined through a json object.

For example

{

Init: function (selector, context) {// method body },

JQuery: "1.3.2", // attribute

Size: function () {// method body },

//......

}

Four attributes of the 125 method mentioned above are partially defined in this json object. The first method in this json object is the init method, that is, jQuery in the entry method. fn. init (selector, context); this method works with a regular expression object to construct a jQuery object

The regular expression is:

QuickExpr =/^ [^ <] * (<(. | \ S) +>) [^>] * $ | ^ # ([\ w-] +) $/

The implementation logic of the init method is described below.

This method has two parameters

One is selector (selector)

One is context)

Selector is the variable we pass in with $ ("# yourId") or jQuery (". yourClass ").

This parameter may not be a string or a variable of other forms.

We will introduce it later.

The context parameter is rarely used when jQuery is used.

Note that both parameters are reflected in the returned jQuery object (displayed with two attributes with the same name)

Next, let's take a look at the internal implementation logic of this method body.

// If there is no selector or the selector is empty, assign the document object to him.
Selector = selector | document;
// If the selector parameter is a dom element, the jQuery object is directly returned.
// You Can $ (document. getElementById ("allen") to encapsulate your elements into jQuery objects.
If (selector. nodeType ){
This [0] = selector;
This. length = 1;
This. context = selector;
Return this;
}
// Typeof gets the object type. It is highly efficient to use three equal signs without type conversion. Two equal signs have type conversion by default.
If (typeof selector = "string "){
// The regular expression quickExpr we mentioned above is used here
// Match is actually an array
// The third element is the text that matches the regular expression.
// The first element is the text that matches the 1st sub-expressions of the regular expression (if any)
// The 2nd elements are the texts matching the 2nd subexpressions (if any)
// The 3rd elements are the texts matching the 3rd subexpressions (if any). Here is the element ID, which does not contain #
Var match = quickExpr.exe c (selector );
// The regular expression matches the content and the match [1] is not empty or the context is empty.
// When match [1] is not null, selector is an HTML string, that is, you can use $ ("
Xland
") Wrap the object into a jQuery object
// When the context is empty, the selector is the page element ID.
If (match & (match [1] |! Context )){
// The selector is an html string.
If (match [1]) {
Selector = jQuery. clean ([match [1], context );}
// The selector is ID.
Else {
// Obtain the element
Var elem = document. getElementById (match [3]);
// If this element is obtained but the element's ID attribute is not match [3], jump to the branch. What is the work done in the branch?
If (elem & elem. id! = Match [3]) {
Return jQuery (). find (selector );}
// Encapsulate the page elements into jQuery objects
// If elem is empty, an empty array is passed in. How does the framework handle this empty array?
// If it is not empty, jump into the if (selector. nodeType) branch we mentioned earlier and construct the jQuery object
Var ret = jQuery (elem | []);
// Set the context attribute of the jQuery object
Ret. context = document;
// Set the selector attribute of the jQuery object
Ret. selector = selector;
// Return this object to the caller
Return ret;
}

So far

Var obj = $ ("# yourId ");

The initial work of constructing the jQuery object is complete.

$ What is it?-details about the $ symbol of jQuery and the init Function

JQuery is now the most popular Javascript framework. $ is the most common symbol among them and has been deeply imprinted on jQuery. Next, I will thoroughly analyze the hidden secrets behind this symbol. JQuery is efficient and refined, especially the simplification of DOM Element Object operations. It frees front-end programmers from a lot of redundant code, greatly improving development efficiency! Compatibility with multiple browsers also maximizes the programmer's ability to get rid of various bugs. The $ symbol is short for the element selector. It was first used by the Prototype library and abbreviated as getElementById, jQuery follows this concept and carries forward it, making $ the most distinctive feature of jQuery. In jQuery, what is the $ symbol? Anyone familiar with jQuery should know that almost all jQuery operations start with the $ symbol. When used as an element selector, the operation result returns a jQuery object. Now let's look at the main code of the jQuery class constructor. The constructor var jQuery = (function () {// creates a jQuery object, provides a unified entrance for all jQuery methods, avoiding the hassle of recording var jQuery = function (selector, context) {// jQuery's constructor object, and CALLS jQuery. fn. init method // returns jQuery. fn. return new jQuery. fn. init (selector, context, rootjQuery );},..... // define the jQuery prototype. fn points to jQuery. prototype object jQuery. fn = jQuery. prototype = {// specify the properties of the constructor. fn. init constructor: JQuery, init: function (selector, context, rootjQuery ){.....},......}...... // return the jQuery variable and define the global variable window. jQuery and window. $ points to jQuery return (window. jQuery = window. $ = jQuery) ;}) (); from the above jQuery body structure, we can see that when the first execution is complete, the global variables $ and jQuery, all point to the var jQuery = function (selector, context) {} function. Here, we can conclude that $ is the alias of jQuery and actually calls jQuery. fn. init. Let's take a look at the var jQuery = function (selector, context) {} constructor. Why does it not directly return jQuery objects? Instead, what about calling another method? If an object is directly returned, it is inconvenient to use the new jQuery object every time. The new operation is directly encapsulated in the jQuery constructor, the instantiation operation is simplified. At the same time, jQuery unifies the interface through jQuery or $ symbol, facilitating code writing, simplifying it, and improving efficiency. How is the jQuery class constructed? In fact, jQuery can be directly called in various parameter forms. fn. init's "Trojan", jQuery's real constructor, we can completely understand the init source code/* All the results of searching or generating elements, encapsulated as jQuery object array to return. */init: function (selector, context, r ...... remaining full text>

$ What is it?-details about the $ symbol of jQuery and the init Function

JQuery is now the most popular Javascript framework. $ is the most common symbol among them and has been deeply imprinted on jQuery. Next, I will thoroughly analyze the hidden secrets behind this symbol. JQuery is efficient and refined, especially the simplification of DOM Element Object operations. It frees front-end programmers from a lot of redundant code, greatly improving development efficiency! Compatibility with multiple browsers also maximizes the programmer's ability to get rid of various bugs. The $ symbol is short for the element selector. It was first used by the Prototype library and abbreviated as getElementById, jQuery follows this concept and carries forward it, making $ the most distinctive feature of jQuery. In jQuery, what is the $ symbol? Anyone familiar with jQuery should know that almost all jQuery operations start with the $ symbol. When used as an element selector, the operation result returns a jQuery object. Now let's look at the main code of the jQuery class constructor. The constructor var jQuery = (function () {// creates a jQuery object, provides a unified entrance for all jQuery methods, avoiding the hassle of recording var jQuery = function (selector, context) {// jQuery's constructor object, and CALLS jQuery. fn. init method // returns jQuery. fn. return new jQuery. fn. init (selector, context, rootjQuery );},..... // define the jQuery prototype. fn points to jQuery. prototype object jQuery. fn = jQuery. prototype = {// specify the properties of the constructor. fn. init constructor: JQuery, init: function (selector, context, rootjQuery ){.....},......}...... // return the jQuery variable and define the global variable window. jQuery and window. $ points to jQuery return (window. jQuery = window. $ = jQuery) ;}) (); from the above jQuery body structure, we can see that when the first execution is complete, the global variables $ and jQuery, all point to the var jQuery = function (selector, context) {} function. Here, we can conclude that $ is the alias of jQuery and actually calls jQuery. fn. init. Let's take a look at the var jQuery = function (selector, context) {} constructor. Why does it not directly return jQuery objects? Instead, what about calling another method? If an object is directly returned, it is inconvenient to use the new jQuery object every time. The new operation is directly encapsulated in the jQuery constructor, the instantiation operation is simplified. At the same time, jQuery unifies the interface through jQuery or $ symbol, facilitating code writing, simplifying it, and improving efficiency. How is the jQuery class constructed? In fact, jQuery can be directly called in various parameter forms. fn. init's "Trojan", jQuery's real constructor, we can completely understand the init source code/* All the results of searching or generating elements, encapsulated as jQuery object array to return. */init: function (selector, context, r ...... remaining full text>