CommonJS specifications and AMD specifications

Similar to other js libraries, you must first introduce them as follows:

<Script src = "js/require. js" async = "true" defer = "defer" data-main = "js/main"> </script>

The data-main of the above code mainly specifies the script file where the main code is located, which corresponds to the main. js and requirejs can save some time when reading local js files. js suffix. If it is a third-party js, it is required. js suffixes, such as www.google.com.hk/../jquery.js, deferpolic'defer' and async = 'true', mainly block browser differences and delay loading scripts.

Require. js mainly provides the define and require methods for modular programming. The former is used to define the module, and the latter is used to call the module. The method defined by this module will not pollute the global environment, clearly displays dependencies.

The require method itself is also an object. You can use the built-in config method to configure the running parameters of the module. config receives any object as a parameter, as shown below:

Require. config ({baseUrl: "/", paths: {"jquery": "js/jquery-1.8.0 "}});

Here we mainly introduce two parameters: baseUrl is used to configure the access path of the file. In the above example, it is the path relative to webroot. paths is mainly used to know the external structure of each module and multiple modules can be defined, in the previous example, jquery is the defined module name and js/jquery-1.8.0 is the path of the jquery file. You can also define multiple file locations, such as 'JS/jquery-1.8.0 ', 'JS/jquery-1.8.1'; that is, if the first js file fails to be loaded, the second version of jquery 1.8.1 is automatically loaded.

The call to jquery is also simpler. Use the require method to pass in two parameters, module name and callback function, as shown below:

Require (["jquery"], function ($) {// your jquery code here $ ("# id"). click (function (){});});

The require function receives an array composed of module names and then loads all these script modules in parallel. It does not guarantee that these scripts are executed in order, however, this ensures that the running of these scripts meets the dependency between each other, provided that the definitions of these scripts comply with AMD (Asynchronous Module Definition, Asynchronous Module Definition) specifications.

Compared with AMD specifications, CommonJS specifications are much larger. This can be seen from its slogans. Compared with jquery's write less, do more, and Commonjs, the slogans seem more ambitious, javascript: not just for browsers any more !, It has a great significance to subvert the work of traditional js, but commonjs is indeed doing it.

According to CommonJS specifications, a single file is a module. The load module uses the require method to read and execute a file, and finally return the exports object in the file. Hello. js:

Console. log ("this is hello. js "); var hello = function () {console. log ("hello commonjs");} exports. user = "super man"; exports. say = function () {console. log (hello );}

We can use the require function to load this js file and receive it through a variable. In this case, this variable corresponds to the exports object. You can use this variable to use the methods provided by the module, as shown below:

Var hi = require ("./hello"); console. log (hi. user + "say:" + hi. say ());

Similar to require. js, The require method reads js files by default, so the. js suffix can be omitted.

CommonJS is the specification of the server-side module. AMD specification is more the module specification in the browser. Node. JS adopts the CommonJS specification, and RequiresJS and JQuery adopt the AMD specification. AMD specification defines a syntax API, that is, the define function, while CommonJS provides a set of API-level definitions; AMD specifications are different-step loading modules. Callback functions can be specified. CommonJS is a synchronous loading module. Only after the module is loaded can Subsequent operations be performed.