2016-06-13 40 views
1

我有這個真的老了無人維護插件,簡而言之就是結構是這樣的:jQuery插件和原型,揭露方法

plugin code

插件本身做工精細,但我需要訪問一些原型方法。

var $el = $.find('myEl'); 
$el.searchlight(foo, bar); 
$el.clearResults() //this throws an exception 

當我調用一個原型方法時,我得到一個異常,該方法不存在。我是否在原型上遇到了一些完全錯誤的東西,或者我只是以錯誤的方式使用它(如果需要的話,我可以破解它,因爲它現在已經7年沒有維護了)。

另外一個問題是我如何讓初始化程序返回元素本身,我是否必須在$ .fn.searchlight中添加'return this.each'作爲最後一條語句?

回答

1

要解決這個問題,您可以將插件的實例存儲在元素的data屬性中。然後,您可以調用該函數法的要求,這樣的事情:

// in plugin: 
$.fn.searchLight = function(url, options) { 
    return this.each(function() { 
     $(this).data('searchlight', new SearchLight(this, url, options)); 
    }); 
}; 

// in the calling code, instantiate 
var $el = $('.searchLightElement').searchLight(foo, bar); 

// then use the methods of the plugin 
$el.data('searchlight').clearResults(); 

Working example

+0

謝謝!我甚至不知道你可以在數據上保存實例。我實際上不得不玩弄小提琴(設置一些構造函數中的成員,並將它們清晰地表達出來),以便真正相信這是xD的作品。教我的榮譽我的概念我甚至不知道存在。 – Tom

+0

沒問題,很樂意幫忙。這是jQuery在對象中緩存數據屬性的最好的好處之一 - 您可以在其中存儲任何數據類型,並在存儲時精確地檢索它 –