As website features gradually become richer, the JavaScript in web pages has become increasingly complex and bloated. The original way of importing individual JS files through script tags can no longer satisfy the current internet development model; we need a series of complex requirements such as team collaboration, module reuse, unit testing, and so on.

RequireJS is a very compact JavaScript module loading framework and one of the best implementers of the AMD specification. The latest version of RequireJS is only 14K after minification, which is extremely lightweight. It can also work collaboratively with other frameworks. Using RequireJS will definitely improve the quality of your front-end code.

What benefits can requirejs bring

Official description of requirejs:

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

Approximate meaning:

In the browser, it can serve as a module loader for JS files, and it can also be used in Node and Rhino environments, blah blah... This passage describes the basic function of requirejs—"modular loading". What is modular loading? We will explain it one by one in the following sections.

Let's first look at a common scenario and explain how to use requirejs through examples.

The normal way of writing

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="a.js.html"></script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

a.js:

function fun1(){
  alert("it works");
}

fun1();

Maybe you prefer to write it like this

(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})()

The second method uses block scope to declare functions to prevent polluting global variables, but the essence is still the same. When running the above two examples, did you notice that when alert executes, the HTML content is blank, that is,<span>body</span>it is not displayed; it only appears after clicking OK. This isJS blocking browser renderingthe resulting effect.

The requirejs way of writing

Of course, first you need to go to the requirejs website to download the JS ->requirejs.org
index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js.html"></script>
        <script type="text/javascript">
            require(["a"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

a.js:

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})

The browser prompts "it works", indicating the operation is correct, but there is one difference: this time the browser is not blank; the body has already appeared in the page. So far, we can know that requirejs has the following advantages:

1. Prevent JS loading from blocking page rendering
2. Use programmatic calls to load JS, preventing ugly scenarios like the following

<script type="text/javascript" src="a.js.html"></script>
<script type="text/javascript" src="b.js.html"></script>
<script type="text/javascript" src="c.js.html"></script>
<script type="text/javascript" src="d.js.html"></script>
<script type="text/javascript" src="e.js.html"></script>
<script type="text/javascript" src="f.js.html"></script>
<script type="text/javascript" src="g.js.html"></script>
<script type="text/javascript" src="h.js.html"></script>
<script type="text/javascript" src="i.js.html"></script>
<script type="text/javascript" src="j.js.html"></script>

The specific meaning of the code and other features will be explained in later sections:JS modular tool requirejs tutorial (Part 2): Basic knowledge

Article source: https://github.com/liuxey/blog/issues/1