This article is a summary of some knowledge points of requireJS, accompanied by example analysis in multi-page applications.
The directory structure of this case is as follows:
requireJS API three main functions: define (create module), require (load module), and config (config)
1. Load JS file in HTML file
The content of page1.html is 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>
The content of page2.html is 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 extension:
The data-main attribute specifies the main module of the web program, and this file is first loaded by requireJS. Since the default file suffix name of requireJS is js, page1.js can be abbreviated as page1
Root path priority rules for loading script files
When loading a module with require(), the .js suffix will be omitted and will be searched from baseUrl; if it has .js suffix, or starts with "/", or contains the URL protocol (http/https), the root will be
Search 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 where the HTML page that references require.js is located.
Set data-main, then baseUrl is the directory where the main module is located (for example, the main module in the first HTML is page1.js, so the directory where it is located/scripts is the root directory)
Configure config, explicitly set baseUrl, and also set a separate path for each module.
2. Configure the paths of the modules, etc.
Use the require.config() method to customize the loading behavior of the module. In a multi-page application, the configuration can be written in a common file, such as the common.js file in this example. Then, after each page loads the current configuration, the required modules are loaded in the callback function.
The common.js code 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 extension:
Supported configuration items:
baseUrl:
The search root path for all modules. Note: When the loaded js file (ends with .js, starts with "/", contains a protocol), baseUrl will not be used;
paths:
path maps module names that are not placed directly under baseUrl. The starting position when setting the path is relative to baseUrl, unless the path setting starts with "/" or contains a URL protocol;
Note: The path defined in paths cannot contain .js suffixes, because the path resolution mechanism will automatically add .js suffixes; and the loading path can be set multiple times. If the loading from CDN fails, the local js file will be loaded;
shim:
Configure for modules that do not use define() to declare dependencies;
There are two parameters that need to be paid attention to:
(1) Exports value (output variable name), expose method interface
(2) Deps array, indicating the dependency of the module
like:
require.config({baseUrl: '/scripts/lib',shim:{zepto: {exports: '$'},backbone: {deps: ['underscore', 'zepto'],exports: 'Backbone'},'zepto.animate': ['zepto']}});3. Module loading
The page1.js code is as follows:
require(['./common'], function (common) {require(['sayPage1'], function (sayPage1) {sayPage1.hello();});});The page2.js code is as follows:
require(['./common'], function (common) {require(['sayPage2'], function (sayPage2) {sayPage2.hello();});});Knowledge expansion:
The require() function accepts two parameters. The first parameter is an array that represents the module to which it depends; the second parameter is a callback function, and it will be called only after all the currently specified modules are loaded successfully. The loaded module can be called as a parameter to the callback function.
In order to ensure that the required module is loaded only after the configuration is completed, it is mainly for the correct analysis of the path and requires it in the callback function.
4. Definition of modules
Code in sayPage1.js:
define(['jquery'], function($) {function saysHi(){$('body').append('<h1>Hello page1!</h1>');}return {hello: sayHi}});Knowledge extension:
The define function also accepts two parameters. The first parameter is an array of dependent modules, and the second parameter is a callback function.
Of course, when it is finally launched, JS files need to be merged and compressed. You can use r.js, which is convenient and fast~
The above is an example analysis of RequireJS multi-page application that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!