이 기능들의 차이점은 무엇입니까?

Question

나는 Jquery in Action이라는 책을 가지고 있으며 다른 라이브러리와의 충돌을 제거 할 때이 세 가지 기능을 언급한다. 그러나, 나는 그 차이가 무엇인지 모르며 책의 설명을 이해하지 못합니다.

jQuery(function($) { 
    alert('I"m ready!'); 
}); 

var $ = 'Hi!'; 
jQuery(function() { 
    alert('$ = ' + $); 
}); 

var $ = 'Hi!'; 
jQuery(function($) { 
    alert('$ = ' + $); 
}); 

차이점은 누구입니까? 감사.

Answer 1

간단한 버전을 사용하면 더 이해할 수 있습니다. 첫 번째 준비 기능은 경고하는 것 이상을 수행하지 않습니다. 다른 두 가지는 흥미 롭습니다.

함수에는 범위가 있습니다. 즉, 변수를 사용하면 해당 변수가 발견 될 때까지 계층 구조로 올라갑니다.

두 번째 준비 기능에서 $은 이 없으므로 이 없으므로 이됩니다.

그러나 세 번째 준비 블록에서 $은 더 가까운 정의 - 인수 (function($) {)로 전달 된 것이므로 Hi!으로 이동하지 않습니다. 이 $은 jQuery 함수 (예 : 해당 함수 $ == jQuery)가 jQuery의 준비 기능이 구현되는 방식입니다.

그래서 :

var $ = 'Hi!'; 

jQuery(function() { 
    alert('$ = ' + $); // in this scope, $ will refer to the 'Hi!' 
}); 

jQuery(function($) { // the $ here will 'shadow' the $ defined as 'Hi!' 
    alert('$ = ' + $); // in this scope, $ will refer to jQuery 
}); 

지금 당신의 질문은 다른 라이브러리와 충돌에 관한 것입니다. 다른 라이브러리 (예 : 프로토 타입)도 $ 심볼을 사용하므로 라이브러리를 호출하는 편리한 바로 가기입니다. 제공 한 마지막 준비 함수를 사용하면 이 될 수 있습니다. $은 jQuery가 그 함수 (첫 번째 인수로)에 전달할 때 jQuery를 참조합니다.

두 번째 준비 함수에서 $도 Prototype으로 설정되었을 수 있으며 $과 함께 jQuery를 호출하는지 여부가 확실하지 않을 수 있습니다. 귀하의 예에서는 Hi!이며 jQuery는 아닙니다. 프로토 타입 인 경우 똑같습니다. 고려 : 한편

// Prototype is loaded here, $ is referring to Prototype 

jQuery(function() { 
    $('selector').addClass('something'); // Oops - you're calling Prototype with $! 
}); 

을 :

// Prototype is loaded here, $ is referring to Prototype 

jQuery(function($) { // this $ is shadowing Prototype's $, this $ is jQuery 
    $('selector').addClass('something'); // Yay - you're calling jQuery with $ 
}); 

Answer 2

당신이 $ 단순히 jQuery 오브젝트에 대한 별칭입니다 jQuery(function ($) { ...를 입력 할 때. 실제로 $ 대신에 어떤 합법적 인 식별자를 사용할 수 있습니다. 이것은 여전히 ​​jQuery 객체의 별명입니다.

두 번째 예에서 경고는 '$ = Hi!'라고 말합니다. 이 경우 $는 함수 바로 위에 선언 된 var를 가리키기 때문입니다.

세 번째 예는 $가 함수 내부의 jQuery 객체로 해석되기 때문에 함수 위에 선언 된 $를 효과적으로 마스크합니다.

나는 이것이 당신에게 의미가 있기를 바랍니다.

Answer 3

첫 번째 코드 블록은 DOM hass가 완전히로드 된 후 실행될 준비가 된 처리기를 선언합니다. 경고 상자 만 생성합니다.

jQuery(function($) { 
    alert('I"m ready!'); 
}); 

두 번째 코드 블록도 준비 처리기를 선언하지만 충돌을 나타냅니다. $ 변수가 의도적으로 문자열로 설정되었습니다 (충돌하는 js 라이브러리에서 발생할 수 있음). 따라서 jQuery 객체로 사용할 수 없습니다. 핸들러 함수의 범위 내에서 $은 문자열에 할당 된 상태로 유지되므로 경고에는 $ = Hi!이 표시됩니다.

는

var $ = 'Hi!'; 
jQuery(function() { 
    alert('$ = ' + $); 
}); 

세 번째 코드 블록은 또한 준비 핸들러를 선언하지만, 로컬 $ 매개 변수를 선언합니다. jQuery 객체는 첫 번째 매개 변수로 준비 핸들러에 전달되므로 함수 범위 내에서 $은 jQuery 객체를 참조하고 경고는 $ = ...을 인쇄합니다. 여기서 ...은 jQuery 객체를 나타냅니다.

var $ = 'Hi!'; 
jQuery(function($) { 
    alert('$ = ' + $); 
});