jQuery 플러그인 구문을 이해하고 싶습니다.

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가 이전에 본 어떤 구문을 따르지 않는 것처럼 보이기 때문입니다. 그래서 여기 내 질문 목록이 있습니다.

1. function ($) ...을 변수로 바꾸면 "the_function"이라고 말하면 구문은 다음과 같습니다.

    (the_function)( jQuery );
   

   "(jQuery);"는 무엇입니까? 하기? the_function 주위에 괄호가 정말 필요합니까? 왜 거기에 있습니까? 비슷한 다른 코드가 있습니까?

2. 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객체를하고 사용 가능하게.

흥미롭게도 나는 여기서 비슷한 질문에 답했다.

JavaScript / jQuery 클로저 함수 구문

이 기사를 확인하여 내가 작성한 자체 실행 함수에 대해 자세히 알아볼 수도 있습니다.

자바 스크립트 자체 실행 기능

기본 플러그인 구문을 사용 하면 플러그인이로드 된 시점의 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그런 다음 전역 변수 는이 익명 함수로 전달되며 함수 내에서 로컬 변수 로 안전하게 별칭이 지정됩니다 $.