JS Modular Tool Requirejs Tutorial (a): First knowledge Requirejs

Source: Internet
Author: User

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 bring

Official 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 method


<! DOCTYPE html>    <scripttype="Text/javascript" src="A.js"></script><body><span>Body </span></body>           


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

<! DOCTYPE html>     <script Type= "text/javascript"  src=  "require.js" ></script> < Script type= "Text/javascript" > Require ([ "a"  </script>  <body> <span> body</span> </body> </HTML>            


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:

    1. Prevents JS loading from blocking page rendering
    2. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.