如何從插件的外部調用插件的方法（函數）

Question

我知道這是一個在stackoverflow中的舊問題。但對我而言，這是新的，我已經尋找解決方案，但我沒有得到我能理解的解決方案。我有一個插件，因爲我有一些功能。現在，當select options上的事件發生變化時，我想訪問其中一個功能。但我的問題是我無法從插件外部訪問該功能。不過，我是插件開發新手。

這裏是我的插件：

(function($, window, document, undefined) { 
    var Spec = { 
     init: function(options, ele) 
     { 
      var self = this; 
      self.elem = ele; 
      self.$elem = $(ele); 

      self.findPro = (typeof options === 'string') ? self.findPro = options : self.findPro = options.findPro; 
      self.options = $.extend({}, $.fn.specpro.options, options); 
      if (self.options.findPro === 'latest') { 
       self.latestPro(); 
      } 
     }, 
     latestPro:function(){ 
      var results=['x','y','z','zx']; 
var pinSelector = $('<select/>').addClass('form-control chzn-select chzn-rtl').attr({'data-placeholder': 'Add pins to filter', 
       'multiple': true, 'id': 'pinSelector'}).append($('<option/>').attr('value', '')); 
    $.each(results,function(i,item){ 
     pinSelector.append($('<option/>').attr('value',item).text(item)); 
    }); 

pinSelectorCt = $('<div/>').addClass('col-lg-12').append(pinSelector); 
    $('#lp').append(pinSelectorCt); 
$(".chzn-select").chosen(); 

     }, 
     filter:function(filFor){ 
      this.html('zzz'); 

     } 
    }; 
    $.fn.specpro = function(options) { 
     return this.each(function() { 
      var spec = Object.create(Spec); 
      spec.init(options, this); 
     }); 
    }; 
    $.fn.specpro.options = { 
     findPro: 'latest' 
    }; 
})(jQuery, window, document); 

而我試過是：

$(function(){ 
var mn=$('#lp').specpro({findPro:'latest'}); 
$('.chzn-select').chosen().change().mn.filter('latest'); 
}); 

誰能告訴我。我如何從插件的外部調用功能filter。

直播Fiddle

Answer 1

一個簡單的解決方案是揭露插件實例本身就像

$.fn.specpro = function (options) { 
    return this.each(function() { 
     var spec = Object.create(Spec); 
     spec.init(options, this); 
     $(this).data('specpro', spec) 
    }); 
}; 

然後

var specpro = $('#lp').data('specpro'); 
specpro.filter();//call which ever method you want 

演示：Fiddle