Question

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

这是一个非常基本的骨架链接： https://jsbin.com/yatofefade/edit?html,js,console,output

＆＃13;

def __copy__(self):
    return type(self)(self.x, self.y)

def __deepcopy__(self, memo):
    return type(self)(self.x, self.y)

＆＃13;

$.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( );
});

＆＃13;

我的问题是，为什么在尝试在创建的curationPanel实例上调用runMe（）时会出错？在插件中创建可调用公共函数的正确方法是什么？

Answer 1

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

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

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

＆＃13;

$.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();
});

＆＃13;

<!-- 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>

＆＃13;

另一种方法是使用数据api

获取插件实例

＆＃13;

$.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();
});

＆＃13;

<!-- 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>

＆＃13;

在Jquery插件中调用成员函数

1 个答案: