Requirejs Framework helps users to load JavaScript code on demand asynchronously

This article introduces a more streamlined Requirejs framework, a developer who wants to use the features of AMD and does not want to introduce a large library, may wish to try Requirejs. Requirejs can help users asynchronously load JavaScript code on demand and resolve dependencies between JavaScript modules, improving the overall quality and performance of the front-end code.

Front-End development in the last one or two years the development of very fast, JavaScript as the mainstream of the development of the language has been unprecedented hot. A large number of front-end frameworks appear, and these frameworks are trying to solve some of the common problems in front-end development, but the implementation is different. In this context, the Commonjs community was born, and in order to make the front-end framework more mature, COMMONJS encouraged developers to work together in the community to develop norms for some of the frameworks that fulfill specific functions. AMD (asynchronous Module Definition) is one of the specifications.

Problems with traditional JavaScript code

Let's take a look at how JavaScript code is developed in general: by loading JavaScript files with <script> tags, by using global variables to distinguish between different functional codes, the dependencies between global variables need to be explicitly resolved by specifying their loading order. Use tools to compress all JavaScript code to a file when publishing applications. It is very inefficient to manually manage dependencies between these global variables when the WEB project becomes very large and there are many front-end modules.

The introduction of AMD

AMD proposed a module based asynchronous loading JavaScript code mechanism, it recommended developers to encapsulate JavaScript code into a module, the dependence on the global object became dependent on other modules, no longer need to declare a large pile of global variables. The dependencies of each module are resolved through latency and on-demand loading. The benefit of modular JavaScript code is obvious, the loose coupling of each functional component can greatly improve the reusability and maintainability of the code. This non-blocking concurrency fast loads JavaScript code so that other UI elements on the Web page that do not rely on JavaScript code, such as pictures, CSS, and other DOM nodes, are loaded first, the Web page loads faster, and the user gets a better experience.

The COMMONJS AMD specification only defines a global approach, as shown in Listing 1.

Listing 1. AMD Specifications

This method is used to define a JavaScript module that developers can use to encapsulate part of the functional modules within the Define method.

The ID represents the identity of the module, which is an optional parameter.

Dependencies is a string Array that represents all the other module identities that the module relies on, which must be resolved before the actual execution of the specific factory method, which loads the returned value after execution, and can be used as the default in the order of the factory method. Dependencies is also an optional parameter, when the user does not provide this parameter, the implementation of AMD framework should provide the default value is ["Require", "exports", "module"].

Factory is a method for executing a module that can use the return value of other dependent modules declared in the previous dependencies as a parameter, and if the method has a return value, the return value is the output of the module when it is dependent on another module.

COMMONJS in the specification does not specify other methods, some major AMD frameworks such as Requirejs, curl, bdload and so on are implemented define method, and each framework has its own complement to make its API more practical.

Requirejs Introduction

Requirejs is a very compact JavaScript module loading framework, one of the best implementations of AMD specifications. The latest version of the Requirejs compressed only 14K, is very lightweight. It can also work in conjunction with other frameworks, and using Requirejs will definitely improve your front-end code quality.

The latest version of Requirejs 1.0.8 works well in IE 6+, Firefox, Safari 3.2+, Chrome 3+, Opera 10+.

Actual Combat Requirejs

Using Requirejs in WEB applications

Download the latest version of Require.js on the Requirejs official homepage and put it on the Web page. The WEB project structure of the sample is shown in Figure 1.

Figure 1. WEB Project Structure

By adding a <script> tag to the index.html, the require.js can be introduced directly.