Learn programming ideas from jQuery

1. How to distinguish the environment running JS?

Let’s review a few points:

1. What are the environments in which YOU can run JS, and what are their features?
2. CommonJS versus ES6Module

A runnable JS environment

By differentiating the environment we mean: differentiating where the JS code is running

Currently, the main environments that can run JS are: browser, WebView, Node and Webpack.

Features that run JS in a browser

• A window object
• ES6Module specification is supported, CommonJS specification is not supported

What are the common browser kernels?

Features that run JS inside a node

• No window object

• CommonJS specification is supported, ES6Module specification is not supported

  When we talk about Node, it is not a programming language, but a node environment installed on the server side, using JS to write some background logic, and then by Node to run.

Features to run JS in webView

This running environment is mainly applied in Hybrid App development. The shelf of Native App is used to nest Web App (HTML5 page) inside. JS in this kind of project is run in webView, essentially using webKit rendering engine to parse and run JS, its characteristics are the same as the browser.

Features that run JS inside webpack

• There is a window object

• It supports both CommonJS and ES6Module specifications

  Webpack is based on Node to package JS code, and finally put the packed JS code to the browser to run. It supports both CommonJS and ES6Module specifications. Conversion between the two specifications is also supported.

Simple distinction between CommonJS specification and ES6Module specification

CommonJS specification

• Import with: require
• Exports: module.exports

ES6Module

• Export: export & export default
• Import: the import

How is environment differentiated in jQuery?

• JQuery official website
• JQuery versionThe jQuery JavaScript Library v3.6.0

First, let’s fold the jQuery code to look at jQuery from the outermost layer.

It’s not hard to see that jQuery is essentially a self-executing function.

It passes two arguments to the anonymous function before calling its own. Received by the global and Factory parameters of anonymous functions.

Determines whether window objects exist in the environment

Let’s look at the first argument passed to Global.

typeof window! = ="undefined" ? window : this
Copy the code

The purpose of this code is to use Typeof to detect the presence of a Window object

When typeof is used to detect an undeclared variable, no error is reported and only “undefined” is returned.

The Window object is a global object in browsers, WebViews, and Webpacks, whereas node has no Window object.

typeof window ! == “undefined” indicates that a window object exists in the runtime environment, so the window object is passed to the global parameter. Otherwise, if there is no window object, we pass this to the global parameter to represent the current module.

We can also conclude that we can run JS code without window objects, which is run in node environment.

Core method Factory

Look again at the argument passed to the anonymous function’s second parameter factory, which is a function. It’s a long, long function.

This function is the core method of JQuery. To make it easier to call it factory, this method takes two parameters: window and noGlobal.

Anonymous function execution

The anonymous function receives the two arguments passed and begins execution.

Take a look at the chart below:

The first line at the top of the anonymous function reads:

"use strict";  // Enable strict mode
Copy the code

Next up is an if… else… Condition judgment, as shown in the figure:

As you can see, the factory method is executed only if certain conditions are met.

So what are the conditions?

Look at the if condition

if (typeof module= = ="object" && typeof module.exports === "object")...Copy the code

Exports must exist both module objects and module.exports.

Assuming that the if condition is met, we enter the code block to execute the IF statement.

Module. exports is a statement that assigns a value to module.exports, assigning the result of a trinary operation to module.exports.

Gloabl is either a window object or a this object. Document is only available in the window object.

If this condition is met, further determine the environment with the Window object. Executes the factory method and assigns the result of its execution to module.exports. When we execute the Factory method, we pass two arguments, the first being global (that is, the window object) and the second being a Boolean value true.

A function is assigned to module.exports if the criteria for trinary operations are not met.

The code for this is as follows:

function (w) {
    if(! w.document) {throw new Error("jQuery requires a window with a document");
    }
    return factory(w);
};
Copy the code

Assuming that the if condition is not satisfied, we enter the code block that executes the else statement. The Factory method is executed and the global (window) object is passed to the first parameter of the Factory method.

Ha ha, a little confused, a little confused, a simple thought.

Module and module.exports are exports to CommonJS. These two objects exist only if the CommonJS specification is supported, but not if it is not. Under the premise of supporting CommonJS specification, then carry out triadic operation. Check whether global points to window by checking whether document exists in the global object. This differentiates whether the runtime environment is node or Webpack. = supports the CommonJS specification and webPack has window objects. Module. exports () {/ / module. Exports () {/ / module. Exports () {/ / module. = supports the CommonJS specification and node does not have window objects. At this point, assigning a function to module.exports that the Node environment calls will throw an error.Copy the code