Requirejs Modular Programming

before introducing Require.js, introduce the following AMD (asynchronous module definition), meaning "async module definition". It loads the module asynchronously, and the module's load does not affect the execution of the statement behind it. All statements that rely on this module are defined in a callback function that will not run until the load is complete. The implementation of the AMD spec loader is a lot, but most people still use require.js.

Therefore, use Require.js to avoid the following problems:

1) to realize the asynchronous loading of JS file, to avoid the Web page lost response;

2) management of the dependencies between modules, easy to write code and maintenance.

Instructions for use:

1. Require.js Loading

<script src= "js/require.js" defer async= "true" ></script>

2. Module invocation

(1) If our code does not depend on any other modules, then we do not need to use require.js.

(2) If our code relies on other modules, then we need requrie.js, for example:

function ($, _, Backbone) {     //  code here Main module });

Require.js will load jquery, underscore, and backbone before running the callback function. The code for the main module is written in the callback function.

3. Module loading

Require.js in the JS directory, the other standard library is placed in the JS directory Lib folder, the custom module is placed in the app folder.

According to the micro-system JS directory structure. Using the Require.config () method, we can define the load behavior of the module. The Require.config () method can be placed at the head of the module file or extracted from a separate JS file (config.js).

require.config ({    paths: {        "jquery": "Lib/jquery.min",        "underscore": "lib/ Underscore.min "    

Or use BASEURL to change the base path

require.config ({    "Js/app",  //  set to a custom module path.)     paths: {   //  require.js requirements, each module is a separate JS file.         ' jquery ': '. /lib/jquery-1.11.1.min ',       //  ' module name ': ' Relative baseUrl path '        ' underscore ': '. /lib/underscore-min ',     }});

4. Loading non-canonical modules

require.config ({    shim        :{' ColorPicker ': {            ///  (output variable name), indicating the name of the external invocation of this module;             exports: ' $ ',            //  dependencies, css! relies on external CSS            deps: [' CSS!.. /.. /components/colorpicker/spectrum.css ']        },               });

5. Loading plugins

Require.js also offers a range of plugins for specific functions.

(1) The Domready plugin allows the callback function to run after the page DOM structure is loaded.

function (DOC) {    //  called once the DOMis ready});

(2) Text and image plug-ins, it is allowed to load require.js and picture files.

function (review,cat) {    console.log (review);    Document.body.appendChild (cat);});

Other plug-ins address: Https://github.com/jrburke/requirejs/wiki/Plugins

6. Defining the Module

 // The   element of [' jquery ', ' underscore '] array is the module name declared in Require.config (), and the callback function uses the   
  ' $ ' for the ' jquery ' module output variable, ' _ ' for the ' Underscroe ' module output variable;  //   $, _ can be used directly in the callback function. function ( $, _) {  
    var mod = {};
    // code-segment
    return MoD;
});