调用成员函数中

我已经创建了基于这里生成的代码基本插件模板： 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是.... –

调用成员函数中

回答

相关问题