2009-06-25 3 views
15

내 목표는 내 JQuery 플러그인 안에있는 함수를 호출 할 수 있다는 것입니다.JQuery 플러그인 내부에 중첩 된 함수를 호출하는 방법은 무엇입니까?

올바른 구문은 무엇입니까?

예를 들어,이 작동하지 않습니다

<a href="#" id="click_me">Click Me</a> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
(function($) { 
    $.fn.foo = function(options) { 
     do_stuff = function(){ 
      console.log("hello world!"); // works 
      do_other_stuff = function(){ 
      alert("who are you?"); 
      } 
     } // function 
    } // function 
})(jQuery); 

$("body").foo(); 

$("#click_me").click(function(){ 
$.fn.foo.do_stuff.do_other_stuff(); // doesn't work 
}); 

</script> 

답변

35

당신은 그들이 그 이름의 지역 변수를 덮어 쓰거나 글로벌 네임 스페이스에 추가하거나 var 키워드없이 변수에 기능을 할당 할 때. (따라서 do_stuff는 원하는 것이 아닌 전역 함수입니다.)

원하는 것을하기위한 한 가지 방법은 함수를 저장할 곳을 명시 적으로 지정하는 것입니다.

(function($) { 
    $.fn.foo = function(options) { 
     // whatever $().foo() should do 
    }; 

    $.fn.foo.do_stuff = function() { 
     console.log("hello world!"); 
    }; 

    $.fn.foo.do_stuff.do_other_stuff = function(){ 
     alert("who are you?"); 
    }; 
})(jQuery); 

편집이 : 자바 스크립트의 모든 함수를 사용하면 임의의 속성에 값을 지정할 수 있습니다 즉, 객체이기 때문에

이 작동합니다.

당신은 당신이 좋아하는 다른 사람의 내부 정의를 이동할 수있는 다른 함수의 변수에 액세스하려면 :

$.fn.foo.do_stuff = function() { 
    console.log("hello world!"); 
    $.fn.foo.do_stuff.do_other_stuff = function(){ 
     alert("who are you?"); 
    }; 
}; 

그러나 이것은 당신이 다른 기능을 실행하면 기능 만 정의 의미하며, 함수를 실행할 때마다 마지막 정의를 덮어 씁니다.

(function($) { 
    $.fn.foo = function(options) { 
     // whatever $().foo() should do 

     var do_stuff = function(do_stuff_args) { 
      console.log("hello world!"); 
      // do stuff with options and do_stuff_args 

      var do_other_stuff = function(other_args) { 
       alert("who are you?"); 
       // here you have access to options, do_stuff_args, and other_args 
      }; 

      return { 
       do_other_stuff: do_other_stuff 
      }; 
     }; 

     return { 
      do_stuff: do_stuff 
     } 
    }; 
})(jQuery); 

foo().do_stuff(some_options).do_other_stuff(other_options); 

또는

var a = foo(stuff).do_stuff(some_options); 
a.do_other_stuff(foo); 
a.do_other_stuff(bar); 
+0

를 사용하여 호출

아마도 더 이상적인 솔루션은 각각의 기능과 같이 중첩 된 기능을 포함하는 객체를 반환해야하는 것 나는 이것이 왜 효과가 있는지 얻지 못한다. 나는 $ .fn.foo가 do_stuff라는 속성을 가진 함수 또는 객체가 될 수 있다고 생각했지만, 예제에서는 두 가지 모두 다. 이것은 JavaScript에서 가능합니까? 이 기능에 대해 읽을 수있는 포인터를 주시겠습니까? 아니면 내가 여기 뭔가 잘못 됐어? –

+0

예를 들어 주셔서 감사합니다. 플러그인이 이미 완료되었습니다. 귀하의 예가 내 플러그인의 구조와 일치하지 않습니다. 내 플러그인에서 "do_stuff"는 "foo"안에 있고 "do_other_stuff"는 "do_stuff"안에 있습니다. 중첩 된 구조를 사용하여 "다른 것들을 수행"에 어떻게 액세스 할 수 있습니까? 아니면, 어떻게 당신의 예제를 사용할 수 있지만 do_stuff는 foo에서 변수에 접근하게한다. (그리고 do_other_stuff는 do_stuff의 변수에 접근하게한다)? – edt

+2

감사합니다. Cobbal, 내 함수 구조로 예제를 사용하는 방법을 알아 냈습니다. 위대한 작품! 나는 레벨에 관계없이 모든 중첩 함수에 대해 $ .fn.foo. [function_name]을 사용해야했습니다. – edt

관련 문제