在 Jquery 插件中调用成员函数

Question

我已经根据此处生成的代码创建了一个基本的插件模板： http://starter.pixelgraphics.us/

这是最基本的框架 link： https://jsbin.com/yatofefade/edit?html,js,console,output

$.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( ) {
  alert( "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({});
 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( ) 时出现错误？在插件中创建可调用 public 函数的正确方法是什么？

Answer 1

在你的情况下 cp 是一个 jQuery 对象，而不是 curationPanel 的实例，因为你是 returning this 从插件方法，这就是错误的原因。

有多种方法可以做到这一点。

一种方法是打破 jQuery 和 return 插件对象实例的链接性质，如下所示。除了破坏 jQuery 方法的链接性质之外，这种设计的另一个缺点是，在任何调用中，您都可以使用它来仅为一个元素初始化插件，即如果您有一个选择器选择多个元素并且然后调用插件，插件将只针对第一个元素进行初始化。

$.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 like

的数据获取插件实例

$.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>

在 Jquery 插件中调用成员函数

Calling member function inside of Jquery Plugin

html

javascript

jquery

object

jquery-plugins