JQuery source code analysis and jquery source code analysis

JQuery source code analysis and jquery source code analysis

One time I was writing jquery plug-ins, I found my js water deep and I was very comfortable with myself. Then we gradually discovered that JavaScript contains some common knowledge points such as prototype, closure, and scope.

 

First, the main structure of jquery source code

The following are some notes about jquery source code analysis.

1 (function (window) {2 var jQuery = function (select) {3 // privatefunc (); 4 return new jQuery. fn. init (select); 5 // a new object must be added here (this points to the init object), otherwise return jQuery. fn. in init (select); this points to jQuery. fn, while jQuery. fn is actually a set of 6} 7 8 jQuery that defines many methods. test = function () {// static method 9 console. log ('call test method'); 10} 11 12 var privatefunc = function () {// internal method, which cannot be called outside. You need to make external calls and jquery's practices: window. privatefunc = privatefunc; this is also closed Package 13 console. log (this) 14 console. log ('call privatefunc method '); 15} 16 17 jQuery. fn = jQuery. prototype = {18 init: function (select) {19 console. log (this) 20 var _ this = this; 21 if (! Select) {22 return this; 23} 24 _ this. ele = document.doc umentElement. querySelectorAll (select); 25 _ this. length = _ this. ele. length; 26 return _ this; 27}, 28 show: function () {29 if (this. length = 0) {30 return; 31} 32 for (var I = 0; I <this. length; I ++) {33 this. ele [I]. style. display = 'block'; 34} 35 console. log ('call show method') 36 return this; 37}, 38 hide: function () {39 if (this. length = 0) {40 return; 41} 42 for (v Ar I = 0; I <this. length; I ++) {43 this. ele [I]. style. display = 'none'; 44} 45 console. log ('call hide method') 46 return this; 47}, 48 click: function () {49 console. log ('call click method') 50 return this; 51}, 52 each: function (fn) {53 for (var I = 0; I <this. length; I ++) {54 fn. call (this. ele [I], I, this. ele [I]) 55} 56}, 57 morefunc: function () {58 59} 60 61} 62 63 jQuery. fn. init. prototype = jQuery. fn; 64 65 window. jQue Ry = jQuery; // assign jQuery to window. jQuery, a global variable. In this way, you can directly access the jQuery function 66 67}) (window, undefined)

Next I will analyze several questions from the beginning.

1. What is jQuery?

Usually $ ('div ') returns new jQuery. fn. the init (selector, context) object, that is, the init function object, where the dom object array, length, and jquery instance method of the div label are queried.

　　

 

2. What is the difference between jQuery. fn and jQuery?

JQuery. fn is a set of methods. fn. init. prototype = jQuery. fn, jQuery. fn. init contains all the jQuery instance methods. fn is all the instance methods of jQuery.

JQuery. fn. init. prototype = jQuery. prototype = jQuery. fn

 

3. Why does jQuery call jQuery. fn. init for instantiation?

JQuery initialization can be $ ('div '), new $ ('div '). To facilitate initialization through $ ('div '), you need to return new jQuery. fn. init (select) in the constructor to implement it skillfully.

JQuery. fn. init has all the jquery instance methods.

For example, if you directly return this or new jQuery () in the jQuery constructor, it is obvious that this cannot be implemented.

 

4. Questions

The variable jQuery. fn is always confusing. I don't know if I can change it to jQueryFn. Maybe I want to provide jQuery. prototype when writing the plug-in.

JQuery. fn. plugin = plugin;