JavaScript Advanced Modular Modular Require.js specific usage method

This article describes the specific use require.js share for everyone, but also give yourself a note.


RequireJS javascript is a very small load frame module is AMD (Asynchronous Module Definition, asynchronous module loading mechanism) Best Specification implementations. After the latest version of requireJS compression only 14k, rated as very lightweight. It can also work with other frameworks coordination, use requireJS will make our front-end code quality can be improved.

First, let’s look at a normal page load js


this is a page

The result:


At this time, if we do not do pop-up operation, then the page will not load, there will be a page content, which is not the result we want to achieve.

Here we use require.js operation:


           require ([ "js / index", "js / index01"], function () {console.log ( "js function when loaded successfully be executed ");}, function () {Console.log ("Function");});});       

Define (“this is a test!”); function test () {console.log (” Haha, I am A Test! “);} test ();});
 First page no longer imported TEST02.js, just imported Requirejs, followed by In JavaScript, we use the Require () method in which an array parameter is passed, and the [path + file name of the JS file we have to import.   

can be seen Out, the page content is already displayed. It is not like the previous training to wait after the JS running is completed, but the JS code is run after the page load is complete, so that the operation efficiency is greatly improved.

According to the above code, we can analyze the basic API of Requirejs:

javascript高级模块化require.js的具体使用方法 Requirejs will define three variables: Define, Require, Requirejs

javascript高级模块化require.js的具体使用方法 Require == Requirejs, usually use Require shorter.

Define is used to define a module

Require loading dependencies (reference definition modules), and perform loadingCallback function

require three parameters:
  1. require ([ “js / index”, “js / index01”], function ( ) {console.log ( “js function when loaded successfully be executed”);}, function () {console.log ( “js function when the execution will fail to load”);}); // first parameters: require definition of the dependent parameters must be in the form of an array, even if only a dependency must also provide an array of parameter passing. // second argument: a callback function to handle the load after completion of the logic, when the third parameter triggering // all loaded modules: a callback function is to handle the situation after loading module fails. As the above code, js index01.js not defined in this document, so the callback function is invoked.

load the network file
  before we load the js file are local, but there are times when we need to load network files, and then how to load it? Here we have to explain how to load js files on the network  
We now jquery.js to load a file as an example:

// Baidu cdn public library jQuery address: // jQuery official address: // Note: You can not add a suffix to the network up to get, or did not get require.config ({paths: {// go a name for the library on the network: jquery “jquery”: [ “ “]}}); // Require ([JQuery”, “JS / TEST01”, “JS / TEST02″], FUNCTION () {Alert (” Page loading is successful ~~ “);}, function () {Alert (” page load failed ~~ “)});

Note when using the file on the network :

1, the parameter of the config method is an object 2. The value of Paths is also an object
 3. When we take the name of the library on the network, it is suggested Name, others can know what resources are your network resources  4, the value of the library is an array, which means multiple simultaneous attention, preventing network abnormalities from being able to get  5, special attention: Network resources The path cannot with the compact name, otherwise 
6 can not be removed, we can also let go to the network. If you can’t get it, you can take it locally, reduce the pressure of the local service (which is an optimization).

Require.config ({paths: {// This configuration is configured to mitigate the pressure “jQuery” of the local server: [“ 1.js “,” js / jquery-1.8.3 “]}}); // Require ([JQuery”, “JS / TEST01”, “JS / TEST02”], Function () {Alert (“page load Success ~~ “);}, function () {Alert (” page load failed ~~ “)});

Also we can also configure local to PATHS Medium:

Require.config ({paths: {// This configuration, mitigate the pressure “jQuery” of the local server: [“″”js/jquery-1.8.3” ], // The local JS file is equally configured, then “TEST01”: [“JS / TEST01”], “TEST02”: [“JS / TEST02”]}}; // Require ([“jQuery”, “TEST01”, “TEST02”], function () {Alert (“page load success ~~”);}, function () {Alert (“page load failed ~~”)});

 The require.config configuration is repeated in the example above. If you join the configuration in each page, it is inevitable that Requirejs provides a function called "primary data", we first Create a main.js:   ({paths: {// This configuration is configured to reduce the pressure "jQuery" of the local server: ["https: // code / jQuery-3.1.1 "JS / jQuery-1.8.3"], // The local JS file is equally configured, then reference "TEST01": ["JS / TEST01"], "TEST02" : ["JS / TEST02"]}}; 

 ) then uses removejs:  

Require ([jQuery “,” T1 “,” T2 “], function () {Alert (” page load is successful ~~ “);}, function () {alert (” page load failed ~~ “)}
In the official method, a tag attribute is provided:

    All configurations and import js are placed in main.js, so as long as such a label is like this.  The code demo is as follows:    // TEST01.JS - Define a JS module define (function () {function test () {Console.log ("this is test01.js");} test (); $ ("p"). CSS ("color", "# db7093");});  

// main.js – Requirejs global configuration require.config ({paths: {“jQuery”: [jQuery-1.8.3 “],” test “: [” TEST01 “]}, shim: {” test “: [” jQuery “]}}; Require ([” TEST “], function () {console.log (” Success! “);};
   // Index.html, at this time, only one JS file is required  

I am Liyanan and this is a testn page.

  The above is all the contents of this article, I hope to help everyone's learning, I hope everyone will support Tumi Clouds.  
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment