Home > Developer > Web Develop
With the website features gradually enriched, the page JS also become more and more complex and bloated, the original through the script tag to import a JS file this way has been unable to meet the current Internet development model, we need team collaboration, module reuse, unit testing and a series of complex needs.
Requirejs is a very compact JavaScript module loading framework and is one of the best implementations of the AMD specification. The latest version of Requirejs is only 14K compressed and is very lightweight. It can also work with other frameworks, and using Requirejs will certainly improve the quality of your front-end code.
What benefits Requirejs can bringOfficial description of the Requirejs:
Requirejs is a JavaScript file and module loader. It's optimized for in-browser use, but it can be used in the other JavaScript environments, like Rhino and Node. Using a modular script loader like Requirejs would improve the speed and quality of your code.
General meaning:
In the browser can be as a JS file module loader, also can be used in the node and Rhino environment, Balabala .... This passage describes the basic function of Requirejs "modular loading", what is modular loading? We're going to explain one by one of the space that follows.
Let's take a look at a common scenario and explain how to use Requirejs with examples.
Normal Writing methodIndex.html:
<! DOCTYPE html> <scripttype="Text/javascript" src="A.js"></script><body><span>Body </span></body>
A.js:
function fun1() { alert("It Works");} fun1(); Maybe you'd prefer to write like this.
(function() { function fun1() { alert("It Works"); fun1();}) ()The second method uses the block scope to declare the function to prevent pollution of the global variables, the essence is the same, when running the above two examples do not know whether you notice that when the alert executes, the HTML content is blank, that is <span>body</span> not displayed, when clicked OK, it appears, this is JS blocks The results caused by browser rendering.
Of course, first of all to the Requirejs website to download JS-and Requirejs.rog
Index.html:
<! DOCTYPE html> <script Type= "text/javascript" src= "require.js" ></script> < Script type= "Text/javascript" > Require ([ "a" </script> <body> <span> body</span> </body> </HTML>
A.js:
Define(function() { function fun1() { alert("It Works"); fun1();}) Browser prompted the "it works", stating that the operation is correct, but a little different, this browser is not a blank, the body has appeared in the page, so far can know Requirejs has the following advantages:
<script Type="Text/javascript" Src="A.js"></script><script Type="Text/javascript" Src="B.js"></script><script Type="Text/javascript" Src="C.js"></script><script Type="Text/javascript" Src="D.js"></script><script Type="Text/javascript" Src="E.js"></script><script Type="Text/javascript" Src="F.js"></script><script Type="Text/javascript" Src="G.js"></script><script type= "text /javascript " src=" H.js " ></script><scripttype= "text/javascript" src= "i.js" ></script> <script type= "text/javascript" src= "J.js "></SCRIPT>
JS Modular Tool Requirejs Tutorial (a): First knowledge Requirejs
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
