Requirejs the differences and best practices of anonymous modules and named modules

Requirejs is a simple JavaScript framework that supports modular coding and asynchronous loading of modules.

In the Requirejs module can be divided into: Anonymous module and named module of these 2 kinds.

Requirejs Defining an anonymous module

Define (function () {  

Requirejs defining a named Module

Define ("Constantmodule", [],function () {  

Requirejs Official Online also said: It is normally best to avoid coding in a name for the module and just let the optimization tool burn I n the module names. This means that anonymous modules are recommended.

jquery supports AMD (asynchronous Module Definition) from version 1.7, and is a named module with the module name jquery, I use Jquery-1.11.1.js, the source code is as follows:

if (typeof define = = = "function" && define.amd) {define ("jquery", [], function () {return jquery;});

now look at the use of the REQUIREJS framework to load jquery, as long as the path is correct, the following code is able to load jquery correctly.

Require.config ({baseUrl: "./... /",    paths: {        jquery: ' jquery-1.11.1 '}    }); The module name of the//jquery framework is jquery and cannot be modified here, otherwise the load is unsuccessful require ([" jquery "], function (JQ) {///If the load is successful, 1.11.1    alert (JQ (). jquery) should be displayed;});

after the above code is able to load the jquery framework properly, we slightly modify the code above

Require.config ({baseUrl: "./... /",    paths: {        jquery_name: ' jquery-1.11.1 '}    }); The module name of the//jquery framework is jquery and cannot be modified here, otherwise the load will not succeed require ([" Jquery_ Name "], function (JQ) {///If the load is successful, 1.11.1    alert (JQ (). jquery) should be displayed;});

It can be found that this time the jquery framework does not load properly. We just changed the module name. A conclusion can be drawn here:

if the module is named, then the module name must be correct and not arbitrarily modified when using require to load it .

Next we load our own defined anonymous modules and named modules to validate our conclusions.

Require.config ({baseUrl: "./... /",    paths: {        jquery: ' jquery-1.11.1 ',        hehe: ' Require_demo/module_noname ',        constantmodule: ' Require _demo/module_hasname ',    }}); The module name of the//jquery framework is jquery, which cannot be modified, otherwise it will not load successfully require (["jquery", "hehe", "Constantmodule"], function (jq,noname,hasname) {        alert (JQ (). jquery); alert (noname.id); alert (hasname.id);});

Adjust the file path to ensure that the above code can load properly. Next we can modify the code above

Require.config ({baseUrl: "./... /",    paths: {        jquery: ' jquery-1.11.1 ',        xx: ' Require_demo/module_noname ',        constantmodule_hehe: ' Require_demo/module_hasname ',    }}); The module name of the//jquery framework is jquery, which cannot be modified, otherwise it will not load successfully require (["jquery", "XX", " Constantmodule_hehe "], function (jq,noname,hasname) {    alert (JQ (). jquery); alert (noname.id); alert (hasname.id);});

can be found: XX module can load normally, constantmodule_hehe can not load normally. We can see that the anonymous module has greater flexibility, and the name can be arbitrarily specified when the anonymous module is loaded .

Requirejs the differences and best practices of anonymous modules and named modules