調用成員函數中

我已經創建了基於這裏生成的代碼基本插件模板： http://starter.pixelgraphics.us/調用成員函數中

這裏是一個鏈接到非常基本骨架： https://jsbin.com/yatofefade/edit?html,js,console,output

$.curationPanel = function(el, options) { 
 
    
 
\t var base = this; 
 
\t base.$el = $(el); 
 
\t base.el = el; 
 
\t \t \t 
 
\t base.$el.data("curationPanel", base); 
 
\t \t \t 
 
\t base.init = function() { 
 
\t base.options = 
 
     $.extend({}, $.curationPanel.defaultOptions, options); 
 
\t }; 
 
\t \t \t 
 
\t base.runMe = function() { 
 
\t \t alert("I've Been Run"); 
 
\t }; 
 
\t \t \t 
 
\t base.init(); 
 
\t \t \t 
 
}; 
 
\t \t 
 
$.curationPanel.defaultOptions = { }; 
 
\t \t 
 
$.fn.curationPanel = function(options) { 
 
\t return this.each(function() { 
 
\t \t (new $.curationPanel(this, options)); 
 
\t }); 
 
}; 
 

 
$(".curationPanel").each(function(i, val) { 
 
\t var cp = $(this).curationPanel({}); 
 
\t cp.runMe(); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="curationPanel">INSIDE THE PANEL<div class="curationErrors"></div></div> 
 
</body> 
 
</html>

我的問題是，爲什麼當我嘗試在創建的curationPanel實例上調用runMe（）時出現錯誤？在插件中創建可調用公用函數的正確方法是什麼？

來源

2016-03-10 Dave Johnshon

你需要在這裏分享你的代碼.. 。不只是一個鏈接 –

好的，更新... thx。 –

在你的情況cp是一個jQuery對象，而不是curationPanel的實例，因爲你從plugin方法返回this，這就是錯誤的原因。

有多種方法可以做到這一點。

一種方法是打破jQuery的鏈接本質，並返回插件對象的一個實例，如下所示。除了打破jQuery方法的鏈接本質外，這種設計的另一個缺點是，在任何調用中，您都可以使用它僅爲一個元素初始化插件，即如果您有一個選擇器選擇多於1個元素，然後調用插件，該插件將僅針對第一個元素進行初始化。

$.curationPanel = function(el, options) { 
 

 
    var base = this; 
 
    base.$el = $(el); 
 
    base.el = el; 
 

 
    base.$el.data("curationPanel", base); 
 

 
    base.init = function() { 
 
    base.options = $.extend({}, $.curationPanel.defaultOptions, options); 
 
    }; 
 

 
    base.runMe = function() { 
 
    snippet.log("I've Been Run"); 
 
    }; 
 

 
    base.init(); 
 

 
}; 
 

 
$.curationPanel.defaultOptions = {}; 
 

 
$.fn.curationPanel = function(options) { 
 
    return new $.curationPanel(this[0], options); 
 
}; 
 

 
$(".curationPanel").each(function(i, val) { 
 
    var cp = $(this).curationPanel({}); 
 
    cp.runMe(); 
 
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="curationPanel">INSIDE THE PANEL 
 
    <div class="curationErrors"></div> 
 
</div>

另一種方法是使用獲取數據API插件實例像

$.curationPanel = function(el, options) { 
 

 
    var base = this; 
 
    base.$el = $(el); 
 
    base.el = el; 
 

 
    base.$el.data("curationPanel", base); 
 

 
    base.init = function() { 
 
    base.options = $.extend({}, $.curationPanel.defaultOptions, options); 
 
    }; 
 

 
    base.runMe = function() { 
 
    snippet.log("I've Been Run"); 
 
    }; 
 

 
    base.init(); 
 

 
}; 
 

 
$.curationPanel.defaultOptions = {}; 
 

 
$.fn.curationPanel = function(options) { 
 
    return this.each(function() { 
 
    (new $.curationPanel(this, options)); 
 
    }); 
 
}; 
 
$(".curationPanel").each(function(i, val) { 
 
    var cp = $(this).curationPanel({}); 
 
    $(this).data('curationPanel').runMe(); 
 
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="curationPanel">INSIDE THE PANEL 
 
    <div class="curationErrors"></div> 
 
</div>

來源

2016-03-10 04:16:38

第二種方法是做這件事的首選方式，以免打破jquery的鏈式本質？ –

@DaveJohnshon是.... –

調用成員函數中

回答

相關問題