The Simple Analysis of jquery principles allows you to open a small jquery coat.

Introduction recently, LZ is still in the third chapter of the digest system principle. Therefore, LZ intends to settle down and write it again. This LZ will discuss some front-end content with you. In fact, for jquery, LZ wrote a simple source code analysis long ago. At that time, I just started to write a blog, and I wrote an introduction. Recently, LZ is still in the third chapter of the digest system principle. Therefore, LZ intends to write this part again. This LZ will discuss some front-end content with you. In fact, for jquery, LZ wrote a simple source code analysis long ago. At that time, I started to write a blog, but it was relatively casual. I directly pasted the source code. Although I added a lot of comments, it would still be slightly rough. This time, LZ wrote it again to discuss jquery-related content in a more standardized manner. Jquery's coat jquery is a lightweight JS framework. I believe most people have heard of it. The reason why jquery has such a name is that it has quietly put on a coat, hide yourself. // The following screenshot is taken from the jquery source code snippet (function (window, undefined) {/* Source Code content */}) (window). The above code is from the jquery source code in 1.9.0, it is a standard writing method of a pollution-free JS plug-in. It is called a closure. You can simply think of it as a function. Unlike a common function, this function has no name and will be executed immediately. As shown below, a string will pop up directly. (Function (window, undefined) {alert ("Hello World! ") ;}) (Window); you can see the direct effect of this write, which is equivalent to a string popped up directly. But the difference is that we change the variables into local variables, which not only improves the running speed, but more importantly, when we reference jquery JS files, there will not be too many variables in jquery, but conflicts with the variable names in other JS frameworks. The following code is used to describe this point. Var temp = "Hello World! "; (Function (window, undefined) {var temp =" ByeBye World! ";}) (Window); alert (temp); the running result of this Code is Hello instead of ByeBye. That is to say, the variable declaration in the closure does not pollute the global variables outside, if we remove the closure, the final result will be ByeBye, as shown below. Var temp = "Hello World! "; // (Function (window, undefined) {var temp =" ByeBye World! "; //}) (Window); alert (temp); it can be seen that jquery's coat is the closure of this layer, which is a very important content, it is a required knowledge for writing JS frameworks. It can help us hide our temporary variables and reduce pollution. Jquery's vest was just mentioned. jquery covered all the variables we declared with a coat. The Jquery and $ variables we used at ordinary times are actually global variables, this is where it comes from. The answer lies in a line of jquery code, usually at the end of the file. Window. jQuery = window. $ = jQuery; this statement exports the jQuery objects defined in the closure as global variables jQuery and $, so that we can directly use jQuery and $ externally. Window is the default JS Context Environment. Therefore, binding an object to a window is equivalent to a global variable in the traditional sense, just like the effect of the following code. Var temp = "Hello World! "; (Function (window, undefined) {var temp =" ByeBye World! "; Window. temp = temp;}) (window); alert (temp); obviously, the result should be ByeBye, Not Hello. Because we export the temp local variable as the global variable in the closure, so as to overwrite the global variable temp declared in the first line. It can be seen that jquery exposes its vest through export. Jquery underpants protect our core organs, so they are very important. So jquery's underwear is also the core function, namely the selector. In simple understanding, the selector is actually a tool for finding a DOM object in the DOM document. First, we will go to the jquery source code to easily find the jquery object declaration. After reading it, we will find that our jquery object is the init object. JQuery = function (selector, context) {return new jQuery. fn. init (selector, context, rootjQuery);} jQuery is displayed here. the origin of fn can be found in the jquery source code. It actually represents the prototype of the jQuery object. JQuery. fn = jQuery. prototype; jQuery. fn. init. prototype = jQuery. fn; In the first sentence, the prototype of the jQuery object is assigned to the fn attribute, and in the second sentence, the prototype of the jQuery object is assigned to the prototype of the init object. That is to say, the init object has the same prototype as jQuery. Therefore, the init object returned above has the same attributes and methods as the jQuery object. We don't want to go into the logic and Implementation of the init method, but we need to know that jQuery actually adds a DOM object to a package, the sizzle selector is responsible for finding a DOM object or several DOM objects. Its official address is http://sizzlejs.com/ If you are interested, you can carefully study the CSS-based selector. The following is the attributes and methods of a jQuery object intercepted by LZ. The method is not mentioned here. For attributes, we only need to focus on one attribute, that is, the [0] attribute, [0] is actually a native DOM object. In many cases, we need to use the [0] attribute when switching between jQuery and DOM objects. It can also be seen that the jQuery object is actually mainly to put the native DOM object in the position of [0], and adds a series of simple methods to it. The attribute of this index 0 can be viewed from a short code. The following is the source code of the DOMElement object as the selector in the init method. // Handle $ (DOMElement) if (selector. nodeType) {/* you can see that the DOM object is assigned to the [0] Location of the jQuery object */this. context = this [0] = selector; this. length = 1; return this;} can be found in jquery source code. It is used to process the input selection parameter as a DOM object. It can be seen that the position of the jQuery object index 0 and the context attribute are obviously assigned to the DOM object. The Code not only illustrates this, but also demonstrates that $ (DOMElement) can be used to convert a DOM object to a jQuery object, so as to obtain a simple method of jQuery object through conversion. Jquery's thigh is very sexy and coveted by men. To say that jquery's sexiest and most desirable is its ready method, never tell LZ that you have used jquery but have never used the $ (function () {}) or ready method. Here, LZ is not going to show you the implementation principle of jquery, because it is complicated, and our purpose here is not to analyze the source code for the 1.1 point, but to introduce the implementation principle of jquery. We can simply implement the effects of the ready method similar to jquery. Its implementation principle is to maintain a Function Array and constantly judge whether the DOM has been loaded, if loading is complete, all functions in the array will be triggered. Following this idea, LZ provides a small example that has been written a long time ago to show it to you. (Function (window, undefined) {var jQuery = {isReady: false, // indicates whether the file is loaded. readyList: [], // function Sequence // onload event implements ready: function (fn) {// if it is a function, add it to the function sequence if (fn & typeof fn = 'function') {jQuery. readyList. push (fn);} // The document is loaded and the function sequence is executed. If (jQuery. isReady) {for (var I = 0; I <jQuery. readyList. length; I ++) {fn = jQuery. readyList [I]; jQuery. callback (fn) ;}return jQuery ;}, // callback: function (fn) {fn. call (document, jQuery) ;}}; // export the window object. $ = window. jQuery = jQuery; // determine whether the loading is complete var top = false; try {top = window. frameElement = null & document.doc umentElement;} catch (e) {}if (top & top. doScroll) {(function doScrollC Heck () {try {top. doScroll ("left"); jQuery. isReady = true; jQuery. ready () ;}catch (e) {setTimeout (doScrollCheck, 50) ;}) () ;}} (window )); this code is extracted by LZ from the previous example. Its implementation logic is very simple, but it can achieve the effect of jQuery's ready method, if you are interested, join this JS file to test the effect. Note that the browser compatibility is not considered above. The code used to judge whether the file is loaded is for IE, so it can only be tested in IE. Simple comments have been embedded in the code, so LZ won't explain much here. All the source code can be found in jquery source code analysis in another LZ article, if you are interested, you can also see that it simulates a very simple jquery. With jquery's arm, we can still live without our arm, or even write programs with our feet, but we have to admit that with our arm, we will be even more powerful. For jquery, the extend method is its arm. We can still use jquery without it, but with it, we will be more comfortable. Here, LZ does not analyze the extend method in detail. If you are interested, refer to the jquery Extension function in an article long ago by LZ. There are more detailed analyses and explanations. Here, LZ only briefly describes the common methods of two extend methods. 1. jQuery. fn. extend can be used to extend the jQuery object. jQuery. extend can be used to extend jQuery. The former is similar to adding a common method to the class, and the latter is similar to adding a static method to the class. 2. If two extend methods have two object-type parameters, the following parameter object attributes will be extended to the first parameter object, you can add a boolean parameter to control whether to copy objects in depth. Summary This simple analysis of jquery is so far. Because LZ is not focused on the development of previous sections, jquery has always been a suitable method. However, as long as Web development is still in progress, the front-end is inseparable, so we cannot give up the front-end.