JavaScript 모듈 로더에 대한 자세한 설명--RequireJS-JS 튜토리얼-php.cn

JavaScript 모듈 로더에 대한 자세한 설명--RequireJS

青灯夜游

풀어 주다： 2021-02-18 23:04:04

앞으로

2888명이 탐색했습니다.

JavaScript 모듈 로더에 대한 자세한 설명--RequireJS

RequireJS는 JavaScript 모듈 로더입니다. 브라우저에서 사용하기에 적합하지만 Rhino 및 Node와 같은 다른 스크립팅 환경에서도 사용할 수 있습니다. RequireJS를 사용하여 모듈식 스크립트를 로드하면 코드의 로딩 속도와 품질이 향상됩니다.

우선 일반 페이지를 살펴보겠습니다. 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>

로그인 후 복사

실행 결과:

JavaScript 모듈 로더에 대한 자세한 설명--RequireJS

이때 팝업 상자를 작동하지 않으면 페이지가 작동하지 않습니다. 계속 로드하면 페이지 콘텐츠가 없습니다. 이는 우리가 달성하려는 결과가 아닙니다.

다음으로 require.js를 사용하여 작동합니다.

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>

로그인 후 복사

index.js

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

로그인 후 복사

우선, test02.js는 더 이상 페이지에서 가져오지 않고 requireJS만 가져옵니다. 자바스크립트에서는 매개변수 배열이 전달되는 require() 메소드를 사용하며 실제 매개변수는 가져오려는 js 파일의 [경로 + 파일 이름]입니다.

이번 실행 결과:

JavaScript 모듈 로더에 대한 자세한 설명--RequireJS

이때 페이지의 내용이 표시된 것을 볼 수 있습니다. 이전처럼 js가 완료된 후 페이지가 로드될 때까지 기다리는 대신, 페이지가 로드된 후에만 js 코드가 실행되므로 작업 효율성이 크게 향상됩니다.

위 코드에 따르면 requirejs의 기본 API를 분석할 수 있습니다.

requireJS는 정의, require, requirejs

require==requirejs의 세 가지 변수를 정의합니다. 일반적으로 require를 사용하는 것이 더 짧습니다.
define은 모듈을 정의하는 데 사용됩니다
require는 종속 모듈(정의된 모듈 참조)을 로드하고 로드 후 콜백 함수를 실행합니다.

require에는 세 가지 매개 변수가 있습니다:

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

로그인 후 복사

첫 번째 매개 변수: require에 종속성을 정의합니다. 매개변수는 배열 형식이어야 합니다. 종속성이 하나만 있는 경우에도 매개변수는 배열 형식으로 전달되어야 합니다.

두 번째 매개변수: 콜백 함수이며 로드 후 로직을 처리하는 데 사용됩니다. 모든 모듈이 로드될 때 트리거됩니다.

세 번째 매개변수: 모듈 이후의 상황을 처리하는 데 사용되는 콜백 함수이기도 합니다. 로딩이 실패합니다. 위 코드와 같이 js에는 index01.js 파일이 정의되어 있지 않아 이 콜백 함수가 호출되지 않습니다.

네트워크 파일 로드

로컬 js 파일을 로드하기 전에 가끔 네트워크에 있는 파일을 로드해야 하는 경우가 있는데 어떻게 로드하나요? 이제 인터넷에서 js 파일을 로드하는 방법을 소개하겠습니다.

jquery.js 파일을 로드하는 경우를 예로 들어 보겠습니다.

//百度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("页面加载失败~~")
});

로그인 후 복사

인터넷에서 파일을 가져올 때 다음 사항에 주의하세요.

1. method 객체입니다

2. 경로의 값도 객체입니다

3. 인터넷에서 라이브러리 이름을 선택할 때 임의적이지만 다른 사람들이 알 수 있는 이름을 선택하는 것이 좋습니다. 이름을 통해 네트워크 리소스가 무엇인지

4. 라이브러리의 값은 배열이므로 네트워크 이상에 액세스하는 것을 방지하기 위해 동시에 여러 쓰기가 가능합니다.

5. 경로는 접미사 이름을 가질 수 없습니다.

6. 먼저 네트워크에 가서 얻을 수 없으면 로컬 서비스에 대한 부담을 줄이기 위해 로컬에서 얻을 수도 있습니다. 프로젝트 최적화).

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("页面加载失败~~")
});

로그인 후 복사

마찬가지로 경로에 로컬 구성을 추가할 수도 있습니다.

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("页面加载失败~~")
});

로그인 후 복사

위의 예에서 require.config 구성이 반복적으로 표시됩니다. 구성이 각 페이지에 추가되면 requirejs가 제공하는 내용은 매우 촌스러워 보일 것입니다. "마스터 데이터"라는 함수를 사용하려면 먼저 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"]
    }
});

로그인 후 복사

그런 다음 다음 방법을 사용하여 페이지에서 requirejs를 사용합니다.

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

로그인 후 복사

공식 방법은 태그 속성을 기반으로 하는 방법을 제공합니다.

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

로그인 후 복사

모든 구성 가져온 js는 main.js에 배치되므로 페이지에는 해당 태그만 필요합니다.

代码演示如下：

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

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

로그인 후 복사

main.js--requirejs的全局配置

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

로그인 후 복사

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>

로그인 후 복사

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

위 내용은 JavaScript 모듈 로더에 대한 자세한 설명--RequireJS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!