Detailed explanation of JavaScript module loader--RequireJS-JS Tutorial-php.cn

Detailed explanation of JavaScript module loader--RequireJS

Related recommendations: "javascript video tutorial"

RequireJS is a JavaScript module loader. It's great for use in the browser, but it can also be used in other scripting environments, like Rhino and Node. Using RequireJS to load modular scripts will improve the loading speed and quality of your code.

First of all, let’s take a look at a common page js loading

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/index02.js" ></script>
    </head>
    <body>
        <h1>this is a page.</h1>
    </body>
</html>

Copy after login

Running result:

Detailed explanation of JavaScript module loader--RequireJS

This At this time, if we do not operate the pop-up box, the page will not load and there will be no page content. This is not the result we want to achieve.

Below we use require.js to operate:

index.htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/require2.1.11.js"></script>
        <script type="text/javascript">
            require(["js/index","js/index01"],function(){
                console.log("当js加载成功后会执行的函数");
            },function(){
                console.log("当js加载失败后会执行的函数");
            });
        </script>
    </head>
    <body>
    </body>
</html>

Copy after login

index.js

define(function(){
    console.log("this is a test!");
    function test(){
        console.log("haha,i am a test!");
    }
    test();
});

Copy after login

First, test02.js is no longer imported on the page, only requireJS is imported. Secondly, in JavaScript, we use the require() method and pass an array of parameters. The actual parameter is the [path file name of the js file we want to import.

The running result at this time:

Detailed explanation of JavaScript module loader--RequireJS

It can be seen that this The page content has been displayed. Instead of waiting for the page to load after the js is completed, as we did before, the js code is run only after the page is loaded, which greatly improves the operating efficiency.

According to the above code, we can analyze the basic API of requirejs:

requireJS will define three variables: define, require, requirejs

require==requirejs, generally using require is shorter.
define is used to define a module
require to load dependent modules (referencing the defined modules) and execute the callback function after loading

require has three parameters:

require(["js/index","js/index01"],function(){
                console.log("当js加载成功后会执行的函数");
            },function(){
                console.log("当js加载失败后会执行的函数");
            });

Copy after login

The first parameter: defines the dependency in require. The parameters must be in the form of an array. Even if there is only one dependency, an array must be used. Pass parameters in form.

The second parameter: It is a callback function, used to process the logic after loading. It is triggered when all modules are loaded.

The third parameter: It is also a callback function, used to Handle the situation after module loading fails. As shown in the above code, the file index01.js is not defined in js, so this callback function is not called.

Load network files

Before we loaded local js files, but sometimes we need to load files on the network, so how to load them Woolen cloth? Now let’s introduce how to load js files on the Internet.

Let’s take loading a jquery.js file as an example:

//百度cdn公共库jQuery地址：      http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址：           https://code.jquery.com/jquery-3.1.1.js
//注意：网络上去取时不能加后缀，否则取不到
require.config({
    paths : {
        //为网络上的库去一个名字：jquery
        "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});

Copy after login

Pay attention when fetching files on the Internet :

1. The parameter of the config method is an object

2. The value of paths is also an object

3. When we name the library on the network It’s arbitrary, but it is recommended to give it a meaningful name. Others can know what your network resource is through the name.

4. The value of the library is an array, which means multiple writes can be made at the same time to prevent abnormal network access. Less than

5. Special attention: the network resource path cannot have a suffix name, otherwise it cannot be obtained.

6. We can also ask you to get it from the network first. If it cannot be obtained, then Get it locally to reduce the pressure on local services (it belongs to project optimization).

require.config({
    paths : {
        //这样配置，减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
    }
});

//
require(["jquery","js/test01","js/test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});

Copy after login

Similarly, we can also add local configuration to paths:

require.config({
    paths : {
        //这样配置，减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
        //将本地的js文件同样配置，之后引用
        "test01" : ["js/test01"],
        "test02" : ["js/test02"]
    }
});

//
require(["jquery","test01","test02"],function(){
    alert("页面加载成功~~");
},function(){
    alert("页面加载失败~~")
});

Copy after login

The require.config configuration appears repeatedly in the above example. If the configuration is added to each page, it will definitely look very special. No, requirejs provides a function called "master data". We first create a main.js:

require.config({
    paths : {
        //这样配置，减轻本地服务器的压力
        "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
        //将本地的js文件同样配置，之后引用
        "test01" : ["js/test01"],
        "test02" : ["js/test02"]
    }
});

Copy after login

and then use requirejs in the following way on the page:

<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">

    require(["jquery","t1","t2"],function(){
        alert("页面加载成功~~");
    },function(){
        alert("页面加载失败~~")
    });

</script>

Copy after login

The official provides a method based on tag attributes:

<script data-main="js/main" src="js/require2.1.11.js" ></script>

Copy after login

Place all configurations and imported js in main.js, so that only such a tag is needed on the page.

代码演示如下：

//test01.js--定义一个js模块
define(function(){
    function test(){
        console.log("this is test01.js");
    }
    test();

    $("p").css("color","#DB7093");
});

Copy after login

main.js--requirejs的全局配置

require.config({
    paths:{
        "jquery":["jquery-1.8.3"],
        "test":["test01"]
    },
    shim:{
        "test":["jquery"]
    }
});
require(["test"],function(){
    console.log("success!");
});

Copy after login

index.html--此时，引入js文件只需一行代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" >
        </script>
    </head>
    <body>
        <p>i am liyanan and this is a testn Page.</p>
    </body>
</html>

Copy after login

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Detailed explanation of JavaScript module loader--RequireJS. For more information, please follow other related articles on the PHP Chinese website!