使用jQuery插件設計模式的調用方法

Question

我一直在使用jQuery Boilerplate開發插件，我無法弄清楚的一件事是如何從插件外部調用方法。

僅供參考，這裏是樣板代碼我說的是： http://jqueryboilerplate.com/

在我的小提琴，

http://jsfiddle.net/D9JSQ/2/

這裏是代碼：

;(function ($, window, document, undefined) { 

    var pluginName = 'test'; 
    var defaults; 

    function Plugin(element, options) { 
     this.element = element; 

     this.options = $.extend({}, defaults, options) ; 

     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype = { 
     init: function() { 
      this.hello(); 
     }, 
     hello : function() { 
      document.write('hello'); 
     }, 
     goodbye : function() { 
      document.write('goodbye'); 
     } 
    } 


    $.fn[pluginName] = function (options) { 
      return this.each(function() { 
       if (!$.data(this, 'plugin_' + pluginName)) { 
        $.data(this, 'plugin_' + pluginName, 
        new Plugin(this, options)); 
       } 
      }); 
    } 


})(jQuery, window, document); 

$(document).ready(function() { 
    $("#foo").test(); 
    $("#foo").test('goodbye'); 
}); 

我我正嘗試使用以下語法調用再見方法：

$("#foo").test('goodbye') 

我該如何做到這一點？在此先感謝

Answer 1

您必須獲取該類的引用，才能使用該插件結構調用它的方法。

http://jsfiddle.net/D9JSQ/3/

$(document).ready(function() { 
    var test = $("#foo").test().data("plugin_test"); 
    test.goodbye(); 
}); 

做你想做什麼，你必須擺脫文件撰寫的對它進行測試。

http://jsfiddle.net/D9JSQ/8/

; 
(function($, window, document, undefined) { 

    var pluginName = 'test'; 
    var defaults; 

    function Plugin(element, options) { 
     this.element = element; 

     this.options = $.extend({}, defaults, options); 

     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype = { 
     init: function(name) { 
      this.hello(); 
     }, 
     hello: function(name) { 
      console.log('hello'); 
     }, 
     goodbye: function(name) { 
      console.log('goodbye'); 
     } 
    } 


    $.fn[pluginName] = function(options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
      } 
      else if ($.isFunction(Plugin.prototype[options])) { 
       $.data(this, 'plugin_' + pluginName)[options](); 
      } 
     }); 
    } 


})(jQuery, window, document); 

$(document).ready(function() { 
    $("#foo").test(); 
    $("#foo").test('goodbye'); 
});​ 

查找到控制檯的信息。