在javascript中定义模块内的函数

Question

I tried to define a function attachPicker can be called like:

(function(){
  $.fn.tagPicker = function(source){
    this.attachPicker();
  }
})(jQuery);

I tried:

(function(){
    $.fn.tagPicker = function(source){
      this.attachPicker();
      //define attachPicker
      $.fn.attachPicker = function(){
        //code here
      }
    }
 })(jQuery);


(function(){
      $.fn.tagPicker = function(source){
          this.attachPicker();
          //define attachPicker
          this.attachPicker = function(){
            //code here
          }
      }
})(jQuery);

Both threw out

Uncaught TypeError: Object [object Object] has no method 'attachPicker' 

If I did

(function(){
      $.fn.tagPicker = function(source){
        this.attachPicker();
      }
      $.fn.attachPicker() = function(){ //codes here };
})(jQuery);

It worked. But I want to define attachPicker inside tagPicker so that it can access the source. Anyone can explain why the ones I tried didn't work and give me any suggestions? Of course I knew I can pass source as argument if defining attachPicker outside. Thanks in advance!

Answer 1

Before using any function you should define that function

Try this code

(function(){
      $.fn.tagPicker = function(source){

          //define attachPicker
          this.attachPicker = function(){
            //code here
          }
          this.attachPicker();
      }
})(jQuery);

You can test here: http://jsfiddle.net/s23py/ also you can call it by an object: http://jsfiddle.net/s23py/2/