Require.js와 DOM에서 <script> 요소를 만드는 것의 차이점은 무엇입니까? [닫은]

<script>DOM에서 Require.JS amd를 사용하여 단순히 요소를 만드는 것의 차이점은 무엇입니까 ?

Require.JS에 대한 이해는 종속성을로드 할 수있는 기능을 제공하지만 <script>필요한 외부 JS 파일을로드 하는 요소를 작성하여 간단히 수행 할 수는 없다는 것입니다 .

예를 들어, 함수 doStuff()가 필요 하다고 가정 합니다 needMe(). doStuff()외부 파일 do_stuff.js에있는 동안 needMe()외부 파일에 need_me.js있습니다.

이것을 Require.JS 방식으로 수행하십시오.

define(['need_me'],function(){
    function doStuff(){
        //do some stuff
        needMe();
        //do some more stuff
    }
});

단순히 스크립트 요소를 작성하여이를 수행하십시오.

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(scriptElement);

    //do some stuff
    needMe();
    //do some more stuff
}

이 두 가지 작업. 그러나 두 번째 버전에서는 모든 Require.js 라이브러리를로드하지 않아도됩니다. 나는 실제로 기능상의 차이가 보이지 않습니다 ...

ajaxian.com의 유용한 기사는 다음과 같습니다.

RequireJS : 비동기 JavaScript 로딩

• 일종의 # include / import / require
• 중첩 된 종속성을로드하는 기능
• 개발자의 사용 편의성, 배포를 돕는 최적화 도구의 지원

DOM에서 단순히 요소를 생성하는 것과 비교하여 Require.JS는 어떤 장점을 제공합니까?

예를 들어, 스크립트 태그를 비동기 적으로 작성하는 경우 need_me.js 파일로드가 완료 되기 전에needMe() 함수가 호출됩니다 . 이로 인해 함수가 정의되지 않은 예외가 발생하지 않습니다.

대신, 실제로 제안하는 것을 작동 시키려면 다음과 같이해야합니다.

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';

    scriptElement.addEventListener("load", 
        function() { 
            console.log("script loaded - now it's safe to use it!");

            // do some stuff
            needMe();
            //do some more stuff

        }, false);

    document.getElementsByTagName('head')[0].appendChild(scriptElement);

}

아마도 RequireJS와 같은 패키지 관리자를 사용하거나 위에서 설명한대로 순수한 JavaScript 전략을 사용하는 것이 최선일 수도 아닐 수도 있습니다. 웹 응용 프로그램이 더 빨리로드 될 수 있지만 사이트에서 기능 및 기능을 호출하면 해당 작업을 수행하기 전에 리소스가로드 될 때까지 기다려야하므로 속도가 느려집니다.

웹 응용 프로그램이 단일 페이지 앱으로 구축 된 경우 사람들이 실제로 페이지를 자주 다시로드하지 않을 것임을 고려하십시오. 이 경우 모든 것을 미리로드하면 실제로 앱을 사용할 때 경험이 더 빨라 보이게됩니다 . 이 경우 페이지 헤드 또는 본문에 스크립트 태그를 포함시켜 모든 리소스를로드 할 수 있습니다.

그러나 한 페이지에서 다른 페이지로 전환하여 리소스를 다시로드하는보다 전통적인 모델을 따르는 웹 사이트 또는 웹 응용 프로그램을 구축하는 경우 지연로드 방식이 이러한 전환 속도를 높이는 데 도움이 될 수 있습니다.

RequireJS 사용이 의미가있는 다른 중요한 이유는 다음과 같습니다.

1. 규모가 큰 프로젝트에서는 자신의 종속성을 빠르게 관리 할 수 ​​없습니다.
2. 작은 파일을 원하는만큼 가질 수 있으며 종속성이나로드 순서를 추적 할 필요가 없습니다.
3. RequireJS를 사용하면 창 객체를 건드리지 않고 모듈 식 앱 전체를 작성할 수 있습니다.

이 요점에서 여기에 rmurphey의 의견 에서 발췌 .

추상화의 레이어는 배우고 적응하는 악몽이 될 수 있지만, 목적을 달성하고 잘 수행하면 의미가 있습니다.

보다 구체적인 예는 다음과 같습니다.

60 파일이있는 프로젝트에서 일하고 있습니다. 우리는 그것을 실행하는 두 가지 모드가 있습니다.

1. 연결된 버전, 1 개의 큰 파일을로드하십시오. (생산)

2. 모든 60 파일로드 (개발)

우리는 로더를 사용하고 있으므로 웹 페이지에 하나의 스크립트 만 있습니다.

<script src="loader.js"></script>

기본값은 mode # 1 (하나의 큰 연결 파일로드)입니다. 모드 # 2 (개별 파일)에서 실행하기 위해 플래그를 설정했습니다. 무엇이든 될 수 있습니다. 쿼리 문자열의 키입니다. 이 예제에서 우리는 이것을합니다

<script>useDebugVersion = true;</script>
<script src="loader.js"></script>

loader.js는 다음과 같습니다

if (useDebugVersion) {
   injectScript("app.js");
   injectScript("somelib.js");
   injectScript("someotherlib.js");
   injectScript("anotherlib.js");
   ... repeat for 60 files ...
} else {
   injectScript("large-concatinated.js");
}

빌드 스크립트는 다음과 같은 .sh 파일입니다.

cat > large-concantinated.js app.js somelib.js someotherlib.js anotherlib.js

기타...

새 파일이 추가되면 개발 injectScript("somenewfile.js")중이기 때문에 mode # 2를 사용하는 것 같습니다. loader.js에 줄을 추가해야합니다.

그런 다음 나중에 프로덕션을 위해 빌드 스크립트에 somenewfile.js를 추가해야합니다. 우리는 종종 잊어 버린 다음 오류 메시지를 얻는 단계입니다.

AMD로 전환하면 2 개의 파일을 편집 할 필요가 없습니다. loader.js와 빌드 스크립트를 동기화 상태로 유지하는 문제는 사라졌습니다. 사용 r.js하거나 webpack빌드하기 위해 코드를 읽을 수 있습니다.large-concantinated.js

또한 종속성을 처리 할 수 ​​있습니다. 예를 들어 다음과 같이 2 개의 lib1.js 및 lib2.js 파일이로드되었습니다.

injectScript("lib1.js");
injectScript("lib2.js");

lib2에는 lib1이 필요합니다. 내부에 코드가 있습니다.

lib1Api.installPlugin(...);

그러나 삽입 된 스크립트가 비동기식으로로드되므로 올바른 순서로로드 될 것이라는 보장이 없습니다. 이 두 스크립트는 AMD 스크립트가 아니지만 require.js를 사용하여 종속성을 알 수 있습니다

require.config({
    paths: {
        lib1: './path/to/lib1',
        lib2: './path/to/lib2',
    },
    shim: {
        lib1: {
            "exports": 'lib1Api',
        },
        lib2: {
            "deps": ["lib1"],
        },
    }
});

나는 lib1을 사용하는 모듈입니다.

define(['lib1'], function(lib1Api) {
   lib1Api.doSomething(...);
});

이제 require.js가 스크립트를 주입 할 것이며 lib2가 lib1에 의존한다고 말했기 때문에 lib1이로드 될 때까지 lib2를 주입하지 않습니다. 또한 lib2와 lib1이 모두로드 될 때까지 lib1을 사용하는 모듈을 시작하지 않습니다.

이것은 개발을 좋게 만들고 (빌드 단계가 필요없고 로딩 순서에 대해 걱정할 필요가 없음) 생산을 좋게 만듭니다 (추가 된 각 스크립트에 대해 빌드 스크립트를 업데이트 할 필요가 없습니다).

추가 보너스로 우리는 webpack의 babel 플러그인을 사용하여 이전 브라우저의 코드에서 babel을 실행할 수 있으며 다시 빌드 스크립트를 유지할 필요가 없습니다.

Chrome (선택한 브라우저) import이 실제 지원 을 시작한 경우 개발을 위해 지원 으로 전환하지만 실제로는 변경되지 않습니다. 웹팩을 사용하여 연결된 파일을 만들 수 있으며 모든 브라우저의 코드에서 babel을 실행할 수 있습니다.

이 모든 것은 스크립트 태그를 사용하지 않고 AMD를 사용하여 얻습니다.