Jquery1.2.6 source code analysis

Source: Internet
Author: User

Jquery is a very good JS library. Compared with many JS class libraries such as prototype, Yui, and mootools, it is a powerful tool, starting from the practical point of view of web development, aside from some other things that are not practical in 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 the development efficiency of web systems. Therefore, it can be said that it is one of the best JS auxiliary class libraries in Web application development. Most developers are abandoning prototype and choosing jquery as their JS library for web development.

If developers only know the simple usage method in the document, but do not understand the running principle and internal mechanism of jquery, they will certainly encounter many problems when using jquery. Some of these problems are jquery bugs. Most of them are caused by improper use. The simple instructions in this document are difficult to solve. When debugging A jquery-based web application, you often need to track the jquery object and analyze its running status to find out the cause of the error.

If you have requirements on the page running performance and efficiency of Web applications, we should better understand the running mechanism and core source code. But unlike other class libraries, jquery source code is a bit obscure and hard to understand. This is the reason for source code analysis. It allows all readers who use jquery to quickly get started with jquery's source code and apply it to developers.

Jquery has rich network resources, but Baidu has been around for a long time and it is difficult to find a document that fully analyzes jquery source code. It is jquery's developer. John Resi's "Pro JavaScript techniques" involves the analysis of jquery's source code, but it mainly refers to the use of JavaScript. That book does not allow us to fully understand jquery's 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.

 

2008-08-29 PRK

    • Jquery1.2.6.rar
    • Description: jquery1.2.6 source code analysis and source code file.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.