jQuery 사이트는 jQuery에 대한 기본 플러그인 구문을 다음과 같이 나열합니다.
(function( $ ){
$.fn.myPlugin = function() {
// there's no need to do $(this) because
// "this" is already a jquery object
// $(this) would be the same as $($('#element'));
this.fadeIn('normal', function(){
// the this keyword is a DOM element
});
};
})( jQuery );
Javascript의 관점에서 무슨 일이 일어나고 있는지 이해하고 싶습니다. JS가 이전에 본 어떤 구문을 따르지 않는 것처럼 보이기 때문입니다. 그래서 여기 내 질문 목록이 있습니다.
-
function ($) …을 변수로 바꾸면 “the_function”이라고 말하면 구문은 다음과 같습니다.
(the_function)( jQuery );“(jQuery);”는 무엇입니까? 하기? the_function 주위에 괄호가 정말 필요합니까? 왜 거기에 있습니까? 비슷한 다른 코드가 있습니까?
-
function ($)으로 시작합니다. 그래서 그것은 내가 말할 수있는 한, 이미 정의 된 $의 매개 변수로 절대 실행되지 않을 함수를 생성하고 있습니다. 무슨 일이 일어나고 있습니까?
도와 주셔서 감사합니다!
답변
function(x){
x...
}
이름이없는 함수로, 하나의 인수 “x”를 사용하고 x로 작업을 수행합니다.
공통 변수 이름 인 ‘x’대신 덜 일반적인 변수 이름이지만 여전히 합법적 인 $를 사용할 수 있습니다.
function($){
$...
}
표현식으로 구문 분석되도록 괄호 안에 넣겠습니다.
(function($){
$....
})
함수를 호출하려면 인수 목록과 함께 그 뒤에 ()를 입력합니다. 예를 들어, 값에 대해 3을 전달하는이 함수를 호출하려면 다음 $을 수행합니다.
(function($){
$...
})(3);
킥을 위해이 함수를 호출하고 jQuery를 변수로 전달해 보겠습니다.
(function($){
$....
})(jQuery);
이것은 하나의 인수를 취한 다음 해당 함수를 호출하여 jQuery를 값으로 전달하는 새 함수를 생성합니다.
왜?
- jQuery로 무언가를 할 때마다 jQuery를 작성하는 것은 지루하기 때문입니다.
왜 그냥 쓰지 $ = jQuery않습니까?
- 다른 사람이 $를 다른 의미로 정의했을 수 있기 때문입니다. 이것은 $의 다른 의미가 이것에 의해 가려지는 것을 보장합니다.
답변
(function( $ ){
})( jQuery );
다른 라이브러리에서도 특별한 의미가 있기 때문에 다른 라이브러리와 충돌 할 염려없이 해당 함수 내부 대신 $사용할 수 있도록 in 인수 를 사용하는 자체 실행 익명 함수입니다 . 이 패턴은 특히 jQuery 플러그인을 작성할 때 유용합니다.$jQuery$
대신에 모든 문자를 쓸 수 있습니다 $.
(function(j){
// can do something like
j.fn.function_name = function(x){};
})(jQuery);
여기서는 j마지막에 지정된 jQuery를 자동으로 따라 잡습니다 (jQuery). 또는 인수를 완전히 생략 할 수 있지만 여전히 충돌에 대한 두려움없이 jQuery키워드를 모든 곳 에서 사용해야 합니다 $. 그래서 그 함수 안에서 모든 것을 $작성하는 $대신 쓸 수 있도록 속기 인수에 싸여 jQuery있습니다.
jQuery의 소스 코드를 보면 모든 것이 그 사이에 싸여 있음을 알 수 있습니다.
(function( window, undefined ) {
// jQuery code
})(window);
이는 인수가있는 자체 실행 익명 함수로도 볼 수 있습니다. window(및 undefined) 인수가 생성되고 전역에 대응되는 window아래쪽 개체 (window). 이것은 요즘 인기있는 패턴 이며 아래 매핑 된 window전역 window객체가 아닌 인수에서 살펴볼 것이기 때문에 속도 향상이 거의 없습니다 .
은 $.fn당신의 새로운 (또한 객체) 함수 또는 너무 jQuery를이 당신의 플러그인을 감싸는 것을 자체 플러그인 생성 jQuery의 객체 인 $.fn객체를하고 사용 가능하게.
흥미롭게도 나는 여기서 비슷한 질문에 답했다.
이 기사를 확인하여 내가 작성한 자체 실행 함수에 대해 자세히 알아볼 수도 있습니다.
답변
기본 플러그인 구문을 사용 하면 플러그인이로드 된 시점의 ID에 관계없이 플러그인 본문에서 $참조하는 데 사용할 수 있습니다 . 이것은 다른 라이브러리, 특히 프로토 타입과의 이름 충돌을 방지합니다.jQuery$
구문은라는 매개 변수를 받아들이는 함수를 정의 $하므로 $함수 본문에서와 같이 참조 할 수 있으며 즉시 해당 함수를 호출 jQuery하여 인수로 넣습니다 .
이것은 또한 전역 네임 스페이스를 오염시키지 않는 데 도움이 되지만 ( var myvar = 123;플러그인 본문에서 선언 하는 것이 갑자기 정의되지는 않음 window.myvar), 표면상의 주요 목적은 이후 재정의되었을 수있는 $곳 을 사용할 수 있도록하는 것 $입니다.
답변
당신은 거기에서 자체 호출 익명 함수를 다루고 있습니다. $서명이 jQuery객체에 바인딩 되었는지 확인하기 위해 이러한 함수 내에 jQuery 플러그인을 래핑하는 것은 “모범 사례”와 같습니다 .
예:
(function(foo) {
alert(foo);
}('BAR'));
이것은 블록에 BAR넣을 때 경고 <script>합니다. 매개 변수 BAR는 자신을 호출하는 함수에 전달됩니다.
동일한 원칙이 코드에서 발생하고 jQuery객체가 함수에 전달되므로 $jQuery 객체를 확실히 참조합니다.
답변
마지막에있는 jQuery는 자체 (jQuery)를 함수로 전달하므로 플러그인 내에서 $ 기호를 사용할 수 있습니다. 당신은 또한 할 것입니다
(function(foo){
foo.fn.myPlugin = function() {
this.fadeIn('normal', function(){
});
};
})( jQuery );
답변
이것과 다른 현대 자바 스크립트 트릭과 일반적인 관행에 대한 명확한 설명을 찾으려면 Javascript Garden을 읽는 것이 좋습니다.
http://bonsaiden.github.com/JavaScript-Garden/
이러한 패턴 중 상당수가 많은 라이브러리에서 널리 사용되지만 실제로 설명되지는 않기 때문에 특히 유용합니다.
답변
여기에 다른 답변은 훌륭하지만 해결되지 않은 중요한 점이 하나 있습니다. 당신은 말한다 :
그래서 그것은 내가 말할 수있는 한, 이미 정의 된 $의 매개 변수로 절대 실행되지 않을 함수를 생성하고 있습니다.
전역 변수 $를 사용할 수 있다는 보장 은 없습니다 . 기본적으로 jQuery를 두 전역 변수 생성 $및 jQuery(둘은 동일한 개체에 대한 별명). 그러나 jQuery는 noConflict 모드에서도 실행할 수 있습니다 .
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
를 호출 jQuery.noConflict()하면 전역 변수 $가 jQuery 라이브러리가 포함되기 전의 값으로 다시 설정됩니다. 이를 통해 jQuery를 $전역 변수로 도 사용하는 다른 Javascript 라이브러리와 함께 사용할 수 있습니다 .
$jQuery의 별칭에 의존하는 플러그인을 작성한 경우 플러그인 은 noConflict 모드에서 실행중인 사용자에게 작동하지 않습니다.
다른 사람들이 이미 설명했듯이 게시 한 코드는 즉시 호출되는 익명 함수를 만듭니다. jQuery그런 다음 전역 변수 는이 익명 함수로 전달되며 함수 내에서 로컬 변수 로 안전하게 별칭이 지정됩니다 $.
