Previous article: We introduced requirejs in a very simple way to JS modular tool. This article will tell you some basic knowledge in requirejs, including how to use APIs.
Basic API
require will define three variables: define, require, requirejs, where require === requirejs, generally requires is shorter using require
Define From the name, you can see that this API is used to define a module
Require loads the dependent module and executes the loaded callback function
a.js in the previous article:
define(function(){ function fun1(){ alert("it works"); } fun1();})A module is defined through the define function, and then used in the page:
require(["js/a"]);
To load the module (note that the dependency in require is an array. Even if there is only one dependency, you must use an array to define it). The second parameter of the require API is callback, a function, which is used to process the logic after loading, such as:
require(["js/a"],function(){ alert("load finished");})Load the file
In the previous examples, the loading modules were all local js, but in most cases, the JS that the web page needs to load may come from the local server, other websites or CDNs, so this way cannot be loaded. Let's take loading a jquery library as an example:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] }})require(["jquery","js/a"],function($){ $(function(){ alert("load finished"); })})This involves require.config. requires.config is used to configure the loading location of the module. To put it simply, it is to give the module a shorter and better remembered name. For example, mark the address of Baidu's jquery library as jquery, so that you only need to write ["jquery"] when requiring to load the js. We can also configure local js like this:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"], "a" : "js/a" }})require(["jquery","a"],function($){ $(function(){ alert("load finished"); })})The configuration of paths will make our module name more refined. Paths also has an important function, which is to configure multiple paths. If the remote cdn library is not loaded successfully, the local library can be loaded, such as:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a" : "js/a" }})require(["jquery","a"],function($){ $(function(){ alert("load finished"); })})After this configuration, when Baidu's jquery is not loaded successfully, the jquery in the local js directory will be loaded
When using requirejs, you do not need to write .js suffix when loading the module, and of course you cannot write suffix.
In the callback function in the above example, there is a $ parameter. This is the output variable of the dependency jquery module. If you rely on multiple modules, you can write multiple parameters in turn to use:
require(["jquery","underscore"],function($, _){ $(function(){ _.each([1,2,3],alert); })})If a module does not output variable values, there is no one. So try to write the output module in front to prevent misunderstandings caused by misunderstandings due to misunderstandings due to misunderstandings due to misunderstandings when the position is confused.
Global configuration
The require.config configuration is repeated in the example above. If configuration is added to each page, it will inevitably appear very indecent. Requirejs provides a function called "main data". We first create a main.js:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a" : "js/a" }})Then use the following method on the page to use requirejs:
<script data-main="js/main" src="js/require.js"></script>
Explain that the script tag of the requirejs script loading adds the data-main attribute. The js specified in this attribute will be processed after loading reuqire.js. After we add the required.config configuration to data-main, we can make each page use this configuration, and then the page can directly use require to load all short module names.
data-main also has an important function. When the script tag specifies the data-main attribute, require will default to select the js specified by data-main as the root path. What does it mean? For example, after the data-main="js/main" setting above, after we use require(['jquery']) (no paths of jquery are configured), require will automatically load the js/jquery.js file instead of jquery.js, which is equivalent to the default configuration:
require.config({ baseUrl : "js"})Third-party modules
Modules loaded through require generally need to comply with AMD specifications, that is, use define to declare modules, but in some cases, you need to load non-AMD specifications js. At this time, you need to use another function: shim. Shim is difficult to understand to explain. Shim is directly translated as "pad", which actually has this meaning. Currently, I mainly use it in two places
1. Non-AMD module output, "pad" non-standard AMD module into available modules. For example: in the old version of jquery, the AMD specification is not inherited, so we cannot directly require["jquery"]. At this time, shim is needed. For example, if I use the underscore class library, but it does not implement the AMD specification, then we can configure it like this.
require.config({ shim: { "underscore" : { exports : "_"; } }})After this configuration, we can refer to the underscore module in other modules:
require(["underscore"], function(_){ _.each([1,2,3], alert);})For non-AMD modules in plug-in form, we often use jquery plug-ins, and these plug-ins basically do not comply with AMD specifications, such as jquery.form plug-in. At this time, you need to "pad" the form plug-in into jquery:
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : { deps : ["jquery"] } }})It can also be abbreviated as:
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] }})After this configuration, we can use jquery after loading the plugin
require.config(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); })})Okay, there are roughly so many basic configurations of requirejs, and some extended functions will be mentioned in the future. Don’t miss them!