在 Jquery 插件内部调用成员函数答案

【问题标题】：Calling member function inside of Jquery Plugin在 Jquery 插件内部调用成员函数
【发布时间】：2016-03-10 03:56:27
【问题描述】：

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

这是一个非常基本的骨架的链接： 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() 时会出错？在插件中创建可调用公共函数的正确方法是什么？

【问题讨论】：

你需要在这里分享你的代码......不仅仅是一个链接
好的，更新了...谢谢。

标签： javascript jquery html object jquery-plugins

【解决方案1】：

在您的情况下，cp 是一个 jQuery 对象，而不是 curationPanel 的实例，因为您从插件方法返回 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>

另一种方法是使用data 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>

【讨论】：

第二种方法是否是首选方法，以免破坏jquery的链接性质？