JS Modular Tool Requirejs Tutorial (ii): Basic knowledge __JS

Previous: JS Modular tool Requirejs Tutorial (i): First knowledge Requirejs we introduced Requirejs in a very simple way, this one will tell you some basic knowledge about Requirejs, including how to use the API. Basic API

Require will define three variables: Define,require,requirejs, where require = = Requirejs, generally using require shorter define from the name you can see that this API is used to define a module Require loads dependent modules and performs the callback function after loading

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, and 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

The previous example of loading modules are local JS, but most of the time the page needs to load the JS may come from the local server, other Web sites or CDN, so it can not be loaded in this way, we have to load a jquery library for example:

Require.config ({
    paths: {"
        jquery": ["Http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})
Require (["jquery", "js/a"],function ($) {
    $ (function () {
        alert ("Load finished");  
    })

This side involves the require.config,require.config is used to configure the module loading location, simple to say is to give the module a shorter and better remember the name, such as Baidu's jquery library address marked jquery, so that when the require only to write [" jquery "] can load the JS, local JS We can also configure 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 paths configuration will make our module name more refined, paths also has an important function, that is, can configure multiple paths, if the remote CDN Library is not successfully loaded, you can load local libraries, 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");  
    })
}

This configuration, when Baidu's jquery did not load successfully, will load the local JS directory of jquery in the use of Requirejs, when loading modules do not have to write. js suffix, of course, can not write suffixes the callback function in the example above shows the $ parameter, This is the output variable of the dependent jquery module, and if you rely on multiple modules, you can write multiple arguments in sequence to use:

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

If a module does not output variable values, there is no, so try to write the output module in front, to prevent confusion caused by the location of the global configuration

The above example repeats the Require.config configuration, if each page is added to the configuration, must appear very indecent, Requirejs provides a function called "Master 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 in the page to use Requirejs:

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

Explain that the script tag that loads the Requirejs scripts adds the Data-main attribute, This attribute specified JS will be loaded after reuqire.js processing, we put the Require.config configuration added to the Data-main, you can make every page to use this configuration, and then the page can directly use the Require to load all the short module names

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

Require.config ({
    baseurl: "JS"
})

third-party modules

Through the Require loaded modules are generally required to comply with the AMD specifications that use define to declare the module, but some of the time need to load non-AMD specification JS, then need to use another function: Shim,shim explanation is also more difficult to understand, Shim directly translated as "Mat", In fact, it is also the meaning of the present, I mainly used in two places
1. Non-AMD module output, the non-standard AMD module "pad" into usable modules, such as: 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, so we can configure

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

Once this is configured, we can refer to the underscore module in other modules:

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

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

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

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 ({...)}
    )

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

Article Source: HTTPS://GITHUB.COM/LIUXEY/BLOG/ISSUES/2