Shulou(Shulou.com)06/02 Report--

How to parse the source code of jQuery framework, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

For jQuery only stay in the application is sad, in the process of doing the project, jquery source code once became the bottleneck of their own development, using nearly a day to conduct a thorough macro analysis, a lot of gains, sharing here.

It is explained here that the version of the jQuery framework studied is 1.7.2.

Macroscopically, the jQuery framework can be divided into three steps--

1. Define jQuery variables

two。 Expand jQuery variables and jQuery.fn variables (populate methods using jQuery and jQuery.fn namespaces)

3. Put jQuery globally

The details are as follows--

/ * 1. Define the jQuery variable * var jQuery = (function () {* * / / define a local variable jQuery * var jQuery = function (selector, context) {* / / this is the beginning of all jQuery selectors * return new jQuery.fn.init (selector, context, rootjQuery) *}, * / then define other variables, the most important is the modification of the jQuery function prototype * / / both are pointers and point to the same starting position, but the subsequent expansion of the two objects Makes the location domain that the two can point to be different * jQuery.fn = jQuery.prototype = {* constructor: jQuery, * init: function () {...}, / / defines the start of all jQuery selectors * / / also defines other basic methods For example, * size: function () {...}, * toArray: function () {...}, * get: function () {...}, *. * port: [] .sort, * splice: [] .splice *}; * * / / a pair of init function reset prototypes defined above * jQuery.fn.init.prototype = jQuery.fn The extension of jQuery prototype is realized * jQuery.extend = jQuery.fn.extend = function () {*. * * / / finish defining the extend method under the jQuery namespace You can directly extend the jQuery prototype * jQuery.extend ({* noConflict: function (deep) {.} * / / A series of methods. *}) * * / authenticate constructor statements. * / / authenticate browser statements. * / other. * / / to return this local variable jQuery object Assign to the peripheral jQuery variable * return jQuery * *) (); * * 2. Expand jQuery variables and jQuery.fn variables (using jQuery and jQuery.fn namespaces for method filling) * two core methods-- * jQuery.extend ({...}) * jQuery.fn.extend ({...}) * * 3. Put jQuery globally * in the code * *-- * window.jQuery = window.$ = jQuery; * * /

Select three examples for in-depth study--

(function ($) {/ * Test-jquery selector method (initialization), Test-append method. The process is parsed as follows-- * 1 > $('# test', 'body') call jQuery function (var jQuery = function (selector, context) {return new jQuery.fn.init (selector, context, rootjQuery) }) * initialize the selector selector (i.e. # test), that is, (jQuery.fn.init ('# test', 'body', [# document])) * find context (i.e. body), then initialize the body Then call the $(context) .find (selector) method (that is, $('body'). Find (' body')) * 2 > for the append method: the jQuery.fn.domManip method is called (this method calls the jQuery.buildFragment method), and eventually the appendChild method of the dom element of selector is called for dom operation * / $('# test', 'body'). Append (' implant content') / * Test-extend the jQuery object itself, that is, to add a new function to the jQuery namespace * if you look at the source code, you will find that: * it loops the key-value value in the passed object parameters and extends the jQuery function object Its key value is the key value of the passed parameter (min and max) * / $.extend ({min: function (a, b) {return a)

B? A: B;}}); $.min (2Jue 3); / / 2 / * Test-extends the set of jQuery elements to provide new methods (usually used to make plug-ins). * if you look at the source code, you will find that: * it is the same as the calling method of jQuery.extend, except that it extends the namespace jQuery.fn * / $.fn.extend ({check: function () {return this.each (function () {this.checked = true;})) }, uncheck: function () {return this.each (function () {this.checked = false;});}}) / * search for jQuery variables, as long as the jQuery.js framework is introduced before this code snippet. In this framework, the jQuery variable is placed in the window object * the source code is as follows: * / / Expose jQuery to the global object * window.jQuery = window.$ = jQuery / / this sentence is put in the * * sentence in the framework. Before this sentence, methods and attributes are filled in the local object variable jQuery (namespace) in the framework * /}) (jQuery) / * required prerequisite knowledge-- * 1.JS execution order * 1 > pre-resolution * 2 > execution * 2. Function scope * 1 > this (in-depth understanding of function call pattern) * 2 > variable retrieval (in-depth understanding of variable object VO) * 3 > module mode (in-depth understanding of closures) * 3. Function prototype inherits * / / * * can learn * 1 from the architecture of the source code. For reused variables, re-assign them in advance and set them to local variables, which reduces the process of finding variables and improves performance, such as * var document = window.document, * navigator = window.navigator, * location = _ window.location; * 2. Single variable centralized declaration * in each function execution domain, declare all the variables needed by the function at the top of the function domain, which is conducive to variable management, improve performance, and maintain * 3. The vast majority of function definitions are in the form of function expressions rather than function declarations, which is good for code maintenance and is worth using for reference. Code organization mode * 1 > on the whole, the deep use of namespaces to manage your own code greatly improves the maintainability of the code, which should be used for reference * 2 > using the module pattern to fully divide which variables and functions are private. Use namespaces to fully divide which variables and functions are public. * 3 > functional modularization: instead of extending the required functions to the jQuery or jQuery.fn namespace at one time, it makes full use of the idea of modularization. * 4 > each function in the source code is placed in a namespace in the form of key-value (where value is a function), rather than a simple tile of functional function. * increase the maintainability of the code, which is worth using for reference. * / / * study the role of jquery framework: * 1. When working on a project based on the jquery framework, the methods can be used reasonably according to the desired performance. * for example, if there are two methods that can accomplish the same function, we certainly have to choose the one with high performance * 2. Understand the overall architecture, for the specific implementation of the detailed method, according to the application specific analysis * 3. For future research on jquery-based frameworks (such as jquery.validate.js or jquery.ptTimeSelect.js), it is no longer a difficulty * 4. Remember the coding style of the jquery framework, it is good to compare with other excellent frameworks and absorb its essence * / the answer to the question on how to analyze the source code of the jQuery framework is shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.