Disadvantages of normal JS loading
The interface needs to start rendering after the js is loaded
If there are dependencies between js, they need to be loaded in order according to the dependencies. If the dependencies are complex, it is more troublesome to write and maintain the code
so, require.js came into being in the voice of the broad masses of the people.
The role of require.js
Implement asynchronous loading of js to avoid page unresponsiveness
Manage dependencies between modules to facilitate code writing and maintenance
require.js loading
First, go to the [official website] http://requirejs.org/ download the latest version
Deposit the downloaded or copied require.js into the project directory
Load require.js on the desired page
Direct load: Write <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynchronous loading: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Note: async means that this file needs to be loaded asynchronously to avoid the web page becoming unresponsive. IE does not support async, so load the defer attribute;
Once the require.js is loaded, the next step is to load our own code. Suppose our own code file is main.js, also placed under the js directory. So, just write the following: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
The function of the data-main attribute is to specify the main module of the web program. In the above example, this file will be loaded first require.js the main.js under the js directory. Since require.js default file suffix is js, you can shorthand main.js to main.
How to write the main module
The main.js from the previous section is called the main module. Meaning the entry method for the entire module.
How to write main.js
Methods written directly to the main.js without relying on any other modules
main.function()
The main module depends on other modules, so use the require() function
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
The require() function accepts two parameters:
The first parameter is an array that represents the modules to depend on
The second parameter is a callback function that will be called after all the modules specified in the front are loaded. The added modules are passed in the form of parameters, so that they can be used inside the callback function.
Loading of modules
Example: If the dependent module of the main module (main.js) is ['jquery', 'crypto-js', 'anything']
Loading by default
If the files of these three dependent modules are jquery.js, crypto-js.js, anything.js and main.js in the same directory, they can be automatically loaded according to the previous section
Config load require.config()
require.config() is written in the head of the main module (main.js).
How AMD modules are written
require.js loaded module, using AMD specification. That is, the module must be written according to AMD's regulations.
Specifically, modules must be defined by a specific define() function. If a module does not depend on other modules, it can be defined directly in the define() function
Suppose there is now a math.js file that defines a math module. Then, math.js write:
Here's how to load:
If the module also depends on other modules, then the first argument of the define() function must be an array that indicates the module's dependencies.
When the require() function loads the above module, it will load myLib.js file first.
Load non-AMD modules
There are many modules on the market that do not meet the AMD specification, require.js can be loaded
Before these modules can load, they need to be set to require.config() to define some of their characteristics
For example noamd.js and noamddeps.js both modules are non-AMD modules, and if you want to load them, you have to define their characteristics:
require.js accepts a configuration object that, in addition to the paths property, also has a shim property specifically for configuring non-AMD modules.
Specifically, each module defines:
- exports value (output variable name): indicates the name of the module when it is called externally
- deps array: indicates the dependencies of this module
For example, the jQuery plugin can be defined like this:
require.js plugin
require.js also offers a range of plugins that implement some special features
The domready plugin allows the callback function to run after the page DOM structure is loaded:
text and image plugins, which allow require.js to load text and image files:
Similar plugins include JSON and MDOWN for loading JSON and Markdown files.
|
Posted on 10/11/2017 9:31:50 AM
|
|
|
