나는 자바 스크립트 클로저를 이해하고, 나는 이것이 기본 JS에서 수행 본 적이 :
(function() {
// all JS code here
})();
그러나, JQuery와 향신료는 무엇을 부가하는 무엇입니까?
(function ($) {
// all JS code here
})(jQuery);
나는 자바 스크립트 클로저를 이해하고, 나는 이것이 기본 JS에서 수행 본 적이 :
(function() {
// all JS code here
})();
그러나, JQuery와 향신료는 무엇을 부가하는 무엇입니까?
(function ($) {
// all JS code here
})(jQuery);
그것의 방법으로 $ 매핑 jQuery를하는 방법 있도록 모든 코드가 페이지에 표시됩니다.
아마도 재사용하고 싶은 jQuery를 사용하는 기존 스크립트가 있지만 동일한 페이지에서도 $를 사용하는 프로토 타입을 사용할 수도 있습니다.
해당 구문의 코드를 사용하여 jQuery를 래핑하면 페이지의 다른 코드와 충돌하지 않고 포함 된 파트에 대해 $ to jQuery를 다시 정의 할 수 있습니다.
당신이 볼 때 : 그것은이다
(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
객체에 매핑됩니다.
또한 자체 호출 함수에 지정된 인수는 해당 함수의 범위 내에 있으며 외부 범위/변수와 충돌하지 않습니다.
내가 주제에 대한 기사를 작성했고, 그것을 확인하시기 바랍니다 :
이러한 방식으로 jQuery를 클로저에 전달해야하는 두 가지 이유가 있습니다.
가장 중요한 점은 jQuery's "no conflict" mode을 사용하는 페이지에서 코드를 작동하게하여 $
전역을 제어하려는 다른 라이브러리와 함께 jQuery를 사용할 수 있다는 것입니다. 이러한 이유로 (function($) { ... })(jQuery)
기술은 이며, jQuery 플러그인을 작성할 때 강력하게을 권장합니다.
두 번째 이유는 $
이 자체 실행 기능의 범위에서 로컬 변수가되고 로컬 변수 액세스가 전역 변수 액세스보다 (가장자리로) 빠르기 때문입니다. 개인적으로, 나는 이것을 매우 강력한 이유라고 생각하지 않습니다. DOM 메소드보다는 jQuery를 사용하는 오버 헤드가 용인 될 수있는 시나리오를 상상할 수는 없지만, 글로벌 변수로 jQuery에 액세스하는 것은 그렇지 않습니다. :-)
- 당신이 있다면 그것은 이 중요 할 때 당신이 그것을 할 것을 잊지 덜 가능성이있어 그것의 습관에 때되지 않습니다. 게다가 코드를 재활용 할 수있는 기회를 언제 알 수 있습니다!
(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로 사용할 수 없습니다.
IIFE는 자체 실행 기능을위한보다 일반적인 모국어입니다. –
@ JoshH 좋은 제안. 업데이트 됨. +1 - 감사합니다! –
이 경우 $는이 함수 내에서 jquery 객체가 될 수 있습니다. $ function (y) {}) (jQuery); –