jquery related content: A simple analysis of jquery

Article Introduction: Simple analysis of the jquery principle, the small jacket that clawed the jquery.

Introduction

The LZ is still in the third chapter of the digestive system principle recently, so this part of the content LZ intends to precipitate again again write. This time the author and you to discuss a little front-end content, in fact, about jquery, a long time ago, LZ wrote a simple source analysis. Just began to write a blog, write relatively casual, directly to the source to paste up, although added a lot of comments, but still slightly rough.

This time LZ again to write, ready to slightly normative point to explore the relevant content of jquery.

The cloak of jquery

jquery is a lightweight JS framework that most people have heard of, and JQuery has a nickname because it hides itself by quietly wearing a cloak.

The following intercepts from the jquery source Fragment (function (window, undefined) {/* source content/}) (window);

Above this small piece of code from the 1.9.0 jquery source, it is a pollution-free JS plug-in standard writing, professional noun called closure. You can think of it simply as a function, unlike a normal function, this function has no name and executes immediately, just like the following, it pops up the string directly.

(Function (window, undefined) {alert ("Hello world!");}) (window);

As you can see, the direct effect of this writing is the equivalent of a string that we pop up directly. But the difference is, we will be inside the variable into the local variables, which not only can improve the speed of operation, more importantly, we are referencing the jquery js file, not because of the many variables in jquery, and other JS framework variable naming conflict. For this, let's take this little piece of code to illustrate.

var temp = "Hello world!"; (Function (window, undefined) {var temp = "Byebye world!";}) (window); Alert (temp);

The result of this code is hello rather than byebye, which means that the variable declaration in the closure does not pollute the outside global variable, and if we remove the closure, the end result will be Byebye, as follows.

var temp = "Hello world!"; /(Function (window, undefined) {var temp = "Byebye world!";/ /}) (window); Alert (temp);

From this can be seen, jquery's cloak is this layer closure, it is very important to a content, is to write the JS framework must know knowledge, it can help us to hide our temporary variables, reduce pollution.

jquery vest.

Just now we said that jquery has covered all the variables it declares, and the jquery and $ we normally use are really real global variables, where this comes from, the answer is in jquery's line of code, usually at the end of the file.

Window.jquery = window.$ = JQuery;

This statement exports the jquery object we defined in the closure to global variables jquery and $, so we can use jquery and $ directly externally. Windows is the default JS context, so binding objects to Windows is equivalent to becoming a global variable in the traditional sense, just like the effect of the following little piece of code.

var temp = "Hello world!"; (Function (window, undefined) {var temp = "Byebye world!"; window.temp = temp;}) (window); Alert (temp);

It is obvious that the result should be byebye, not hello. Because we exported the TEMP local variable as a global variable in the closure, we overwritten the global variable temp declared in the first row. As you can see, jquery exposes its little vest through the way it is exported.

jquery underwear.

Underwear protects our core organs, so it's very important. Then jquery's underwear is the same, but also the most core function, is the selector. And the selector is simple to understand, in fact, in the DOM document, looking for a DOM object tool.

First of all, we go into the jquery source, you can easily find the JQuery object statement, we will find that the original jquery object is the Init object.

JQuery = function (selector, context) {Return to New JQuery.fn.init (selector, context, rootjquery);}

Here appears jquery.fn such a thing, its origin can be found in the jquery source code, it actually represents the jquery object prototype.

Jquery.fn = Jquery.prototype;jquery.fn.init.prototype = Jquery.fn;

These two sentences, the first sentence of the JQuery object's prototype to the FN attribute, the second sentence of the JQuery object's prototype and assigned to the Init object prototype. That is, the Init object and jquery have the same prototype, so the Init object that we returned above has the same attributes and methods as the jquery object.

[1] [2] [3] Next page