javascript - 페이지 - jQuery의 document.ready 함수는 언제 사용해야합니까?




페이지 로딩 완료 후 스크립트 실행 (6)

Javascript / jQuery를 처음 사용하기 시작했을 때 document.ready를 사용하라는 말을 들었지만 왜 그 이유를 알지 못했습니다.

누군가 jQuery의 document.ready 안에 javascript / jquery 코드를 랩핑하는 것이 의미가있는 경우에 대한 몇 가지 기본 지침을 제공 할 수 있습니까?

관심있는 주제 :

  1. jQuery의 .on() 메소드 : 저는 AJAX를위한 .on() 메소드를 사용합니다 (보통 동적으로 생성 된 DOM 요소에서). .on() 클릭 핸들러는 항상 document.ready 안에 있어야합니까?
  2. 성능 : document.ready 내부 또는 외부에서 다양한 javascript / jQuery 객체를 유지하는 것이 더 효과적입니까 (성능 차이가 중요한가요?)?
  3. 객체 범위 : AJAX가로드 된 페이지는 이전 페이지의 document.ready 안에 있던 객체에 액세스 할 수 없습니다. 맞습니까? 이들은 document.ready (즉, 진정으로 "글로벌"객체) 밖에 있는 객체에만 액세스 할 수 있습니까?

업데이트 : 모범 사례를 따르려면 내 모든 자바 스크립트 (jQuery 라이브러리 및 응용 프로그램 코드)가 HTML 페이지의 맨 아래 에 있고 AJAX가로드 된 페이지의 jQuery 포함 스크립트에 defer 특성을 사용합니다. 이 페이지에서 jQuery 라이브러리에 액세스 할 수 있습니다.


div에 대한 링크를 추가하고 클릭에 대한 몇 가지 작업을 수행하려고했습니다. DOM에 추가 된 요소 아래에 코드를 추가했지만 작동하지 않았습니다. 다음은 코드입니다.

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

그것은 작동하지 않았다. 그런 다음 jQuery 코드를 $ (document) .ready 안에 넣었고 완벽하게 작동했습니다. 여기있어.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

간단히 말해서,

$(document).readydocument 가 준비되었을 때 실행되는 이벤트입니다.

head 섹션에 jQuery 코드를 배치하고 dom 요소 (앵커, img 등)에 액세스하려고하면 html 이 위에서 아래로 해석되고 html 요소가 존재하지 않기 때문에 액세스 할 수 없습니다. 귀하의 jQuery 코드가 실행됩니다.

이 문제를 극복하기 위해 모든 dom 요소에 액세스 할 수있을 때 호출되는 $(document).ready 함수 내에 모든 jQuery / javascript 코드 (DOM을 사용)를 배치합니다.

그리고 이것이 이유입니다. jQuery 코드를 맨 아래에 놓으면 (모든 dom 요소 이후, </body> 직전에) $(document).ready 는 필요 없습니다.

위에서 설명한 것과 같은 이유 때문에 document 메서드를 사용할 때만 $(document).ready 내부 on 메서드를 배치 할 필요가 없습니다.

    //No need to put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

편집하다

의견,

  1. $(document).ready 는 이미지 나 스크립트를 기다리지 않습니다. $(document).ready$(document).load 의 큰 차이점은

  2. DOM에 액세스하는 코드 만 준비 처리기에 있어야합니다. 플러그인 인 경우 준비된 이벤트가 아니어야합니다.


답변:

jQuery의 .on () 메소드 : 나는 AJAX를위한 .on () 메소드를 사용한다. (동적으로 DOM 요소를 생성한다.) .on () 클릭 핸들러는 항상 document.ready 안에 있어야합니까?

아니, 항상 그래. 문서 헤드에 JS를로드하는 경우 필요합니다. AJAX를 통해 페이지를로드 한 후에 요소를 만드는 경우에는 다음을 수행해야합니다. 스크립트가 html 요소 아래에 있으면 핸들러를 추가 할 필요가 없습니다.

성능 : document.ready 내부 또는 외부에서 다양한 javascript / jQuery 객체를 유지하는 것이 더 효과적입니까 (성능 차이가 중요한가요?)?

그것은 달려있다. 핸들러를 연결하는 데 동일한 시간이 걸릴 것입니다. 페이지가 로딩 될 때 즉시 발생 시키거나 전체 문서가로드 될 때까지 기다리기를 원하는 경우에만 다릅니다. 그래서 당신이 페이지에서 무엇을하고 있는지에 따라 다릅니다.

객체 범위 : AJAX가로드 된 페이지는 이전 페이지의 document.ready 안에 있던 객체에 액세스 할 수 없습니다. 맞습니까? 이들은 document.ready (즉, 진정으로 "글로벌"객체) 밖에있는 객체에만 액세스 할 수 있습니까?

그것은 본질적으로 자신의 함수이므로 전역 범위 (외부 함수 / 위의 모든 함수) 또는 window.myvarname = ''; 선언 된 변수에만 액세스 할 수 있습니다 window.myvarname = '';


문서가 완전히로드 될 때까지 기다려야하므로 document.ready에서 모든 작업을 바인드해야합니다.

하지만 모든 액션에 대한 함수를 생성하고 document.ready 내에서 호출해야합니다. 함수 (전역 객체)를 만들 때 언제든지 호출하십시오. 따라서 새로운 데이터가로드되고 새로운 요소가 생성되면 해당 함수를 다시 호출하십시오.

이 함수는 이벤트 및 액션 항목을 바인딩 한 함수입니다.

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

현실적으로 DOM을 정확하게 조작하는 것 이외에는 document.ready 가 필요하지 않으며 항상 필요한 것은 아니며 최선의 선택입니다. 제 말은 큰 jQuery 플러그인을 개발할 때 코드 전체에서 코드를 거의 사용하지 않기 때문에 DRY를 유지하려고하기 때문에 DOM을 조작하지만 호출 할 수있는 메소드에서 가능한 많이 추상화한다는 것입니다 나중에. 모든 코드가 긴밀하게 통합되면 document.ready 노출 된 유일한 방법은 일반적으로 모든 DOM 마법이 발생하는 init 입니다. 희망이 귀하의 질문에 대한 답변.








document-ready