1. A sudden whim of jQuery. 1. jQuery's whim

1. A sudden whim of jQuery. 1. jQuery's whim
Cause

As the first phase of the ELE. Me retail project came to an end, it was a temporary relief from the slot field where I worked overtime. So I wanted to do something, looking at the js library of the project, I found jQuery lying in the corner. I thought it was a pity that I did not finish reading the source code intermittently, so I made up my mind to make up for this regret.

Reading Method

I downloaded jQuery 3.2.1 with a brief glance. There are more than 10 thousand lines. Due to the too many source code, I was afraid that I could see a mess at the end, so I used the method of reading and deleting a little bit, the static functions without coupling are preferred, so the reading structure is not prepared in advance. If a friend is reading this article, I can also use my methods to read it, it may be clearer. If you are new to the frontend, it is recommended that you read "js elevation" and master the basic concepts and methods of js.

Start 1. jQuery Structure

The outermost layer of jQuery is an immediate execution function. Before es6's formal modularization method is available, almost all js library functions use this method to define global variables for themselves, using the closure principle of js. Js immediately executes this function when loading jQuery at the beginning, and then uses the closure principle to store jQuery itself in the memory, so that the jQuery object can be accessed globally.

JQuery adopted the strictest rigorous mode at the beginning to make the code more standardized, which will reduce the chance of errors in the code.

"use strict"

 

When talking about the structure of jQuery, it is necessary to talk about the differences between the 3.0 + version and the old version. Direct:

If you compare the current jQuery code with the previous version, you will find that the structure layer has changed a lot. The outermost layer of jQuery in the old version does not have such a multi-layer structure, just an immediate execution of the function, and then the function finally enters a unique variable window. At that time, the simple structure was that the jQuery library was only applied in the browser, so the global object would only be Windows, with the rapid development of the front-end, nodejs and different modular specifications have emerged, and jQuery has also kept pace with the times and added compatibility solutions in this regard. At the end of the function execution:

typeof window !== "undefined"? window : this

This is used to determine whether the global variables passed in during function initialization come from the browser window. If yes, the window is passed in. If not, the unknown global parameters are passed in. The subsequent functions are all the methods defined in jQuery.

The top layer of the jQuery initialization function has a judgment:

typeof module === "object" && typeof module.exports === "object" 

This is to identify whether the module is from something similar to the CommonJS specification, where the partition module. exports is an object. In CommonJS, it is similar to module. exports. addX = addX. The CommonJS specification is used in nodejs. You can see that jQuery's initialization parameters are different based on whether the CommonJS specification is available.

Normally, there is no second parameter when the browser comes in. What is this parameter?

Pull the jQuery source code to the bottom and you will find such a function at the end, which is detailed in the comment, this parameter is used to determine whether to bind the jQuery and $ keywords to the global window of the browser.