Use RequireJS in JavaScript applications for delayed loading and requirejs for delayed Loading

Last Update:2015-07-02 Source: Internet

Author: User

Tags define function

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Use RequireJS in JavaScript applications for delayed loading and requirejs for delayed Loading

Both simple and complex Web applications are composed of HTML, JavaScript, and CSS files. Developers usually use third-party JavaScript frameworks such as JQuery, Knockout, and Underscore to speed up development. Because these JavaScript frameworks are developed for specific purposes and have been "verified", it is more appropriate to use them directly than to implement the functions required from the beginning. However, with the increasing complexity of applications, it is increasingly important to write clean, low-coupling, and maintainable code. In this article, I will explain how the RequireJS framework helps application developers write more modular code and how it improves application performance by loading JavaScript files in a delayed manner.

In the beginning, we do not need to use the RequireJS framework, and then use RequireJS to reconstruct it in the next chapter.

The following HTML page contains a <p> element with the id of "message. When you access 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 showData function is combined with the page body. It calls the write function to put the information to be output into the page. As an example, I hardcoded Id 1 in the showData function, and the customer name is Prasad.

<!DOCTYPE html>
Open this page in the browser and you will see the following information.


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

  
 
  The Common. JS file contains all the functions (write and showData) to be defined, 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 above JavaScript file, you have also imported other functions and modules that may not be required on this page. 
 
  The Order module (or "class" in the object-oriented model) creates an instance of the Customer module during initialization. This means that the Order module depends on the Customer module. The tight coupling between these modules makes it difficult to reconstruct and maintain these modules during optimization in the future. 
 
  Whenever the client requests this page, the Common. JS file will be loaded into the DOM. In the above example, although we only need to output information on the page, we still load the unnecessary modules (Customer, Order) into the memory. Loading unnecessary application resources (JavaScript, CSS, image files, and so on) will reduce the application performance. 
 
  Common. modules in JS files can be separated into different JavaScript files, but when applications become increasingly complex, it is difficult to determine the dependency between JavaScript files and the loading sequence of the files to be loaded.

 
The RequireJS Framework processes the dependencies between JavaScript files and loads them as needed.
Use RequireJS to build an application
Now let's take a look at the restructured code. The following HTML code references the Require. JS file. The data-main attribute defines the unique entry point of the page. In the following scenario, it tells RequireJS to load Main. js at startup.
 

<!DOCTYPE html>
Main. JS
Because this file has been specified through the data-main attribute, RequireJS will load it as soon as possible. This file uses the functions of the RequireJS framework to determine and define dependencies on other JavaScript files. In the following code snippet, the first parameter indicates the dependency (dependent on the Order. JS file), and the second parameter is a callback function. RequireJS analyzes all dependencies and loads them, and then executes this callback function. Note that the value (Order) of the first parameter must be consistent with the file name (Order. JS ).
 

require(["Order"], function (Order) {  var o = new Order(1, "Prasad");  write(o.id + o.customer.name);});
Order. JS
The RequireJS framework provides a simple way to define and maintain the dependencies between JavaScript files. The define function in the following Code declares that Customer. JS must be loaded before processing the Order callback function.
 

define(["Customer"],function (Customer) {function Order(id, custName) {this.id = id;this.customer = new Customer(custName);}return Order;});Customer.JS
This file does not depend on any other JavaScript files, so the value of the first parameter of the define function is an empty array.
 

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

Now, open the application in your browser and you will see the following output. Note that RequireJS only loads necessary JavaScript files.


Summary
In this article, we analyzed how the RequireJS framework handles the dependencies between JavaScript files and loads them as needed. It can help developers write code with more loose coupling, modularization, and maintainability.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More