Normal Writing method
Index.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.
Requirejs notation
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:
- Prevents JS loading from blocking page rendering
- Use program calls to load JS, prevent the appearance of the following ugly scene
<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