Use RequireJS to optimize the JavaScript reference code

RequireJS is a great way to improve the speed and quality of your javascript code while making it easier to read and maintain.

In this article, I'll introduce you to RequireJS and how you can use it. We'll talk about introducing files and defining modules, and we'll even touch on optimization.

Simply put, ES8en.js is a script loader that allows you to separate your javascript code into files and modules while managing the dependencies between each module.

The introduction of the file

Before we can start using RequireJS, we need to download its library and Asynchronous Module Definition (AMD) file. Then link to the require.js file in the document header, as follows:

 
<script src="require.js" data-main="main"></script>

You might ask what the data-ES27en attribute is. Using RequireJS means that when you call require at the head of the document, you will also link to the main file of your javascript application, which in this case is ES31en.js (note that RequireJS automatically adds.js to the end of the file name).

In the ES37en.js file, you need to configure RequireJS, load the module, and define an base path to use when the file is imported.

Require function

RequireJS USES a simple require function to import the script. In this example, RequireJS imports JQuery:

require(["jquery"], function($) {
 $( ' #mydiv " ).html( ' Hello this is RequireJS talking " );
});

One advantage of the RequireJS is that it is very easy to read. In the above code, you can see that the require function first grabs the file named jquery.js and then passes in $to an anonymous function as a parameter. When this action is complete, you can use the JQuery code as you wish.

Now, the jQuery library for jquery.js files will not normally be included in your code 1. Like most plug-ins and frameworks, we usually choose to import them from their GitHub or Google CDN, so we need to configure their true path:

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

This means that you can import jquery via Google (note that I used the name "jquery" in this example, you can use whatever name you like)

Definition module

Using AMD mode means that our code can be structured as modules; These modules implement certain functions in the application. You can put two lines of code or 100 lines of code in a module, depending on what you want to do with the module.

To define a module, we can write:

define(function () {
 function add (x,y) {
  return x + y;
 }
});

Inside of this, I define an add function with no dependencies, but if this function requires jquery to work properly, the definition code might look like this:

define([ ' jquery'], function () {
 function place(mydiv) {
$(mydiv).html( ' My Sample Text');
 }
});

Using this syntax, we tell JavaScript to first import jquery and then run the code so that jquery can be used at any time. You can also use modules defined in the Javascript file, not just frameworks or plug-ins.

To optimize the

As you can see, RequireJS is a powerful tool for organizing your files into modules and importing them when you need them. The disadvantage is that a large number of javascript files also require a large amount of import time, so RequireJS includes an optimizer optimizer to collect all the file data and put it in a compressed file.

Overall, RequireJS is a great tool to organize and optimize Javascript in your web application.