JQuery framework introduction _ jquery

JQuery has been used for a while, but some APIs cannot be implemented. I have shared my learning process and gains with jQuery for a while, but I cannot figure out the implementation of Some APIs. I will share my learning process and gains with you by referring to the source code of relevant materials.

The following describes the simplified code and focuses on the implementation of jQuery.> _ <~

// Anonymously execute the function immediately //. prevent global space pollution //. optional protection of internal variables (function (window, undefined) {// reason for setting the second parameter undefined without passing: // when var undefined =, undefined will be tampered with // set the second parameter without passing it, then undefined will be reset back to the original value function jQuery (sel) {return new jQuery. prototype. init (sel);} jQuery. prototype = {constructor: jQuery, init: function (sel) {if (typeof sel = 'string') {var that = this; // inside jQuery, Sizzle is used, use querySelectorAll to replace var nodeList = document. querySelectorAll (sel); Array. prototype. forEach. call (nodeList, function (val, I) {that [I] = val;}) this. selector = sel; this. length = nodeList. length ;}} jQuery. prototype. init. prototype = jQuery. prototype; // expose jQuery: bind jQuery to the window. $ = jQuery;}) (window );

--------------------------

JQuery immediately executes the function anonymously at the beginning to wrap it internally and expose it to the outside world in Row 3;

The so-called anonymous immediate function execution means that the function is anonymous (with no name) and called immediately after definition;

When we call $ ("p") externally, we actually call the internal jQuery ("p ");

(Function (window, undefined) {// internal variable // exposes jQuery: binds jQuery to window. $ = jQuery;}) (window); $ ("p ")

--------------------------

Well, the next step is a little complicated. The following code mainly implements mutual reference:

Take $ ('P') as an example:

The Code in line 2nd shows that jQuery uses jQuery. prototype. init to instantiate the jQuery object, but this brings about a problem:

The instantiated object can only access variables under init, but not jQuery. prototype (Apis provided by jQuery are bound to this object ).

Therefore, you can add 21st lines of code and point init. prototype to jQuery. prototype.

In this way, the jQuery. prototype can be accessed in the init scope by using init for instantiation.

Function jQuery (sel) {return new jQuery. prototype. init (sel);} jQuery. prototype = {constructor: jQuery, init: function (sel) {if (typeof sel = 'string') {var that = this; // inside jQuery, Sizzle is used, use querySelectorAll to replace var nodeList = document. querySelectorAll (sel); Array. prototype. forEach. call (nodeList, function (val, I) {that [I] = val;}) this. selector = sel; this. length = nodeList. length ;}} jQuery. prototype. init. prototype = jQuery. prototype;

Why does jQuery. prototype. init be used to instantiate objects without directly using jQuery functions?

Assume that the jQuery function is used to instantiate an object, so that references between objects can indeed be simplified to jQuery --> jQuery. prototype.

But the call will become cumbersome: new $ ('P'), so Based on this consideration (speculation (⊙ 0 ⊙), we can use more complex implementations internally to simplify the call.

--------------------------

Okay. Finally, let's take a look at the implementation of init. It also simplifies the code and only implements the most common situation.

JQuery processes the obtained nodeList into an array (for later use) and mounts some variables, such as length and selector.

Init: function (sel) {if (typeof sel = 'string') {var that = this; // inside jQuery, Sizzle is used, use querySelectorAll to replace var nodeList = document. querySelectorAll (sel); Array. prototype. forEach. call (nodeList, function (val, I) {that [I] = val;}) this. selector = sel; this. length = nodeList. length ;}}

This article ends now. The next article will introduce you to the jQuery chain call and show knowledge analysis. For more information, please pay attention to the script home website!