Preliminary discussion on the use of Requirejs and the usage of module definition define function

Requirejs file Download, select the version you need to

Requirejs using instance Step1 to define an HTML file

We need to define an HTML file named requirehtml.html.
Under File content

<! DOCTYPE html>"">"Utf-8"> <meta name="Viewport"Content="Width=device-width, initial-scale=1.0"> <title></title>introduction of require file,../refers to the parent directory of the directory where the current requirehtml.html file resides. Here is the require.js file under the Lib folder that references the parent directory of the directory where the requirehtml.html file resides.
The Data-main property must exist, and it specifies the main module file. data-The default suffix for the value of the main property is. js. Here is the main.js file with the same directory level as requirehtml.html-<script src=".. /lib/require.js"data-main="Main"></script></body>Step2 defining the contents of a main.js file
Contents of the Main.js file:
/* can accept an array object, which specifies the path of the module as a string, a module is a JS file, as specified today, meaning that the Showa.js file and the Showb.js file and the Main.js file are located in the same directory,
If the Showb.js file is located in the Main.js file and a directory of the JS file below the "SHOWB" will be replaced by "LIB/SHOWB". Next, the Require function asynchronously loads the corresponding module in the order of the array. This order is also the parameter order in which the callback function is passed in.  */require (["showA","showb"], function (SHOWA,SHOWB) {    showa.sa ();    SHOWB.SB ();});
Definition of module –define function Showa module definition
define (function () {    return  ({        sa:function () {        console.log ("  ShowA");     });
Definition of the SHOWB module
define (function () {    return  {        sb:function () {            console.log ("  showb");}}    );
According to the specification of the AMD (asynchronous module define) asynchronous module we should use the Define function to define a module.
The Define function should return an object when it accepts only one function as an object exported by the module. The passed-In function object forms a closure because the properties of the returned object contain object references within the function object.
If we define a module that references other modules to write this
// Each member of the passed-in array is the path of the dependent module define ([Modulea,moduleb,...],function (Modulea,moduleb) {});
Note: Using the exports export module will cause an error.
Benefits of using Requirejs
1. Resolves a problem that causes the page to hang when loading a script while the page is loading.
The problem arises because the page load script pauses the rendering of the current page to load the script and will not continue rendering the page until the script has finished loading. When the script is large, it causes the page to be unresponsive because the load script causes the page to hang.
Requirejs avoids this problem because the module is loaded asynchronously.
2. When multiple JS files on the page depend on each other, use the script tag to refer to the order of the files, that is, the dependent files should be in front. The Require function and the Define function solve this problem by specifying the dependent module and ensuring that the module is loaded before invoking the callback function.
Use of Require.config
We can call the Require.config function in the defined Main.js header and accept an option object to configure the path of the reference module.
Demo
require.config ({    paths:{        baseUrl:""      // Specifies the URL of the reference module below the base URL is relative to this URL, You can omit this        key // Pass in the value of the Require function array parameter as the key value        Modulea: ""      // path. You can use the local (.. (The usage is all possible), or a file on another host (CDN is available)    });
Index.js was introduced into the index.html file. The following code is written in the Index.js file.

       require.config ({    paths: {    　　　　　　"Module""module/ Complexmodule"     }    });       Require (['module'], function (Module) {});
Reprinted: 78324275
Preliminary discussion on the use of Requirejs and the usage of module definition define function