Home > Developer > Web Develop
Download the latest version of Require.js.
After downloading, put it in the project's script folder, such as the JS folder, the project structure should look like:
To fully use require.js, remove all inline scripts from the HTML file, leaving only one
Words:
<! DOCTYPE html>
<title>my Sample project</title>
<!--Data-main Property tells Require.js to load js/main.js after require.js load
<script data-main= "Js/main" src= "Js/require.js" ></script>
<body>
</body>
In Main.js, you can load a dependent script through require (), so that you don't have to display the declaration in HTML.
Main.js is equivalent to an entry point:
Require (["helper/util"], function (util) {
This callback function is executed when the scripts/helper/util.js is loaded.
If Util.js also declares a dependent file (module), then this function waits for those dependent files (modules)
Called when the load is complete
Todo
});
Through the introduction, we can see that the Requirejs is different from the traditional <script> label loading mode,
The traditional <script> label approach will typically have the following code:
<body>
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.plugin.xx.js" ></script>
<script type= "Text/javascript" src= "Js/a1.js" ></script>
<script type= "Text/javascript" src= "Js/a2.js" ></script>
<script type= "Text/javascript" src= "Js/a3.js" ></script>
......
</body>
And Require.js uses the module ID loading mode
<script data-main= "Js/main" src= "Js/require.js" ></script>
Requirejs finds the path to the script, mainly through BASEURL, in Data-main, declares BASEURL
The path, in this code is the JS folder, if you do not declare Data-main, BASEURL default point to
The folder where the HTML page resides. Of course, you can also declare BASEURL through configuration, which is detailed below.
Note that the modules declared in the Data-main are loaded asynchronously, which means that if the page is followed by <script>
Load multiple scripts that do not necessarily load after the modules declared in Data-main are loaded, or later
JS code If there is a dependency on the module declared in Data-main, an error may occur.
Requirejs assumes that all dependencies are scripted by default, so you can omit the ". js" suffix when writing dependencies,
Requirejs will automatically add this suffix. Requirejs will automatically translate the module ID into a path
(path), we can also declare multiple paths (paths) in the configuration, through BaseUrl + paths, you can use the
Few code find the corresponding JS file, more elegant and concise than the <script> label.
In general, the JS file can be found through BASEURL + paths, but sometimes there may be exceptions, once
Requirejs found that the module ID contains the following characters, then it does not follow the BASEURL + Paths way to
Look for the JS file of this module, but the way to use the URL:
o if ID ends with ". js"
o If the ID starts with "/"
o If the ID starts with "http:" or "https:"
In general, it is better to use BASEURL + paths to declare the module ID, which gives you more flexibility.
Similarly, when we organize the JS code files, we try to avoid the use of deep paths, and the best way to put JS files
Under BASEURL, it is best not to exceed the depth of two layers, here is a good example:
? www/
? Index.html
? js/
? app/
? Sub.js
? lib/
? Jquery.js
? Canvas.js
? App.js
In the index.html:
<script data-main= "Js/app.js" src= "Js/require.js" ></script>
In the App.js:
Requirejs.config ({
Load module from Js/lib by default
BASEURL: ' Js/lib ',
If the module ID starts with the app, it will look in the Js/app directory
But be careful not to add ". js", otherwise the paths rules will expire
Paths: {
App: '.. /app '
}
});
Requirejs ([' jquery ', ' canvas ', ' app/sub '),
function ($, canvas, sub) {
After the jQuery, canvas and app/sub modules are loaded, this function is executed
Todo
});
When using Requirejs, it is recommended that a library with a version number like JQuery, with a separate file to identify the version number,
Remove the version number from the file name.
Requirejs requires a JS file to define only one module. In this case, however, each load of a module will produce
An HTTP request, Requirejs provides an optimization tool that, in the final production environment, can package all modules
Block into a file.
Define modules can use the Define () method, define () has three parameters, you can refer to the previous article.
Define a module that has only key-value pairs and no dependencies:
JS Modular Programming (IV)--require applications
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
