https://www.youtube.com/watch?v=qeMFEz_ufZc
http://stackoverflow.com/questions/7194784/analysing-the-jquery-source
http://www.programering.com/a/MDMxkDNwATg.html
1, Summary
JQuery is a very good Js library, and prototype, YUI, Mootools etc. compared to many Js class library, it Zoupian Jian Feng, starting from the web development and the practical point of view, in addition to see but not throw some practical things, provide a small library for developers. Due to its short, simple and convenient to use, relatively efficient performance. Many developers choose Jquery to do web development assistance.
Development using jQuery, we often encounter many problems, but the jQuery code is quite obscure, difficult to understand, when the development problems, cannot read the source code, do not know how to debug.
John Resig, The Jquery developers, wrote two books, Pro Javascript Techniques can be regarded as the analysis of Jquery source code. The analysis of the source code, from basic to compare the current library has a great help. The other one is jQuery.in.Action. This book is mainly about how to use Jquery. All two books explain profound theories in simple language. There is a book edited by a pulling JqueryAPI Chinese document. The three is of great help for the master Jquery.
2, init()Analysis
In the analysis of the init (), we have to understand the design concept of jQuery.
Jquery is standing in the developer's point of view to consider the issue, when using Js, most of the time are the operation of the Dom elements, such as modify the properties of elements, amendment, modification of CSS. But the Dom elements, such as getElementsByTag, may take to the collection of Dom elements, and happen to be the set of all the elements have the same operation. If only one element, can be seen as only one element in the collection.
So long as the set of operations, will operate on each element of the collection. JQuery is based on the set and provides a practical method for many, contains the required daily development function. For this collection, we called the jQuery object.
We can through the $(params) or jQuery (params) to generate a Jquery object. In the Jquery document provides four ways: jQuery (expression, [context]), jQuery (HTML), jQuery (elements), jQuery (callback) four kinds of Google jQuery object mode. In fact, the parameters of the Jquery can be any of the elements, such as air parameters, can constitute a jQuery object.
Then jQuery is how to achieve it?
①②③④⑤⑥⑦⑧⑨⑩
var jQuery = window.jQuery = window.$ = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context); ①
};
You can see that actually is new init(selector, context):
init : function(selector, context) {
selector = selector || document;// Determination of selector
// The first case of Handle $(DOMElement) of a single Dom element, ignore context
if (selector.nodeType) { ②
this[0] = selector;
this.length = 1;
return this;
}
if (typeof selector == "string") {//Selector string ③
var match = quickExpr.exec(selector);
if (match && (match[1] || !context)) {
if (match[1])// Second kinds of treatment$(html) -> $(array) ④
selector = jQuery.clean([match[1]], context);
else {// Third cases: HANDLE: $("#id") // processing$("#id")
var elem = document.getElementById(match[3]);
if (elem) {
// IE returns the name=id elements, if so, on the document.find(s)
if (elem.id != match[3]) ⑤
return jQuery().find(selector);
// Build a new jQuery(elem)
return jQuery(elem); ⑥
}
selector = [];
}
} else
// Fourth kinds of circumstances: Processing$(expr, [context])==$(content).find(expr)
return jQuery(context).find(selector); ⑦
} else if (jQuery.isFunction(selector)) ⑧ // Fifth cases: $(function) seven Shortcut for document ready
return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);
// Sixth kinds of circumstances: Processing$(elements)
return this.setArray(jQuery.makeArray(selector)); ⑨
},
The above code can be seen $(XX) or Jquery (XX) object is not the real jQuery function generated, but the jQuery.fn.init function generated object. Also is the jQuery object inheritance is the prototype of the jQuery.fn.init. jQuery.fn = jQuery.prototype={..}. We basically do not have to new jQuery (XX), but jQuery (XX), is the use of new jQuery (XX), Mr. into object jQuery function, the inheritance in the prototype, object returned is jQuery.fn.init function generation. And the jQuery function also abandoned. Visible to the jQuery.prototype method for adding has little significance. Also can be seen by new jQuery (XX) less efficient. JQuery.fn.init is through the jQuery.fn.init.prototype = jQuery.fn; to get. In the extended jQuery, as long as the related function of extend to jQuery.fn can be.
JQuery.fn.init is responsible for the parameters of the transmission is analyzed and then generate jQuery objects. The first parameter is divided into four cases:
Type
Explain
Dom Element
The first parameter is the Dom element, do not have second parameters. Directly to the collection of new generation Dom element of a jQuery object. Returns the jQuery object. Construction of jQuery object.
string
The first parameter is the string of three cases:
1, Tag string HTML, $(HTML) $(-> array), the optional second parameter.
Implementation of selector = jQuery.clean ([match[1]], context);. The statement is a hteml string into an array of DOM objects. Then return the Array type.
2, The string is #id$(id)
First, through the VaR elem = document.getElementById (match[3]); elem, as did not take selector = []; to perform a Array type returns an empty collection of jQuery objects.
Such as found by return elem, jQuery (elem); to generate jQuery objects, this is
Returns the Dom type of Element jQuery objects.
3, Compatible with selector string CSS1-3 syntax, second parameters are optional.
Implementation of return jQuery(context).find(selector);. The statement is the first implementation of jQuery(context). We can see that the context second parameters can be of any value, can be a form of collective. After find (selector) jQuery (context) is found in all DOM elements have the collection of DOM elements selector expression, constructing a new jQuery object, and returns.
#ID in fact, and this way is a unified, single out is to improve the performance of.
Fn
The first parameter is a function of. No second parameters. Is the $(document).Ready (FN) of the abbreviation, its returnjQuery (document) [jQuery.fn.ready? "Ready": "load"] (selector) is the implementation of the code. This statement first execute jQuery (document), it is once again the newjQuery.fn.init function, to generate a jQuery object (element is docume
Posted by Christy at July 18, 2014 - 10:03 AM