JQuery source code-Global Architecture Design

JQuery source code-Global Architecture Design

// Design jQuery as a whole using anonymous function self-execution, so that jQuery can be immediately executed after being referenced (function (window, undefined) {var jQuery = function (selector, context) {return new jQuery. fn. init (selector, context, rootjQuery) ;}; jQuery. fn. init. prototype = jQuery. fn; // For details, please refer to Question 4./* assign the jQuery prototype pointer to the fn function pointer of jQuery, And then mount the jQuery Prototype Method to jQuery. in the fn function pointer scope, the advantage is jQuery. fn pointers are relatively easy to use elsewhere and do not affect the orientation of jQuery prototype pointers. Note: In JavaScript, the function name can be understood as a pointer. If the function name is followed by parentheses, it can be understood as a function object, which is easier to understand, because native JavaScript often has the problem of function pointer pointing to settings. */JQuery. fn = jQuery. prototype = {constructor: jQuery, length: 0, size: function () {}, each: function (callback, args) {} // the above methods can be used as long as the object selected by jQuery is used.};/* 1. mount the jQuery object to the $ object of the window and expose the jQuery interface. 2. the jQuery object becomes an attribute under the window. You can call it at will. 3. jQuery */window can be used with the $ symbol for ease of use. jQuery = window. $ = jQuery;}) (window );

1. What is anonymous function self-execution?

You can simply define such a function in JavaScript and then execute it yourself. After the following code page is loaded, a dialog box is displayed.

(function(){    alert('Hello jQuery!');})();

If the above code is executed automatically, the writing method of anonymous function self-execution is as follows:(Function () {// function body}) (/* Passing parameters */);The code in the function body is automatically executed, and the passing parameters are used by the function. If you still don't understand it, refer to the link and here.

2. Why does jQuery pass window objects in anonymous function self-execution?

In fact, the window object can be directly called in anonymous functions. However, in JavaScript, based on the prototype chain principle, the window searching at the top of the object is complicated, objects are all the variables closest to them. If the window object is not passed, you will find the window object at the outer layer. If the window object is passed, this window will significantly increase the search speed. (What is prototype chain)

3. Why do I pass the undefined parameter in the Self-executed method body of an anonymous function?

In JavaScript, undefined is neither a keyword nor an object. The following code:

Var undefined = 99;/* results of various browsers: chrome: 'undefined' ff: ''IE9.10: 'undefined' IE8.7.6: '99' */alert (undefined );

The purpose of passing undefined is to use it as a local variable to prevent external modifications. This is because undefined varies in different versions of the browser and has compatibility issues, this problem can be solved by passing in parameters as local variables.

4. jQuery Core Architecture

How can we understand the following code?

// Define a local copy of jQueryjQuery = function( selector, context ) {   // The jQuery object is actually just the init constructor 'enhanced'   return new jQuery.fn.init( selector, context, rootjQuery );},

I think the following code is easier to elaborate on this issue:

function MyObject(){}MyObject.prototype.init = function(){}MyObject.prototype.css = function(){}var myObject = new MyObject();myObject.init();myObject.css();

The traditional method above is very troublesome for object calls. See the following code:

Function jQuery () {return new jQuery. prototype. init () ;}// define the function jQuery under the prototype. prototype. init = function(){}jQuery.prototype.css = function () {}// modify the pointer of the jQuery object prototype pointer to jQuery. prototype. init. prototype = jQuery. prototype; // after modification, the formula for tuning is simpler than jquery().css ();

Assign the reference of jQuery prototype to the prototype of the init Initialization Method in jQuery, and mount the reference of the method under jQuery. init () method.