RequireJS Getting Started Guide

One of the most common JavaScript libraries today is RequireJS. Recently, I have used RequireJS for every project I have participated in, or I recommend adding RequireJS to them. In this article, I will describe what RequireJS is and some of its basic scenarios. Asynchronous module definition (A... SyntaxHighlight

Introduction
One of the most common JavaScript libraries today is RequireJS. Recently, I have used RequireJS for every project I have participated in, or I recommend adding RequireJS to them. In this article, I will describe what RequireJS is and some of its basic scenarios.

Asynchronous module definition (AMD)

When talking about RequireJS, you cannot bypass what the JavaScript module is and what AMD is.

The JavaScript module is only a code segment that complies with the Single Responsibility Principle. It exposes a public API. In today's JavaScript development, You can encapsulate many functions in the module, and in most projects, each module has its own file. This makes JavaScript developers a little sad because they need to constantly focus on the dependencies between modules and load these modules in a specific order. Otherwise, errors will occur during runtime.
 

When you want to load the JavaScript module, the script tag will be used. To load the dependent modules, you must first load the dependent modules and then load the dependencies. When using the script tag, you need to arrange their loading in this specific order, and the script loading is synchronized. The async and defer keywords can be used to make loading asynchronous, but the loading sequence may be lost during loading. Another option is to bundle all scripts together, but you still need to sort them in the correct order when bundling.

AMD is such a module definition, so that the module and its dependencies can be asynchronously loaded, but in the correct order.

 

CommonJS is an attempt to standardize the General JavaScript mode. It contains AMD definitions. I suggest you read this article first. In the next version of ECMAScript 6 JavaScript specification, there are normative definitions of the output, input, and module, which will become part of the JavaScript language, and this will not be too long. This is also about RequireJS.
 

RequireJS?
RequireJS is a Javascript file and module framework that can be downloaded from http://requirejs.org/. if you use Visual Studio, you can also obtain it through Nuget. It supports browsers and server environments like node. js. With RequireJS, you can read in sequence only the relevant dependent modules.

What RequireJS does is load the dependencies you define by using the script tag through the head. appendChild () function. After the dependency is loaded, RequireJS calculates the module-defined sequence and calls it in the correct order. This means that you only need to use a "root" to read all the functions you need, and then you only need to hand over the rest to RequireJS. To correctly use these functions, all modules you define must use the RequireJS API. Otherwise, it will not work as expected.
 

The RequireJS API exists in the namespace RequireJS created when requirejs is loaded. Its main APIs are the following three functions:

Define-This function allows you to create a module. Each module has a unique module ID, which is used for the runtime function of RequireJS. The define function is a global function and does not need to use the requirejs namespace.
Require-this function is used to read dependencies. It is also a global function and does not need to use the requirejs namespace.
Config-this function is used to configure RequireJS.
Later, we will teach you how to use these functions, but first let's first understand the loading process of RequireJS.
 

Data-main attributes
After you download RequireJS, the first thing you need to do is to understand how RequireJS starts to work. When RequireJS is loaded, it uses the data-main attribute to search for a script file (it should be the same as loading RequireJS using src ). Data-main needs to set a root path for all script files. According to this root path, RequireJS will load all relevant modules. The following script is an example of using data-main:

1