Shulou(Shulou.com)06/02 Report--

This article will explain in detail for you how to carry out the overall framework analysis of jQuery source code, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

The code structure of jQuery is attached first.

JS code

(function () {/ / jQuery variable definition var jQuery = function () {...}; / / jQuery prototype definition (including core methods) jQuery.fn = jQuery.prototype = {...}; / / doesn't it look strange? Very clever design. JQuery.fn.init.prototype = jQuery.fn; / / the extension function jQuery.extend = jQuery.fn.extend = function () {...} that provides jQuery static methods and object methods is described in detail later; / / there are several extension jQuery.extend ({...}) to jQuery static methods in turn / / there are several extensions to jQuery object methods in turn: jQuery.fn.extend ({...}); jQuery.support = (function () {...}) (); / / provide unified time management, which is used internally by jQuery, and is not open to jQuery.event = {...}; / Event is similar to Java's POJO class. The object that passes the event jQuery.Event = function (src, props) {...}; / / Sizzle selector, a framework that can be used independently. (function () {... JQuery.find = Sizzle;...}) ();. / / define the defined jQuery as the global variable window.jQuery = window.$ = jQuery;.}) ()

The structure is very clear, define a jQuery object, extend the jQuery object, assign it to window, and become a global variable. Introduce the following points:

1)。 An anonymous function that executes itself.

2)。 $(".") A formal call returns a jQuery.fn.init object.

3)。 The most common extend function in the framework.

one。 Self-execute anonymous functions.

Anyone with some basic knowledge of javascript should be aware of the benefits of self-executing anonymous functions. Js is a function scope. The variables defined in the function are local variables, which avoids too many global variables (jQuery has only two global variables, jQuery and $). Due to the closure attribute, although the self-execution of the function ends, the local functions and variables defined in the self-executing function can still be referenced by jQuery and $, which are defined as global variables, similar to private variables of Java. The benefits can be seen.

two。 $(".") A formal call returns a jQuery.fn.init object.

This is what I didn't understand most when I first looked at the source code.

Js code

Var jQuery = function (selector, context) {/ / The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init (selector, context, rootjQuery);} and jQuery.fn.init.prototype = jQuery.fn

To understand this, let's first look at the use of jQuery. JQuery uses chained calls (such as: $("# id"). Data ("xxx"), so you know that $("# id") returns a jQuery object. But the way to call is a function call. The problem becomes: the call returns the jQuery object as a function, and the constructor is init. Now let's focus on solving this problem:

The first thing that comes to mind is to return a jQuery object in a functional call.

Var jQuery = function (selector, context) {return new jQuery (selector, context);}

Dude, are you sure about this? The discerning person knows the serious problem at a glance, dead recursion!

Since we can not call itself, then we can think of another way: if we define the prototype of a function A, which is the same as the prototype of jQuery, then the object of An is exactly the same as the object generated by jQuery (javascript is prototype inheritance), and the constructor of An is defined as jQuery, isn't the above problem readily solved?

JS code

Var jQuery = function (selector, context) {return new A (selector, context);} var A = function () {if (this.init) {this.init ();}}; A.prototype = jQuery.prototype

This solves the above problem, because jQuery and A have the same prototype, so the generated objects all have the same method. But it still feels a little superfluous in the definition of A, doesn't it?

Since An is defined to return A's object, the init function can also generate an object (because there is no class in js, the defined function can be executed as a function, or it can be new into an object). Since you use init, then the init function will be executed automatically, and you don't have to call it anymore, wouldn't it be more convenient! So I saw the code we saw earlier.

There may also be a fn explanation, in fact, this fn has no special meaning, just a reference to jQuery.prototype, jQuery supports its own extended properties, which provides an external interface, jQuery.fn.extend () to add methods to the object, better than using jQuery.prototype.extend (). If you want to encapsulate it, you can literally understand that it is an extension to the function, rather than directly modifying the prototype. Friendly user interface.

Compared with the text, graphics is more intuitive, to quote the above to draw a picture, a better understanding:

In fact, I have another implementation that returns new jQuery.fn.init (selector, context, rootjQuery) objects:

Var jQuery = function (selector, context) {/ / if you call this with $("# id"), it is not jQuery. This returns the jQuery object if (! (this instanceof jQuery)) {return new jQuery (selector, context);} if (this.init) {this.init ();}} / / this line can be annotated / / jQuery.fn.init.prototype = jQuery.fn

This can be tested. I don't know if there are any other hidden problems. I haven't found it yet, so it can be regarded as a kind of realization. For your reference.

three。 The most visible extend function in the framework

There are large chunks of jQuery.extend ({...}) and jQuery.fn.extend ({...}) code in later paragraphs. Let's first explain the difference between the effect of this and.

Extend is inherited in java, and unlike an article I wrote before, it also uses the extend keyword. We all call that inheritance, but here I prefer to call it extension. Why? Inheritance produces a new class, but not here. The two functions here * are static methods to extend jQuery, while the second is the user's own method to extend the object. Static method? Object method? Let me explain here that there are 2 invocation forms in jQuery:

1) $.Ajax (...)

2) $("# id") .data ("xxx")

* this kind of call is called static call, which is similar to the static method of Java. Instead of generating an object, it is a class-level function. The $here is the equivalent of a namespace. We know that in previous js programming, if there were namespaces, we would do this:

Var ns = {}; ns.Ajax = function () {...}

So why is it that instead of an object, a function makes a namespace? In fact, everything is an object in js! Including functions are also objects (to say that Java is all objects, I think this sentence is actually more appropriate to describe js).

The second call I become an object call, because the .data () method is defined in the prototype and can only be called by new objects, so it becomes an object method.

Let's look at the code jQuery.extend = jQuery.fn.extend = function () {...}; this is even, that is, two points to the same function, how can we achieve different functions? This is what this does. When jQuery.extend is called, this points to the jQuery object (jQuery is a function and also an object!) So this is extended on jQuery When jQuery.fn.extend is called, this points to the fn object, while as seen by the Academy of Sciences above, jQuery.fn and jQuery.prototype point to the same object, and extending fn is the extension of the jQuery.prototype prototype object. What is added here is the prototype method, that is, the object method. So the extension functions in the above 2 are provided in jQuery's api.

On how to carry out the overall framework analysis of jQuery source code is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.