jquery Source---read "uqery technology Insider, in-depth analysis of jquery architecture design and implementation principles"

The first two months the project team was particularly busy, bought a "juqery Technology insider, in-depth analysis of jquery architecture design and implementation principle" has been sleeping; into the August project finally TR5 Point, can be a breath; The book has finally had time to read. The following month I will continue to read a few pages a day, and continue to write a few nondescript technical blog, talk about their experience and so on.

First evaluation of this book, I would like to buy "sharp jquery", but the electronic version turned, feel a bit of foundation; just look for it on the Internet, finally saw this---"Juqery technology Insider, in-depth analysis of jquery architecture design and implementation principles", a look at the author is Ali Daniel, Publishing time is January 14, feel, should be ruthless good, at least the author compared cattle, speak something more new. Oh ah. No nonsense, start to get to the point.

The first jquery overall architecture.

As we all know, jquery is the industry's most popular JS library (note, some people say is the framework, I do not agree, just feel that jquery has not reached the support front-end design and structure of the height; don't quarrel with me, you have to say is the framework, I also recognize). Some people pretend that the jquery API is very refined and elegant; I would like to say that I dare not speak from a technical point of view; don't be so obscure as to describe such an elegant and literary word. You say the design is clever, the structure is reasonable, easy to get started, not to knot. All right, I'm not spraying, go ahead. The whole module can be divided into three parts, the entrance module, the bottom support module and the function module. I drew a picture, as follows. 650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/45/56/wKiom1PneFXB83otAAZhQJez6_g486.jpg "title=" Jquerymain2.jpg "alt=" Wkiom1pnefxb83otaazhqjez6_g486.jpg "/>

The whole structure is summed up in the diagram. The source schema is as follows:

(Function (window, undefined) {//Construct jquery object var jquery = function (selector, context) {return new Jquery.fn.    Init (selector, context, rootjquery); }//tool function utilities//asynchronous queue deferred//Browser test support//data cache data//Queue queue//properties Operation attribute//Event handling event//selector sizzle//DOM Traversal//DOM action//CSS action//Asynchronous Request ajax//Animation//coordinates, size, size window.jquery = window.$ = JQuery;}) (window);

Because the design is more complex, here is not introduced, to the specific source code implementation, in the introduction of principles and use of skills and so on.

Open the Source Library, and all the code is wrapped in an anonymous function expression that executes immediately;

function (window,undefined) {var jquery=...;//1//..........window.jquery=window.$=jquery;//2}) (window);

The benefits of doing this include the following points:

1, created a special function scope (do not understand hurriedly go to see scope chain, execution environment, activity object related knowledge, not explained here); So in your own execution environment, there will be no conflicts with existing functions, methods, variables (mainly the same name), and third-party libraries, in order to ensure that your code does not charge other interference , while not destroying and polluting the global environment and other execution environment variables.

2,window.jquery=window.$=jquery; The variable jquery is added to the Window object, adds jquery to the top-most global execution environment in the scope of the Window object, becomes a global variable, adds to the last end of the scope chain of the other value execution environment, and ensures that other execution environments can access and use jquery.

3, passing in the Window object, passing the window object as a parameter to the inside of the calling anonymous function, and entering the execution environment, guarantees quick access to the Window object (no need to go down the scope chain to the top-level scope), and is optimized when compressing the code.

4, passing in the parameter undefined, on the one hand, as with the incoming window object, can shorten the scope when finding undefined, and optimize when compressing the code. More importantly, ensure that the value of the parameter undefined is undefined, preventing it from being overridden. 、

End

The first article, so, the overall structure is a bit complicated, I also look at one side to write a blog, we found the wrong place, a lot of suggestions, and common progress. Next, I will introduce the source code of the jquery constructor, as well as the implementation principles and some of the more obscure logic inside.

This article from the "7439523" blog, reproduced please contact the author!