Ways to optimize JavaScript reference code using REQUIREJS

This article mainly introduces the use of Requirejs to optimize JavaScript reference code, REQUIREJS is a popular JS library, the need for friends can refer to the

Requirejs is an effective way to improve the speed and quality of your JavaScript code, and it also makes your code easier to read and maintain.

In this article, I'll introduce you to Requirejs and how you should use it. We discuss the introduction of file and definition modules, and even the knowledge of optimization.

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

Introducing Files

Before we can start using Requirejs, we need to download its library and asynchronous Module Definition (AMD) files first. Then link to the Require.js file in the header of the document, as follows:

?

1 2	<script src= "Require.js" data-main= "main" ></script>

You may ask what the Data-main attribute is, and using requirejs means that when you call require in the header of the document, you also link to the main file of your JavaScript application, in this case main.js (note that Requirejs automatically Add. js suffixes to the back of the file name

In the Main.js file, you need to configure the Requirejs, load the module, and define a base path to use when introducing the file.

Require function

Requirejs uses a simple require function to import the script, in this case, Requirejs imports jquery:

?

1 2 3

Require (["jquery"], function ($) {$ (' #mydiv '). HTML (' Hello this is Requirejs talking ');});

One advantage of Requirejs is that it's very easy to read. In the above code, we can see that first the Require function grabs the file named Jquery.js and then gives an anonymous function a $ as parameter, and when that action is complete, you can use the jquery code as you like.

Now, your code generally does not include the jquery library of the Jquery.js file, like most plug-ins and frameworks, we usually choose to import them from their GitHub or Google Cdn, so we need to configure their real path:

?

1 2 3 4 5

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 use the "jquery" name in this example, and you can use any name you like)

Defining modules

Using AMD mode means that our code can be structured into modules that implement certain functions in the application. You can put only two lines of code or 100 lines of code in a module, which completely depends on what functionality you want to implement through the module.

To define the module, we can write this:

?

1 2 3 4 5

Define (function () {function Add (x,y) {return x + y;}});

Inside of this, I've defined an add function with no dependencies, but if this function requires jquery to work properly, it might be the definition code:

?

1 2 3 4 5

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

Using this syntax, we tell JavaScript to import jquery first and then run the code so that jquery can be used at all times. We can also use modules defined in JavaScript files, not just frameworks or plug-ins.

Optimization

As you can see, Requirejs is a powerful tool to organize your files into modules and import them when you need them. The disadvantage is that a large number of JavaScript files, also require a lot of time to import, so Requirejs contains a optimizer optimizer to collect all the data of the file and put it into a compressed file.

In general, Requirejs is a great tool to organize and optimize JavaScript in your Web application.