Of Stack

Instance of RequireJS dependency of recommendation

  • 2021-07-13 03:59:54
  • OfStack

Now look at the neat features brought by RequireJS:

There is an html page below: 


<html> 
 <head> 
  <title>configuration</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link type="text/css" href="../master/plugin/artDialog4.1.6/skins/blue.css" rel="stylesheet"/> 
  <script data-main="../master/script/app/config" src="../master/script/third_party/require.js"></script> 
 </head>

Most of the script statements introduce the require. js file, and another js file is specified in data-main: config. js, which I define as follows: 


require.config({ 
  paths: { 
    "jquery": "../third_party/jquery-1.8.0.min", 
    "jquery.validate": "../../plugin/jquery-validation-1.9.0/jquery.validate", 
    "jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog" 
  } 
}); 
 
require(["jquery"], function(util) { 
 
  require(["jquery.validate", "jquery.artDialog"], function(util) { 
 
    require(["masterUI", "masterSite", "configuration"], function(util) {                                                                
      $(document).ready(function() { 
    window.configuration.init(); 
      }) 
    }); 
  }); 
});

The location of the js files in require. config that are configured with the introduced third party js library, including jquery, jquery. validate, and jquery. artDialog

After three require calls, one layer is set by one layer. Note that the dependence order is that the inner layer depends on the outer layer. The first thing to be loaded is written to the outermost layer.

There is a call written in the innermost part, $(document). ready (...) was originally written in the html page, so that's good. Decoupled from html again.

Related articles: