Requirejs domReady 플러그인 대 Jquery $ (document) .ready ()?

RequireJS를 사용하고 있으며 DOM 준비에서 무언가를 초기화해야합니다. 이제 RequireJS는 domReady플러그인을 제공 하지만 jQuery $(document).ready()가 필요했기 때문에 이미 jQuery를 사용할 수 있습니다.

그래서 두 가지 옵션이 있습니다.

1. domReady플러그인 사용 :

   require(['domReady'], function (domReady) {
       domReady(function () {
           // Do my stuff here...
       });
   });

2. 사용 $(document).ready():

   $(document).ready(function() {
       // Do my stuff here...
   });

어떤 것을 선택해야하며 그 이유는 무엇입니까?

두 옵션 모두 예상대로 작동하는 것 같습니다. RequireJS가 마술을하고 있기 때문에 jQuery에 확신이 없습니다. 즉, RequireJS가 스크립트를 동적으로 추가하기 때문에 동적으로 요청 된 모든 스크립트가로드되기 전에 DOM 준비가 발생할 수 있다는 점이 걱정됩니다. 반면 RequireJS는 domReady이미 jQuery가 필요한 경우 추가 JS에 부담을 추가 합니다.

질문

• domReadyjQuery를 가질 수 있는데 RequireJS가 플러그인을 제공하는 이유는 무엇 $(document).ready();입니까? 나는 다른 의존성을 포함하는 것의 이점을 보지 못합니다.
• 필요를 충족시키기 위해 브라우저 간 AJAX를 제공하지 않는 이유는 무엇입니까?

내가 아는 domReady한, 문서가 준비된 후에 필요한 모듈은 가져 오거나 실행되지 않으며 jQuery가 필요한 동일한 작업을 수행 할 수도 있습니다.

require(['jQuery'], function ($) {
    $(document).ready(function () {
        // Do my stuff here...
    });
});

내 질문에 대해 더 명확하게 말하면 domReady, require 또는 jQuery? 의 차이점은 무엇 입니까?

모든 핵심 사항이 이미 해결 된 것 같지만 몇 가지 세부 사항이 균열을 통해 떨어졌습니다. 주로:

domReady

플러그인이자 모듈입니다. 후행이있는 요구 사항 배열에 포함 !하면 DOM과 상호 작용하는 것이 "안전"할 때까지 모듈이 실행되지 않습니다.

define(['domReady!'], function () {
    console.info('The DOM is ready before I happen');
});

로드 및 실행은 서로 다릅니다. 모든 파일이 가능한 한 빨리로드되기를 원하면 시간에 민감한 내용의 실행입니다.

당신이를 생략하면 !, 다음은 DOM와 상호 작용하는 것이 안전하기 전에 실행하지 않습니다 콜백을 할 수있는 기능, 될 일이 그냥 일반 모듈입니다 :

define(['domReady'], function (domReady) {
    domReady(function () {
        console.info('The DOM is ready before I happen');
    });
    console.info('The DOM might not be ready before I happen');        
});

domReady를 플러그인으로 사용할 때의 이점

차례대로 의존하는 모듈에 의존하는 코드 domReady!는 매우 중요한 이점이 있습니다. DOM이 준비 될 때까지 기다릴 필요가 없습니다!

에 의존하는 모듈 B에 의존하는 코드 블록 A가 있다고 가정합니다 domReady!. 모듈 B는 DOM이 준비되기 전에로드를 완료하지 않습니다. 차례로 A는 B가로드되기 전에 실행되지 않습니다.

domReadyB에서 일반 모듈 로 사용하려면 A가에 의존해야 할 domReady뿐만 아니라 domReady()함수 호출 내에서 코드를 래핑해야합니다 .

또한,이 방법 domReady!을 통해 동일한 이점을 즐긴다 $(document).ready().

domReady와 $ (document) .ready ()의 차이점

둘 다 DOM이 본질적으로 동일한 방식으로 준비되었는지 여부 /시기를 알아냅니다.

잘못된 시간에 jQuery가 실행되는 것에 대한 두려움

jQuery는 DOM이 jQuery보다 먼저로드되는 경우에도 준비된 콜백을 실행합니다 (코드는 어떤 것이 먼저 발생하는지 상관하지 않습니다.).

주요 질문에 대한 답변 :

jquery를 가질 수 있는데 왜 플러그인을 requirejs제공 합니까?domReady$(document).ready();

그들은 실제로 두 가지 다른 일을합니다. RequireJS의 domReady종속성은이 모듈이 실행되기 전에 DOM이 완전히로드되어야한다는 것을 의미하며 (따라서 원하는 경우 애플리케이션의 여러 모듈에서 찾을 수 있음) $(document).ready()대신 DOM이 작동 할 때 콜백 함수를 실행합니다. 로딩 완료.

차이는 미묘한 보이지만,이 생각할 수 있습니다 : 나는에 의존하거나 할 수 있도록 내가 필요 어떤 방법으로 DOM에 결합 할 수있는 모듈이 domReady모듈 정의 시간에 커플 그것을, 또는를 내려 놓고 $(document).ready()그것의 끝에서 모듈의 init 함수에 대한 콜백으로. 나는 첫 번째 접근 방식을 클리너라고 부를 것입니다.

한편, DOM이 준비되었을 때 바로 발생해야하는 $(document).ready()이벤트가있는 경우 이벤트는 이동 대상이 될 것입니다. RequireJS가 모듈로드를 완료하는 데 특별히 의존하지 않기 때문입니다. 에서 호출이 충족됩니다.

또한 jQuery와 함께 RequireJS를 반드시 사용하는 것은 아니라는 점을 고려할 가치가 있습니다. DOM 액세스가 필요한 모든 라이브러리 모듈 (jQuery에 의존하지 않음)은 domReady.

표시되는 순서대로 총알에 응답 :

• 둘 다 같은 일을합니다
• 어떤 이유로 든 jquery에 대한 예약이있는 경우 domReady를 사용하십시오.
• 맞습니다. jQuery를 사용하십시오.
• 모든 사람이 jQuery를 사용하는 것은 아니기 때문에
• 동의합니다. jQuery를 사용하십시오.
• 정의에 따른 플러그인은 '필요를 공급'합니다.
• 크로스 브라우저 아약스는 문제가 아닙니다. 교차 도메인? 아마있을 것이고, 없다면 먹이를 줄 필요가 없습니다.
• , -, -, - 확인

그것에 관해서, 당신은 이것을 지나치게 생각하고 있습니다. domReady에서 자바 스크립트를 실행하는 메커니즘입니다. jQuery가 없다면 domReady 플러그인을 옹호 할 것입니다. jQuery가 있으므로 이미 사용 가능한 작업을 수행하기 위해 더 많은 스크립트를로드하지 마십시오.

선명도 업데이트

domReady 플러그인 은 문서가 '준비'되었을 때 호출 할 함수 를 수집합니다 . 이미로드 된 경우 즉시 실행됩니다.

JQuery는 함수를 수집하고 지연된 객체 를 '준비된'DOM에 바인딩합니다 . DOM이 준비되면 지연된 객체가 해결되고 함수가 실행됩니다. DOM이 이미 '준비'된 경우 지연된 항목이 이미 해결되어 함수가 즉시 실행됩니다.

이것은 그들이 정확히 똑같은 일을 효과적으로한다는 것을 의미합니다.

약간의 여러 모듈 requirejs 실험 후 내가 사용하는 것이 좋습니다 domReady을 .

requirejs가 여러 모듈을로드 할 때 $ (document) .ready (...) 와 관련된 함수 가 호출되지 않는다는 것을 알았습니다. 모든 requirejs 코드가 실행되기 전에 dom이 준비되고 jquery 준비 콜백 핸들러가 사용자 정의 함수, 즉 기본 모듈 코드 내에서 바인딩되기 전에 호출된다고 생각합니다.

require(['jquery',
    'underscore',
    'text!some_template.html',
    './my_module_1',
    './my_module_2',
    'domReady',
    'other_dependency_1',
    'other_dependency_2'
    ], function($, _, someTemplate, myModule1, myModule2, domReady) {

    $(document).ready(function() {
        console.info('This might never be executed.'); 
        console.info('Dom might get ready before requirejs would load modules.');
    });

    domReady(function () {
        console.info('This runs when the dom gets ready and modules are loaded.');
    });
});

이 작업을 기본 항목의 일부로 수행하여 모든 자바 스크립트가 DOM이 준비되고 jquery가로드되도록 보장합니다. 이것이 얼마나 좋은지 잘 모르겠지만 모든 피드백을 환영하지만 여기에 내 main.js가 있습니다.

require(['domReady!'], function(domReady){
    console.log('dom is ready');
    require(['jquery', 'bootstrap'], function(){
        console.log('jquery loaded');
        require(['app'], function(app){
            console.log('app loaded');
        });
    });
});