Jquery core source code analysis

Jquery Is a very good JS Library, and Prototype, Yui, and mootools And many other JS Compared with the class library, it is far from Web From the practical perspective of development Lib It provides developers with beautiful, short, and concise class libraries. It is easy to use, rich in documents, and has high performance and can greatly improve Web System development efficiency. So it can be said that Web Best in Application Development JS One of the auxiliary class libraries. Most developers are abandoning Prototype And select Jquery For them Web Developed JS Library.

If developers only know the simple usage methods in the document, they do not understand Jquery In use Jquery You will certainly encounter many problems. Some of these problems are: Jquery Of Bug . Most of them are caused by improper use. The simple instructions in this document are difficult to solve. After debugging Jquery Of Web In most cases Jquery The object analyzes its running status to find out the cause of the error.

IfWebIf the page running performance and efficiency of the application are required, we should understand its operating mechanism and core source code. HoweverJqueryUnlike other class libraries, the source code is a bit obscure and hard to understand. This is the reason for source code analysis.JqueryQuick StartJquerySource code, and be applied in development.

Jquery Rich network resources, Baidu After a long time, it is difficult to find the type of in-depth analysis. Jquery Source code. Yes Jquery Developers, John Resi Of 《 Pro JavaScript Techniques Involved Jquery Source code analysis, but it mainly refers Javascript . That book does not give us a thorough understanding. Jquery Source code.

 

The reason for writing this source code analysis is actually very simple. jquery is often used in the work and has to analyze its source code. I put the source code of the analysis on the blog. Its title is jquery core source code analysis. As a result, some netizens commented that they were playing the title party. As a result, there are still many people who want to fully understand jquery's core.Code.

From what you can understand to what you can write. I found that I had a qualitative improvement. However, due to the limited level, there are inevitable errors in the analysis process. Please kindly advise. But it is best to show your mercy. If you have any questions, go to blog: jljlpch.javaeye.com to access and comment. The package source code is attached to the attachment.

The most difficult part of source code analysis is not what you can understand. If you write all the analyses in the source file, I think a lot of people will stop looking at a lot of lines. It is difficult for someone to analyze the source code line by line. How to organically combine the source code and concatenate a line is the biggest headache of this tutorial.
The highest level of reading is accumulation. The same is true for source code analysis. For lines of jquery source code, how do we know exactly what functions are in? What functions are used in? In this way, we have to reorganize all functions in an organic way, thinking about the main purpose of jquery and our own understanding of Js. I make jquery thin into three words: Query --> manipulate --> Expand.

Jquery is a very compact Lib. Its main purpose is to operate DOM elements. So where is the DOM element?
Go to the DOM tree. This is query. $ (). Jquery is a query process. We can enlarge the query range. It is not only the CSS selector found in the Dom, but also the DOM element found in the HTML fragments, the next step is the direct Dom element (SET ). $ () Is built from here.
The query process has not been completed yet. Because these result sets do not necessarily meet our requirements, we need to filter them. Operations on arrays are required. This involves the features of the class array of jquery objects. We can put together the functions related to these arrays for analysis.

When the final set of requirements is formed, we need to complete what we really want to do and operate the DOM elements in the set.
How? What are the operations? Is it true that the attribute, class, style, CSS, and event of DOM elements are operated?
Details:
1. We can regard attribute, class, and style as attribute operations and Custom Attributes of expando. This involves jquery. Data.
2. Content of the DOM element. What is content. Innerhtml is. All childnodes is the same, and value can also be calculated. For content operations, there are append, insert, forward, and back inserts, internal forward and back inserts. Of course, the clone and remove operations cannot be missing.
3. CSS can be separately divided into one piece in the DOM element for analysis. The operations on CSS are not the operations on height, width, innerheight, innerwidth, out (height, widith), the position (Position, offset), display or not of elements. This is the operation on CSS.
4. event is also part of an element operation. This part has nothing but addevent, fireevent, removeevent, and domready.
5. Ajax fills the element in the content from the server. Is it true that the most commonly used function is load? For getscript, getjson, and so on, it is all based on jquery. Ajax functions.
6. FX can be seen as a CSS operation. But it is higher than CSS. For FX, the basic usage is show, hide, slide (Down, up), and fade (In, out. Regardless of the usage, it is based on the length of time mapped to the corresponding ratio of the attribute values of element CSS. An animation is formed when the setinterval interval is used for running. This is the animate () function. The origin of all effects.

Think about jquery as simple as that. Of course, no matter what tutorial is useless if you do not perform your own analysis.

In fact, query --> manipulate is a surface object. Another high-level one is expand. This involves the architecture and design of a Lib.

We can interpret the JS lib architecture from the source code perspective.
Apart from extend, a lib must take great effort to consider its performance.
Consider its memory usage.
This is an analysis from the perspective of designing jquery.

I thought for a long time, but this part has not been written into the current source code analysis.