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

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 );

자바스크립트의 관점에서 무슨 일이 일어나고 있는지 이해하고 싶습니다. 왜냐하면 이전에 JS가 했던 어떤 구문을 따르지 않는 것 같기 때문입니다.그럼 제 질문 목록은 다음과 같습니다.

1. 함수($)를 바꾸면...변수 "the_function"과 같이 구문은 다음과 같습니다.

    (the_function)( jQuery );
   

   "(jQuery);" 무엇을 하고 있습니까?_function 주변의 괄호가 정말 필요합니까?왜 거기 있는 거지?비슷한 코드를 줄 수 있는 또 다른 코드가 있습니까?

2. 함수($)로 시작합니다.그래서 함수를 만들고 있는 것입니다. 제가 아는 한, 이미 정의된 $의 매개 변수로 실행되지 않을 것입니다.거기서 무슨 일이 벌어지고 있는 거지?

도와주셔서 감사합니다!

function(x){ 
    x...
}

는 이름이 없는 함수일 뿐이며, "x" 라는 하나의 인수를 사용하여 x로 작업을 수행합니다.

일반적인 변수 이름인 'x' 대신 덜 일반적인 변수 이름이지만 여전히 합법적인 $를 사용할 수 있습니다.

function($){ 
    $...
}

괄호 안에 넣어 표현으로 구문을 해석할 수 있도록 하겠습니다.

(function($){
    $....
})

함수를 호출하려면 인수 목록과 함께 뒤에 ()를 붙입니다.를 들어, 만약 어의 하는 이 를 3면이라고 ,$우리는 이것을 할 것입니다.

(function($){
    $...
})(3);

킥의 경우에만 이 함수를 호출하고 jQuery를 변수로 전달해 보겠습니다.

(function($){
     $....
})(jQuery);

이렇게 하면 하나의 인수를 사용한 다음 jQuery를 값으로 전달하여 해당 함수를 호출하는 새로운 함수가 생성됩니다.

왜요?

• 왜냐하면 jQuery로 뭔가를 하고 싶을 때마다 jQuery를 쓰는 것이 지루하기 때문입니다.

만 하면 안 $ = jQuery?

• 다른 사람이 $를 다른 의미로 정의했을 수도 있기 때문입니다.이것은 달러의 다른 의미들이 이것에 의해 그림자가 진다는 것을 보장합니다.

---

(function( $ ){

})( jQuery );

은 입니다를 하는 자체 입니다.$할 수 중록)$ ) 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수체)새합니다.$.fnobject(객체) 및 사용 가능하게 합니다.

---

흥미롭게도, 저는 여기서 비슷한 질문에 답했습니다.

자바스크립트 / jQuery closure 함수 구문

제가 작성한 자체 실행 기능에 대해 자세히 알아보려면 이 문서를 확인하십시오.

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

하면 다음을 할 수 .$언급하다, 언급하다jQuery에서,이의 됩니다.$플러그인이 로드될 때.이렇게 하면 다른 라이브러리(특히 프로토타입)와 이름 충돌이 방지됩니다.

은 로 변수를 합니다.$그래서 당신은 그것을 언급할 수 있습니다.$다,하고를 함수를 호출합니다.jQuery

를 통해 네임스페이스를 수도 ( 합니다)를 선언합니다).var myvar = 123;당신의 플러그인 본체에서 갑자기 정의를 내리지는 않을 것입니다.window.myvar인 목적은 할 수 입니다), 입니다.$$그 이후로 재정의되었을 수도 있습니다.

당신은 거기서 자기 호출 익명 기능을 다루고 있습니다.은 "Best Practice"가다하도록 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 );

이것에 대한 명확한 설명과 다른 현대적인 자바스크립트 트릭과 일반적인 방법을 찾기 위해서는 자바스크립트 가든을 읽는 것을 추천합니다.

http://bonsaiden.github.com/JavaScript-Garden/

많은 도서관에서 이러한 패턴이 널리 사용되지만 실제로는 설명되지 않기 때문에 특히 유용합니다.

여기에 있는 다른 답변들은 훌륭하지만, 한 가지 중요한 점은 언급되지 않았습니다.당신은 이렇게 말합니다.

그래서 함수를 만들고 있는 것입니다. 제가 아는 한, 이미 정의된 $의 매개 변수로 실행되지 않을 것입니다.

전역 변수를 사용할 수 있다는 보장은 없습니다.기본적으로 jQuery는 전역 범위에 두 개의 변수를 만듭니다.$그리고.jQuery(여기서 둘은 동일한 개체에 대한 별칭입니다.)그러나 jQuery는 noContract 모드에서도 실행할 수 있습니다.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

는.jQuery.noConflict(), $jQuery 라이브러리가 포함되기 전의 상태로 되돌아갔습니다.를 통해 은 jQuery다를 할 수 .$전 세계적인 변수로서

에 ,$로 Query에 대한 별칭이므로 플러그인이 noContract 모드로 실행되는 사용자에게는 작동하지 않습니다.

다른 사람들이 이미 설명했듯이, 당신이 올린 코드는 즉시 호출되는 익명 기능을 만듭니다.ejQuery그런 다음 로컬 변수로 안전하게 앨리어싱되는 이 익명 함수로 전달됩니다.$

언급URL : https://stackoverflow.com/questions/4484289/id-like-to-understand-the-jquery-plugin-syntax