Understanding and analysis of the overall architecture of jQuery_jquery

The overall structure of the jQuery script has the following form:

Copy code The code is as follows:

( function( window, undefined ) {
// Define a local copy of jQueryvar jQuery = function( selector, context
) { // The jQuery object is
actually just the init constructor
'enhanced' return new
jQuery.fn.init( selector, context ); },
// Expose jQuery to the global objectwindow.jQuery =
window.$ = jQuery;
})(window);

I don’t quite understand such a structure, and I haven’t done any in-depth research. I only know what He He calls

Technorati tags: JQuery,Javascript,Web front-end

The concept of js closure is related. I checked some information today and got some basics. understanding.
Actually, a global function is defined. The first bracket is an anonymous function, and the following bracket is the function call. It can be understood like this:

Copy the code The code is as follows:

var fun=function(window, undefined ){
... ...
}
fun(window);

The entire script is an anonymous function (let’s call it mainFn for now) ), the function starts executing when it is loaded. mainFn can receive two parameters, and only passes one parameter window during execution.

1. Explain the meaning of this writing in detail:
2. window function execution When the window is passed in, the window passed in is the global object (usually Window)
3. An attribute and window=this, and when passed into the mainFn function as its parameter, it will be stored in
4. In the calling object of mainFn. The strategy for finding variables in the prototype chain is (non-nested function): first find the object that calls
5., and then find the global object, so this makes the window used in the entire mainFn Search efficiency is higher
6. undefined Since the second parameter is not passed during execution, the value of variable undefined is undefined. Early version
7. The global object in this browser may not have the undefined attribute, so it cannot Use it directly. Usually avoid
8. The way to write this problem is window.undefined = window.undefined

Then at the end, let jQuery, the most important object in the jQuery library, become a property of the window object, and Can be abbreviated as "$".

Other supplementary information:
JQuery is an excellent javascript library. I recently used it to write javascript and took a look at the source code.
Let’s look at the overall and global view. Almost all jQuery source code is in the following code:

Copy the code The code is as follows :

(function() {

//...

})();

Inside the first bracket It is an anonymous function. The second bracket means that the code in the first bracket will be executed immediately.
First of all, understand that there is no namespace in JavaScript. To ensure that your JavaScript functions and objects do not conflict with others, a JavaScript trick is used here: all your JavaScript functions and objects are defined in an anonymous function. , ensuring the valid scope of the defined functions and objects, and playing the role of a namespace. Since the scope is in this anonymous function, how can it be used by others? Let’s look at its code below:

var jQuery = window.jQuery = function(selector, context) {
//……
};

Here, jQuery, the most important object in the jQuery library, becomes a property of the window object, so that jQuery can be used in other places just like document (document is also a property of window). Friends who have used jQuery may be surprised - I don't use jQuery objects, I always use $. Yes, that’s jQuery’s object of the same name:

window.$ = jQuery;

Now you understand.

The structure of this library is like this:

Copy the code The code is as follows:

1. (function(window, undefined){
2. var document = window.document;
3. var jQuery = ...
4. ...
5. .. .
6. })(window);

(function(window, undefined){ var document = window.document; var jQuery = ... ... ... })(window) ;

전체 스크립트는 익명 함수입니다(지금은 mainFn이라고 부르겠습니다). mainFn은 두 개의 매개변수를 수신할 수 있으며 실행 중에 하나의 매개변수 창만 전달합니다.
1. 자세히 쓰는 의미:
2. 윈도우 함수가 실행되면 윈도우가 전달됩니다. 전달된 윈도우는 전역 객체(보통 Window)입니다.
3. mainFn 함수에 전달됨 매개변수로 사용되면
의 호출 개체에 저장됩니다. 4. 프로토타입 체인에서 변수를 찾는 전략은 (비중첩 함수)입니다. 먼저 호출하는 5. 개체를 찾은 다음 전역 개체를 찾으므로 전체 mainFn에서 사용되는 창을 검색하는 것이 더 효율적입니다.
6. 정의되지 않음 실행 중에 두 번째 매개 변수가 전달되지 않으므로 변수 값이 정의되지 않습니다. 초기 버전
7. 브라우저의 전역 객체에는 정의되지 않은 속성이 없을 수 있으므로 일반적으로 이 문제를 작성하는 방법은
8입니다. .한정되지 않은