Use RequireJS to optimize the JavaScript reference code method, and requirejs to optimize

Use RequireJS to optimize the JavaScript reference code method, and requirejs to optimize

RequireJS is an effective way to improve the speed and quality of your javascript code. It also makes your code easier to read and maintain.

In this article, I will introduce you to RequireJS and how to use it. We discuss introduction of files and definition modules, and even access to optimization knowledge.

To put it simply, require. js is a script loader that allows you to separate your javascript code into files and modules and manage dependencies between each module.

Import File

Before using RequireJS, We need to download its library and Asynchronous Module Definition (AMD) file. Link to the require. js file in the Document Header, as shown in the following figure:

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

You may ask what the data-main attribute is. Using RequireJS means that when you call require in the header of the document, you will also link to the main file of your javascript Application, in this example, main. js (please note that RequireJS is automatically added. js suffix to the end of the file name)

In the main. js file, you need to configure RequireJS, load the module and define a base path for use when introducing files.

Require Function

RequireJS uses a simple require function to import scripts. In this example, RequireJS imports JQuery:
 

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

One advantage of RequireJS is that it is easy to read. In the code above, we can see that the require function captures the name jquery. js file, and then Input $ as a parameter to an anonymous function. After this action is completed, you can use JQuery code at will.

Currently, your code does not include jquery. the jQuery library of js files, such as most plug-ins and frameworks, is usually imported from their GitHub or Google CDN, so we need to configure their real 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 through Google (please note that I use the "jquery" name in this example, and you can use any name you like)

Definition Module

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

Define the module, which can be written as follows:
 

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

In this example, I define an add function without any dependencies. However, if jquery is required for this function to work properly, the definition code may be 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. We can also use modules defined in Javascript files, not limited to frameworks or plug-ins.

Optimization

As you can see, RequireJS is a powerful tool that organizes your files into modules and imports them only when you need them. The disadvantage is that a large amount of import time is required for a large number of javascript files, therefore, RequireJS contains an optimizer to collect data from all files and put it in a compressed file.

In general, RequireJS is a good tool to organize and optimize Javascript in your web application.