requirejs domReady 플러그인 대 Jquery $(문서).준비됐어요?

requirejs domReady 플러그인 대 Jquery $(문서).준비됐어요?

Require를 사용하고 있습니다.JS와 DOM에서 무언가를 초기화해야 합니다.자, 요구사항JS에서 플러그인을 제공하지만 이미 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...
   });
   

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

두 가지 옵션 모두 예상대로 작동하는 것 같습니다.저는 jQuery의 것을 확신하지 못합니다 왜냐하면 Require.JS는 마법을 부리고 있습니다. 즉, Require 이후로 말입니다.JS가 동적으로 스크립트를 추가할 예정인데, 동적으로 요청한 스크립트가 모두 로드되기 전에 DOM 준비가 이루어질까 걱정됩니다.반면, Require(RequireJS는 단지 단지 JS를 추가로 부담을 줄 것입니다.domReady이미 jQuery가 필요할 때.

문의사항

• 요구하는 이유JS가 제공합니다.domReady플러그인은 우리가 jQuery's를 가질 수 있을 때.$(document).ready();? 저는 다른 의존성을 포함하는 것이 어떤 이점도 없다고 봅니다.
• 필요를 충족시키기 위한 것이라면 크로스 브라우저 AJAX에 제공하는 것이 어떨까요?

제가 알기로는 다음과 같은 모듈이 필요한 것으로 알고 있습니다.domReady문서가 준비된 후에는 불러오거나 실행되지 않으며 jQuery가 필요한 작업을 수행할 수도 있습니다.

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

제 질문을 좀 더 명확히 하자면, 요구하는 것과 요구하는 것의 차이점은 무엇인가요?

핵심은 이미 다 맞은 것 같은데, 몇 가지 세부 사항이 틈 사이로 떨어졌습니다.주로:

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이 준비될 때까지 기다릴 필요가 없습니다!

예를 들어 우리는 모듈에 의존하는 A라는 코드 블록을 가지고 있고, B는 의존합니다.domReady!. 모듈 B는 DOM이 준비되기 전에는 로딩이 완료되지 않습니다.결과적으로 A는 B가 로드되기 전에 실행되지 않습니다.

만약 당신이 사용한다면domReadyB의 일반 모듈로서, A가 의존하는 것 또한 필요할 것입니다.domReady, 코드를 a 안에 포장하는 것 뿐만 아니라domReady()함수 호출.

게다가, 이것은 그들이domReady!같은 이점을 누립니다.$(document).ready().

domReady와 $(문서)의 차이점을 설명합니다.준비된

두 사람 모두 DOM이 기본적으로 동일한 방식으로 준비되었는지 여부/시간을 탐지합니다.

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

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

주요 질문에 대한 답변 시도:

왜 그럴까요?requirejs제공합니다.domReadyJquery's를 가질 수 있을 때 플러그인.$(document).ready();?

그들은 정말로 두가지 다른 일을 합니다.JS 필요'domReady의존성은 이 모듈이 실행되기 전에 DOM을 완전히 로드해야 한다는 것을 의미하며(따라서 원하는 경우 응용 프로그램의 모든 수의 모듈에서 찾을 수 있음) 반면,$(document).ready()대신 DOM 로드가 완료되면 콜백 기능을 종료합니다.

미묘하게 , : ① ③ ④ ⑤ ⑥ ⑦ 해 을 는 하게 해 을 는 식으로든, Δ DOM Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔdomReady, Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ$(document).ready()모듈에 대한 초기화 기능에 대한 콜백과 함께 그것의 마지막에.첫번째 접근 청소부를 부르겠습니다.

, , DOM 된 가 ,$(document).ready()는 Require하지 Require기에택이다히에다이택entden-tteo,oe히se지rJS가 모듈 로드를 완료하고 있습니다. 당신이 호출하는 코드의 종속성이 충족된다면 말입니다.

RequireRequire 도 할 가 하지 를 할 하지 를JS와jQuery.액세스가 은 DOM하지만 jQuery지은을히다여리는가에m다히gyeyelnt(lyususjtm을d만가y지s은tdomReady.

탄환을 겉모습 순서대로 답하기:

• 둘 다 같은 일을 해냅니다
• jquery에 대한 예약이 있다면 어떤 이유로든 domReady를 사용하세요.
• 맞아요. 그러니까 그냥 jQuery를 사용하세요.
• 모든 사람이 jQuery를 사용하는 것은 아니기 때문입니다.
• 동의합니다. 그냥 jQuery를 사용하세요.
• 플러그인은 정의에 따라 '필요를 충족'합니다.
• 크로스 브라우저 아약스는 문제가 아닙니다.크로스 도메인?아마 있을 것이고, 만약 없다면 음식을 줄 필요가 없습니다.
• , -, -, - 네

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

선명도 업데이트

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

JQuery는 함수를 수집하고 지연 개체를 'ready' 상태의 돔에 바인딩합니다.돔이 준비되면 지연된 개체가 해결되고 함수가 실행됩니다.돔이 이미 '준비'되어 있으면 지연된 기능이 이미 해결되어 즉시 실행됩니다.

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

여러 모듈로 requirejs를 몇 번 실험한 후 domReady를 사용할 것을 제안합니다.

저는 $(문서)와 관련된 기능을 발견했습니다.ready(...)는 requirejs에 의해 여러 모듈이 로드된 경우 호출되지 않습니다.나는 dom이 모든 requirejs 코드가 실행되기 전에 준비하고 있고 jquery ready callback 핸들러가 사용자 정의 함수, 즉 메인 모듈 코드 내에 바인딩되기 전에 호출된다고 의심합니다.

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가 로드되는 것을 보장합니다.이것이 얼마나 멋진지는 모르겠지만 어떤 피드백이든 환영합니다.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');
        });
    });
});

언급URL : https://stackoverflow.com/questions/15332628/requirejs-domready-plugin-vs-jquery-document-ready