Of Stack

Analysis of RequireJS Multi page Application Example

  • 2021-07-01 06:19:38
  • OfStack

This paper is a summary of some knowledge points of requireJS, with an example analysis in multi-page application.

The directory structure of this case is as follows:

Three main functions of requireJS API: define (Create Module), require (Load Module), config (Configure)

1. Load JS file in HTML file

page1.html reads as follows: 


<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script data-main="scripts/page1" src="scripts/lib/require.js"></script>
</head>
<body>
<a href="page2.html">Go to Page 2</a>
</body>
</html>

page2.html reads as follows: 


<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<script data-main="scripts/page2" src="scripts/lib/require.js"></script>
</head>
<body>
<a href="page1.html">Go to Page 1</a>
</body>
</html>

Knowledge expansion:

The data-main attribute specifies the main module of the Web page program, which is first loaded by requireJS. Since the default file suffix for requireJS is js, page1.js can be abbreviated to page1

Root Path Priority Rules for Loading Script Files

When loading the module with require (), omit the suffix. js and look it up under baseUrl; If it has the. js suffix, or starts with "/", or contains the URL protocol (http/https), the root

Find it according to your specific path settings

config > data-main > Default baseUrl

If data-main and config are not set, the default baseUrl is the directory of the HTML page that references require. js

If data-main is set, baseUrl is the directory in which the main module is located (for example, the main module in paragraph 1 of HTML is page1. js, so its direction/scripts is the root directory)

Configure config, set baseUrl explicitly, or set the path separately for each module

2. Configure the path of the module

Using the require. config () method, you can customize the loading behavior of a module. In a multi-page application, you can write the configuration in a common file, such as the common. js file in this example, and then load the required modules in the callback function after each page loads the current configuration.

The code for common. js is as follows: 


require.config({
baseUrl: 'scripts/app',
paths: {
jquery: [
'http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min',
'../lib/jquery'
]
}
});

Knowledge expansion:

Supported configuration items:

baseUrl:

The lookup root path for all modules. Note: baseUrl will not be used when the loaded js file ends with. js, begins with "/" and contains protocols;

paths :

path maps module names that are not placed directly under baseUrl. The path is set with a starting position relative to baseUrl unless the path setting begins with "/" or contains the URL protocol;

Note: The path defined in paths cannot contain the. js suffix, because the path resolution mechanism automatically adds the. js suffix; And the loading path can be set multiple, such as from the CDN loading failure, then load the local js file;

shim:

Configure modules that do not use define () to declare dependencies;

There are two parameters to note:

(1) exports value (output variable name), exposing method interface

(2) The deps array, indicating the dependencies of the module

Such as: 


require.config({
baseUrl: '/scripts/lib',
shim:{
zepto: {
exports: '$'
},
backbone: {
deps: ['underscore', 'zepto'],
exports: 'Backbone'
},
'zepto.animate': ['zepto']
}
});

3. Loading of modules

The code for page1.js is as follows: 


require(['./common'], function (common) {
require(['sayPage1'], function (sayPage1) {
sayPage1.hello();
});
});

The code for page2. js is as follows: 


require(['./common'], function (common) {
require(['sayPage2'], function (sayPage2) {
sayPage2.hello();
});
});

Knowledge development:

The require () function takes two arguments. The first parameter is an array representing the dependent modules; The second argument is a callback function, which will not be called until all the modules specified above have been successfully loaded. The loaded module can be called as an argument to the callback function.

Here, in order to ensure that the required module is loaded after the completion of configuration, it is mainly for the correct analysis of the path, and then require is carried out in the callback function.

4. Definition of Module

Code in sayPage1.js: 


define(['jquery'], function($) {
function sayHi(){
$('body').append('<h1>Hello page1!</h1>');
}
return {
hello: sayHi
}
});

Knowledge expansion:

The define function also takes two arguments. The first argument is an array of dependent modules, and the second argument is a callback function.

Of course, when you go online at last, you should merge and compress JS files. You can use r. js, which is convenient and quick ~

Related articles: