jQuery document.ready 대 자체 호출 익명 함수

137

이 둘의 차이점은 무엇입니까?

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

이 두 함수가 동시에 호출됩니까? 브라우저에서 HTML 페이지 전체를 렌더링 할 때 document.ready가 트리거되지만 두 번째 기능 (자체 호출 익명 기능)은 어떻습니까? 브라우저가 페이지 렌더링을 완료하기를 기다리거나 페이지가 나타날 때마다 호출됩니까?

javascript jquery

— 똥 보라
소스

18

무엇의 가치를 들어, $(function() {});동등하다$(document).ready(function() {});

— 이안 헨리

1

자체 호출 익명 함수는 발생할 때마다 실행됩니다. 또한 실제로 문서를 화면에 렌더링하고 메모리에 개체 모델을 만드는 것은 관련이 없습니다.

— Anurag

관련 : 익명 함수를 정의하고 인수로 jQuery를 전달하는 이유는 무엇입니까? 백본과 함께 사용할 패턴

— Bergi

4

효과적으로 답변 할 때 질문에 대한 답변을 받아 들여야합니다. 수락 률이 매우 낮습니다.

— leigero

첫 번째 방법을 수행하는 비 jQuery 방법은 다음과 같습니다. document.addEventListener ( 'domContentLoaded', function () {...});

— Evan Thompson

112

$(document).ready(function(){ ... }); 또는 짧다 $(function(){...});

이 함수는 예를 들어 요소 쿼리를DOM is ready 시작할 수 있을 때 호출됩니다 . DOM이 실제로 준비되었는지 확인하기 위해 다른 브라우저에서 다른 방법을 사용합니다..ready()
(function(){ ... })();

이는 브라우저가 사용자를 해석 할 때 가능한 빨리 자신 을 호출 하는 함수 일뿐ecma-/javascript 입니다. 따라서 DOM elements여기에서 성공적으로 행동 할 가능성은 거의 없습니다 .

— 얀디
소스

1

@NimChimpsky 혼란 (function () {}); $ (function () {}). 당신은 잘못의 반대입니다;)

— ALH

(function(){ ... })();JS 코드가 가능한 빨리 실행되지 않는 것과 관련하여 혼란 스럽 습니까? alert()SIAF 내부 또는 외부에서 말하면 효과가 동일하지 않습니까?

— skube

2

@skube 예, 파서가 읽는 즉시 JS 코드가 실행되지만 SIAF 앞에 "$"가 있는지 여부에 혼란이 올 수 있습니다. 그렇다면이 사이트에서 jQuery를 사용하는 경우 이는 jQuery document.ready 도우미 함수의 축약 된 형식으로, DOM을 사용할 수있게되면 주어진 함수가 실행되도록 예약합니다. 도우미 함수 자체는 곧 읽을 때 실행됩니다,하지만 당신은 기능을 함께 제공은 하지 않습니다.

— Neil Monroe

46

(function(){...})(); Javascript에서 발견되는 즉시 실행됩니다.

$(document).ready()문서가로드되면 실행됩니다. $(function(){...});바로 가기이며 바로 $(document).ready()같은 일을합니다.

— 미칼
소스

25

$(document).ready(function() { ... });단순히 ready문서를로드 할 때 이벤트가 트리거되도록 해당 기능을 문서 의 이벤트에 바인딩하기 만하면 됩니다.
(function($) { ... })(jQuery);실제로 Javascript의 구성체이며 코드의 모든 부분은 jQuery객체를 function($)매개 변수 로 전달 하고 함수를 실행하는 것이므로 해당 함수 내에서 $항상 jQuery객체를 참조 합니다. 이는 네임 스페이스 충돌 등을 해결하는 데 도움이 될 수 있습니다.

따라서 # 1은 문서가로드 될 때 실행되고 # 2는 즉시 실행되며 jQuery개체 이름 $은 속기입니다.

— 앨런 크리스토퍼 토마스
소스

25

DOM (문서 객체 모델)이 JavaScript 코드를 실행할 준비가되면 다음 코드가 실행됩니다.

$(document).ready(function(){
  // Write code here
});

위 코드의 약식은 다음과 같습니다.

$(function(){
  // write code here
});

아래 표시된 코드는 자체 호출 익명 JavaScript 기능이며 브라우저가 해석하자마자 실행됩니다.

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

아래에 표시된 jQuery 자체 호출 함수는 전역 jQuery 객체를 인수로 전달합니다 function($). 이를 통해 $정의의 글로벌 범위를 탐색 할 필요없이 자체 호출 기능 내에서 로컬로 사용할 수 있습니다. jQuery는을 사용하는 유일한 라이브러리가 아니므로 $잠재적 인 이름 충돌이 줄어 듭니다.

(function($){
  //some code
})(jQuery);

— JSON C11
소스

2

자바 스크립트 클로저에 대한 매우 간단하고 명확하며 간결한 설명.

— 코드

16

DOM이 "구성된"후에 실행되는 document.ready 자체 호출 기능은 <head>DOM이 생성되기 전에에 삽입되면 즉시 실행됩니다 .

— 스리 기
소스

6

불필요 한 다운 보트에 대응하기 위해 +1. 그러나 답변에 약간의 문제가 있습니다. 자체 호출 기능은 구문 분석시 발견되는 모든 위치에서 실행되며 반드시 내부에 있어야 할 필요 <head>는 없으며 초기 DOM이 구성된 후에도 규칙이 다르지 않습니다.

— Anurag