JS Modular Tool Requirejs Tutorial (ii): basic knowledge

Basic API

Require defines three variables: Define,require,requirejs, where require = = = Requirejs, generally using require shorter

• Define can see from the name that this API is used to define a module
• Require load the dependent module and execute the post-load callback function

A.js in the previous article:

Define(function() {    function fun1() { alert("It Works"); fun1();})              

A module is defined by 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 also use an array to define ), the second parameter of the Requir API is callback, a function that is used to handle the logic after loading, such as:

Require(["js/a"],function() { alert("load finished");})   

Loading files

In the previous example, the loading module is local JS, but in most cases the page needs to load the JS may be from the local server, other Web site or CDN, so it can not be loaded in this way, we load 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"  }) })       /span>                

This side involves require.config , require.config is used to configure the module loading location, simple point is to give the module a shorter better remember the name, such as Baidu's jquery library address marked as jquery , so in require only need to write ["jquery"] can load the JS, Local JS We can also configure:

Require.Config({Paths: { "jquery" : ["Http://libs.baidu.com/jquery/2.0.3/jquery"],  "a"  : "js/a"  }}) require ([ "jquery" ,< span class= "str" > "a" ],function ($ $ (function () {  Alert ( "load finished" })          /span>                

The paths configuration will make our module name more refined, paths also has an important function, that is, you can configure multiple paths, if the remote CDN Library is not loaded successfully, you can load the local library, such as:

Require.Config({Paths: { "jquery" : ["Http://libs.baidu.com/jquery/2.0.3/jquery",  "js/jquery" ],  "a"  Span class= "pun" >:  "js/a"  } }) require ([ "jquery" , "a" ],function  ($ $ ( Function () { Alert ( "load Finished"  }) })       /span>                

After this configuration, when Baidu's jquery does not load successfully, it will load the local JS directory of jquery

1. When using Requirejs, loading the module without writing .js suffixes, of course, can not write the suffix
2. The callback function in the example above is found to have $ parameters, this is the output variable of the dependent jquery module, if you rely on multiple modules, you can write several parameters in turn to use:

Require(["jquery","underscore"],function($, _) { $(  function() { _.  Each([1,2,3],alert);}) })< /c10> 

If a module does not output variable values, then do not, so try to write the output module in front, to prevent confusion caused misunderstanding

Global configuration

The above example repeats the require.config configuration, if each page is added to the configuration, it must be very indecent, Requirejs provides a function called "Master data", we first create a main.js:

Require.  Config({    :{"jquery":["Http://libs.baidu.com/jquery/2.0.3/jquery", "Js/jquery"],"A":"js/a"}})          

Then use Requirejs in the following way on the page:

<scriptData-main="Js/main"src="Js/require.js"></script>  

To explain, the script tag loading Requirejs has added data-main properties, this property specifies that JS will be processed after loading the reuqire.js, we will require.config add the configuration to data-main each page to use this configuration, The page can then be used directly require to load all the short module names

data-mainThere is also an important function, when the script tag specifies the Data-main property, require will default to data-main the specified JS as the root path, what does it mean? As set above data-main="js/main" , after we use require([‘jquery‘]) (do not configure jquery paths), require will automatically load js/jquery.js this file, rather than jquery.js, equivalent to the default configuration:

Require.  Config({    :"JS"})      

Third-party modules

By require loading the module is generally required to comply with the AMD specification is used define to declare the module, but part of the need to load non-AMD specification JS, this time need to use another function: Shim,shim interpretation is also difficult to understand, Shim directly translated as "pad", In fact, there is the meaning of this, at present I mainly used in two places
1. Non-AMD module output, the non-standard AMD module "pad" into a usable module, for example: in the old version of jquery, is not inherited AMD specifications, so can not directly require["jquery", this time need shim, For example, if I use the underscore class library, but he does not implement the AMD specification, then we can configure

Require.  Config({    shim:{"underscore":{:"_";} }})

With this configuration, we can refer to the underscore module in other modules:

Require(["underscore"],function(_) { _.  Each([1,2,3], alert);})        

1. Plug-in form of non-AMD modules, we often use jquery plug-ins, and these plug-ins are not compatible with AMD specifications, such as the Jquery.form plug-in, this time need to put the form plug-in "pad" into jquery:

Require.Config ({ Shim: {  "underscore"  : { exports :  "_" ;},  "jquery.form"  :< Span class= "PLN" > { Deps : [  "jquery" ] }  }})             

can also be abbreviated as:

Require.  Config({    shim:{"underscore":{:"_";},"Jquery.form" :["jquery"]}})            

After this configuration, we can use jquery after the plugin is loaded.

Require.  Config(["jquery","Jquery.form"],function($) { $(function () { $("#form").  Ajaxsubmit({...}); })})< /c5> 

Well, the basic configuration of Requirejs is roughly that much, and there are some extended features that will be mentioned in the following space

JS Modular Tool Requirejs Tutorial (ii): Basics