Detailed explanation of how to use RequireJs

This time I bring you a detailed explanation of how to use RequireJs. We know that RequireJs is very powerful. This article will give you a few cases. Analyze it.

Load the JavaScript file first

The goal of RequireJS is to encourage modularization of the code, which uses a different approach than the traditional 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag Script loading steps. You can use it to speed up and optimize code, but its main purpose is to modularize the code.

RequireJS loads all code with an address relative to baseUrl. The top-level 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag of the page contains a special attribute data-main, which is used by require.js to start the script loading process, and baseUrl is generally set to the directory consistent with this attribute.

baseUrl can also be passed through RequireJS config manual setting. If config and data-main are not explicitly specified, the default baseUrl is the directory to which the HTML page containing RequireJS belongs.

RequireJS assumes by default that all dependent resources are js scripts, so there is no need to add the ".js" suffix to the module ID. RequireJS is processing the module The suffix will be automatically added when parsing the ID to the path. You can set a set of scripts through paths config, which will help us write fewer words when using scripts.

Sometimes you want to avoid the "baseUrl + paths" parsing process and directly specify to load a script in a certain directory. You can do this at this time: if a module If the ID matches one of the following rules, its ID parsing will avoid the regular "baseUrl + paths" configuration and instead load it directly as a script relative to the current HTML document:

End with ".js".
Start with "/".
Include URL protocol, such as "http:" or "https:".

Generally speaking, it is best to use baseUrl and "paths" config to set the module ID. It will give you additional flexibility, such as easy renaming, relocation of scripts, etc. At the same time, in order to avoid messy configurations, it is best not to use multi-level nested directory hierarchies to organize code. Instead, either place all scripts in baseUrl or separate them into a flat structure for project libraries/third-party libraries. , as follows:

www/
index.html
js/
app/
sub.js
lib/
jquery.js
canvas.js
app.js

index.html:

<script data-main="js/app.js" src="js/require.js"></script>

app.js:

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from the js/app directory. paths
  //config is relative to the baseUrl, and
  //never includes a ".js" extension since
  //the paths config could be for a directory.
  paths: {
    app: '../app'
  }
});
//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function  ($, canvas, sub) {
  //jQuery, canvas and the app/sub module are all
  //loaded and can be used here now.
});

Note that in the example, third-party libraries such as jQuery do not include version numbers in their files In the name. We recommend tracking version information in a separate file. Using tools such as volo, you can add version information to package.json and keep the file name on disk as "jquery.js". This helps you keep your configuration minimal and avoid having to set a path for each library version. For example, configure "jquery" to "jquery-1.7.2".

Ideally, each loaded script is a module defined through define(); but some traditional/legacy libraries of the "browser global variable injection" type are not defined using define() their dependencies, you have to use shim for this config to indicate their dependencies. If you do not specify dependencies, loading may report an error. This is because RequireJS loads these libraries asynchronously and out of order for speed reasons.

require.js will check the data-main attribute when loading:

It would be very useful if we could use HTML tags instead of manipulating DOM based on scripts to build HTML. Not bad. But there is no good way to embed HTML in JavaScript files. All you can do is use HTML strings in js, but this is generally difficult to maintain, especially in the case of multi-line HTML. .

RequireJS has a text.js plug-in that can help solve this problem. If a dependency uses the text! prefix, it will be automatically loaded. See the README file of text.js.

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanations and examples of Boolean values, relational operators, and logical operators in JS

Detailed explanation and examples of each function of jQuery

##How to implement AJAX and JSONP in native JS

The above is the detailed content of Detailed explanation of how to use RequireJs. For more information, please follow other related articles on the PHP Chinese website!