2011-02-13 3 views
43

나는 자바 스크립트 클로저를 이해하고, 나는 이것이 기본 JS에서 수행 본 적이 :

(function() { 
    // all JS code here 
})(); 

그러나, JQuery와 향신료는 무엇을 부가하는 무엇입니까?

(function ($) { 
    // all JS code here 
})(jQuery); 
+0

이 경우 $는이 함수 내에서 jquery 객체가 될 수 있습니다. $ function (y) {}) (jQuery); –

답변

30

그것의 방법으로 $ 매핑 jQuery를하는 방법 있도록 모든 코드가 페이지에 표시됩니다.

아마도 재사용하고 싶은 jQuery를 사용하는 기존 스크립트가 있지만 동일한 페이지에서도 $를 사용하는 프로토 타입을 사용할 수도 있습니다.

해당 구문의 코드를 사용하여 jQuery를 래핑하면 페이지의 다른 코드와 충돌하지 않고 포함 된 파트에 대해 $ to jQuery를 다시 정의 할 수 있습니다.

+0

아, 알겠습니다. 좋았어. 고마워. – ma11hew28

+6

이것은 앨리어싱이라고 알려져 있습니다. – zzzzBov

+1

'jQuery'를'$'로하는 것뿐만 아니라,이 방법으로 모든 인수를 매핑 할 수 있습니다. IIFE 함수 범위 밖에서 가변 호이 스팅을 방지하는데 유용합니다. –

47

당신이 볼 때 : 그것은이다

(function() { 
    // all JS code here 
})(); 

자기 호출하는 익명 함수으로 알고있다. 이 함수는 끝에있는 ()을 추가하기 때문에 구문 분석되는 즉시 실행됩니다 (js 함수를 실행하는 방법입니다). 별도의 외부 중괄호 단지 컨벤션 있습니다

주의, 당신은 또한처럼 쓸 수있다 :

function() { 
    // all JS code here 
}(); 

하지만 규칙은 크게 모든 주위에 사용되며, 당신은 그것에 충실해야한다. 당신이$ 대신 jQuery 키워드로 사용할 수 있도록 여기에

(function($) { 
    // all JS code here 
})(jQuery); 

, $jQuery 객체에 매핑됩니다. 당신은 또한 너무 거기에 다른 문자를 넣을 수 있습니다 :

여기
(function(j) { 
    // all JS code here 
})(jQuery); 

, j 대신 jQuery 객체에 매핑됩니다.

또한 자체 호출 함수에 지정된 인수는 해당 함수의 범위 내에 있으며 외부 범위/변수와 충돌하지 않습니다.


내가 주제에 대한 기사를 작성했고, 그것을 확인하시기 바랍니다 :

+0

그러나'$'는 기본적으로'jQuery'의 별명이 아니십니까? – ma11hew28

+0

@MattDiPasquale : 그 대답은 내가 말했듯이,'(function ($) { // 여기에있는 모든 JS 코드 }}와 별칭이된다. (jQuery); '............... – Sarfraz

+0

Firebug Console은 이런 식으로 자세한 오류 메시지를 표시하지 않습니다. 나는 단지 "연인은 정의되지 않았다." – ma11hew28

11

이러한 방식으로 jQuery를 클로저에 전달해야하는 두 가지 이유가 있습니다.

가장 중요한 점은 jQuery's "no conflict" mode을 사용하는 페이지에서 코드를 작동하게하여 $ 전역을 제어하려는 다른 라이브러리와 함께 jQuery를 사용할 수 있다는 것입니다. 이러한 이유로 (function($) { ... })(jQuery) 기술은 이며, jQuery 플러그인을 작성할 때 강력하게을 권장합니다.

두 번째 이유는 $이 자체 실행 기능의 범위에서 로컬 변수가되고 로컬 변수 액세스가 전역 변수 액세스보다 (가장자리로) 빠르기 때문입니다. 개인적으로, 나는 이것을 매우 강력한 이유라고 생각하지 않습니다. DOM 메소드보다는 jQuery를 사용하는 오버 헤드가 용인 될 수있는 시나리오를 상상할 수는 없지만, 글로벌 변수로 jQuery에 액세스하는 것은 그렇지 않습니다. :-)

나는 플러그인을 작성 하지이 일관성을 때 가장 좋은 이유는이 기술을 사용하는 것을 말하고 싶지만

- 당신이 있다면 그것은 중요 할 때 당신이 그것을 할 것을 잊지 덜 가능성이있어 그것의 습관에 되지 않습니다. 게다가 코드를 재활용 할 수있는 기회를 언제 알 수 있습니다!

17
(function() { 
    // all JS code here 
})(); 

는 "불확실"발음 된 바로 호출 함수식 (IIFE)이다. 어떤 사람들은 또한 그것들을 "익명, 자체 실행 기능"또는 "자체 실행 기능"이라고 부릅니다.

(function(aParameter) { 
    alert(aParameter); // will alert "an argument" 
})("an argument"); 

여기 'aParameter'매개 변수를 사용하고 "인수"인수를 전달하는 IIFE가 있습니다.

(function($){ 
    alert($(window).jquery); // alert the version of jQuery 
})(jQuery); 

이 사람은 유사하지만, "jQuery를"(jQuery 오브젝트 인스턴스)는 인생의 인수이며,이 경우, jQuery를이 '$'매개 변수로 전달됩니다. 이런 식으로 간단히 '$'를 입력하면 IIFE 본문이 jQuery와 그 멤버에 액세스 할 수 있습니다. 이것은 일반적인 jQuery 규칙이며, jQuery 플러그인을 작성하는 사람들이이 규칙을이 방식으로 유지하는 것이 일반적입니다.

위의 코드는 jQuery 규칙을 유지할뿐만 아니라 사용자 나 다른 사람이 실수로 해당 규칙을 위반하지 않도록합니다. 예 : 다음 코드를 가져 오십시오.

var $ = function() { 
    alert('foo'); 
} 

이 코드는 '$'을 (를) 분명히 jQuery가 아닌 것으로 변환합니다. 누군가 플러그인 코드 외부의 다른 코드에서 이것을 수행 한 다음 jQuery를 플러그인에 '$'로 명시 적으로 전달하지 않으면 일반적으로하는 것처럼 '$'를 jQuery로 사용할 수 없습니다.

+1

IIFE는 자체 실행 기능을위한보다 일반적인 모국어입니다. –

+1

@ JoshH 좋은 제안. 업데이트 됨. +1 - 감사합니다! –