JS Modular Tool Requirejs Tutorial (i) __js

As the site functions gradually rich, the page JS also become more and more complex and bloated, the original script tags to import a JS file this way has not been able to meet the current Internet development model, we need team collaboration, module reuse, unit testing, and so a series of complex needs.

Requirejs is a very compact JavaScript module loading framework, one of the best implementations of AMD specifications. The latest version of the Requirejs compressed only 14K, is very lightweight. It can also work in conjunction with other frameworks, and using Requirejs will definitely improve your front-end code quality. What good can Requirejs bring?

Official description of the Requirejs:

Requirejs is a JavaScript file and module loader. It is optimized to in-browser use, but it can being used in other JavaScript environments, like Rhino and Node. Using a modular script loader like Requirejs would improve the speed and quality of the Your code.

General meaning:

In the browser can be used as a JS file module loader, can also be used in node and rhino environment, Balabala .... This passage describes the basic functions of Requirejs "modular loading" and what is modular loading. We're going to explain one by one from the following pages.

Let's take a look at a common scenario, using examples to explain how to use Requirejs to write in a normal way

Index.html:

<! DOCTYPE html>
 
A.js:

function fun1 () {
  alert ("It Works");
}

Fun1 ();
 
Maybe you prefer to write like this.

(function () {
    function fun1 () {
      alert ("It Works");
    }

    Fun1 ();
}) ()
 
The second method uses a block scope to assert that the function prevents contamination of global variables, essentially the same, and when running the above two examples do not know if you notice that when alert executes, the HTML content is blank, namely <span>body</span > is not displayed, when the click is OK, only to appear, this is JS blocking browser rendering results. Requirejs Writing

Of course first to Requirejs's website to download JS-> Requirejs.rog
Index.html:

<! DOCTYPE html>
 
A.js:

Define (function () {
    function fun1 () {
      alert ("It Works");
    }

    Fun1 ();
})
 
Browser prompts the "It works", indicating that the operation is correct, but a little different, this browser is not a blank, the body has appeared in the page, so far you can know Requirejs has the following advantages: To prevent JS load blocking page rendering using the way the program calls to load JS, Prevent the appearance of the following ugly scenes

<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"
G.js "></script>
<script type=" Text/javascript "src=" h.js "></script>
<script type= "Text/javascript" src= "i.js" ></script> <script type= "Text/javascript" src= "J.js" ></script
>
 
Specific meanings and other features in the code will be explained in the following space: JS Modular Tools Requirejs Tutorial (ii): basic knowledge

Article Source: HTTPS://GITHUB.COM/LIUXEY/BLOG/ISSUES/1