Using Requirejs to implement deferred loading in JavaScript applications

This article mainly introduces the use of Requirejs in JavaScript applications to implement lazy loading, JavaScript is a popular JS library, the need for friends can refer to the

Both simple and complex web applications are made up of HTML, JavaScript, and CSS files. Developers typically use a third-party JavaScript framework such as jquery, knockout, underscore, etc. to improve development speed. Because these JavaScript frameworks are developed for specific purposes and have been "validated", it is more appropriate to use them directly than to implement the functionality you need from scratch. However, with the increasing complexity of applications, it becomes increasingly important to write clean, low coupling, maintainable code. In this article, I'll explain how the REQUIREJS framework helps application developers write more modular code and how it can improve application performance by delaying the loading of JavaScript files.

To start with, we don't need to requirejs the frame, and then refactor it with Requirejs in the next chapter.

The following HTML page contains an ID of "message"

Elements. When the user accesses this page, it displays the order ID and customer name information.

The Common.js file contains the definitions of two modules--order and customer. The function showdata is combined with the body of the page to put the information to be output into the page by calling the Write function. As an example, I hard-coded the ID 1 in the ShowData function and the customer name is Prasad.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

Open this page in the browser and you will see the following information.

Although the above code can display output, it still has some problems:

The Common.js file contains all the functions that need to be defined (Write,showdata), and the module (Order,customer) is difficult to maintain and reuse. If you want to reuse the write function on other pages and reference the JavaScript file above, you also import other functions and modules that the page may not need.

The Order module (or "Class" in the object-oriented process) creates an instance of the customer module during initialization. This means that the order module relies on the customer module. The tight coupling between these modules makes it difficult to refactor and maintain in the future when optimizing.

Whenever the client requests this page, the Common.js file is loaded into the DOM. In the example above, although we only need to output information on the page, we still load unwanted modules (Customer,order) into memory. Loading unnecessary application resources (JavaScript, CSS, picture files, and so on) can degrade the performance of your application.

The modules in the Common.js file can be detached into different JavaScript files, but when the application becomes more and more complex, it is difficult to judge the dependencies between JavaScript files and the loading order of the files that need to be loaded.

The REQUIREJS framework processes dependencies between JavaScript files and loads them sequentially, as needed.

Using Requirejs to build the application

Now let's look at the refactored code. The following HTML code refers to the Require.js file. The Data-main property defines the unique entry point for this page. In the following scenario, it tells the Requirejs to load the main.js at boot time.

?

1 2 3 4 5 6 7 8 9 10 11

<! DOCTYPE html>

Main.js

Since this file has been specified through the Data-main property, Requirejs will load it as soon as possible. This file uses the REQUIREJS framework function to determine and define dependencies on other JavaScript files. In the following code snippet, the first parameter represents a dependency (dependent Order.js file) and the second parameter is a callback function. Requirejs analyzes all dependencies and loads them, and then executes the callback function. Note that the value (order) of the first parameter must be consistent with the file name (order.js).

?

1 2 3 4

require ([' order '], function (order) {var o = new (1, "Prasad"); Write (o.id + o.customer.name);});

Order.js

The REQUIREJS framework provides an easy way to define and maintain dependencies between JavaScript files. The Define function in the following code declares that customer.js must be loaded before the order callback function is processed.

?

1 2 3 4 5 6 7 8 9 10

Define (["Customer"], function (customer) {function order (ID, custname) {this.id = id; this.customer = new Customer (custn AME); return order; } ); Customer.js

This file does not depend on any other JavaScript file, so the value of the first parameter of the Define function is an empty array.

?

1 2 3 4 5 6 7 8

define ([], function () {function customer (name) {this.name = name; return customer;});

OK, now open the app with your browser and you'll see the following output. Note that Requirejs only loads the required JavaScript files.

Summarize

In this article, we analyze how the REQUIREJS framework handles dependencies between JavaScript files and loads them as needed. It can help developers write code that is more loosely coupled, more modular, and more maintainable.