Overall jquery source code architecture, jquery source code Architecture

Overall jquery source code architecture, jquery source code Architecture
1. provide external interfaces

JQuery is provided externally.

// You can use jQuery or $ to find jQuery (function (window, undefined) {// () defines some variables and functions jQuery = function () {}; window. jQuery = window. $ = jQuery; // external interface}) (window)

JQuery itself is a constructor, including many static methods (Tool methods) and instance methods. Static methods are more underlying.

Function jQuery () {}// jQuery is a constructor // method in the jQuery prototype, that is, the instance method jQuery. fn = jQuery. prototype = {extend: function () {}, // * extends the core methods of other instantiated object Methods: ready: function () {}, ajaxStart: function () {}, ajaxStop: function () {}, ajaxComplete: function () {}, ajaxError: function () {}, ajaxSuccess: function (){}...}; jQuery. fn. init. prototype = jQuery. fn; // jQuery static method, that is, the tool method jQuery. extend = function () {}; jQuery. init = function (){};... // extend method, used to extend jQuery or jQuery. fnjQuery. extend = jQuery. fn. extend = function (){//...};

Return new jQuery. fn. init (selector, context, rootjQuery );

$ ('# Casper') is the same as new $ ('# casper. I personally think that the reason for the design here is to reduce the trouble of writing a bunch of new data, and avoid the developer accidentally missing the strange bug caused by new. Of course, the bad thing is that the Code is a bit messy, which is also a feature of jQuery source code.

JQuery. fn = jQuery. prototype

There is nothing to mention. jQuery. prototype is the prototype of jQuery. Here we use jQuery. fn to replace jQuery. prototype, just to reduce the number of characters, which is usually modified when writing plug-ins.

JQuery. fn. init. prototype = jQuery. fn

A very well-rounded statement. As mentioned above, $ ('# casper') actually returns a jQuery. fn. init object. Therefore, the purpose here is to make the methods on jQuery. fn become the prototype method of the jQuery. fn. init object. This statement should confuse many people who are new to jQuery source code, including me (= _ =). You can try it.jQuery.fn.init.prototype.init.prototype.init...If you want to write it all the time.

Ii. jQuery framework

Version: 2.0.3

// You can use jQuery or $ to find jQuery (function (window, undefined) {(96,283) defines some variables and functions jQuery = function) add methods and attributes to the JQ object (285,347) extend: Inheritance Method of JQ (349,817) jQuery. extend (): extends some tool methods (877,2856) Sizzle: implementation of complex selectors (2880,3042) Callbacks: callback object: unified management of functions (3043,3183) Deferred: latency object: unified asynchronous Management (3184,3295) support: function detection (3308, 3652) data (): data cache (3553,20.7) queue (): queue Management (queue 3, 4299) attr () prop () val () addClass (), etc.: operations on element attributes (,) on () trigger (): methods related to event operations (,) DOM operations: add, delete, get, wrap, DOM filtering (,) css (): style operations () submitted data and ajax (): ajax () load () getJson () animate (): method of motion (8585, 8792) offset (): Method of position and size (8804,8821) JQ supports modular mode (8826) window. jQuery = window. $ = jQuery; // external interface}) (window)View Code

 

Iii. Introduction to module functions 1. jquery is object-oriented

The general usage is as follows:

    $("#div1").css();    $("#div1").html();

The execution result of $ ('# div') is an object that calls a method through an object.

Source code:

Var declares a variable jQuery function expression.

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

Therefore, jQuery itself is a function. The returned value is a new object. Call some methods on the object.

2. extend

The Inheritance Method of JQ. The Code subsequently added is mounted to JQ through extend. Writing them together is not conducive to code maintenance and later extension.

Extension of the plug-in.

 

Refer:

Http://www.cnblogs.com/chyingp/archive/2013/05/30/jquery-core.html

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.