我喜欢jQuery插件架构,但是,我发现它令人沮丧(可能是由于我缺乏理解)当我想保留一个引用插件实例访问属性或方法在后面的代码。
编辑:我想澄清一下,我真正想做的是保留对插件中使用的方法和属性的引用,以便我以后可以使用它们
让我们来看一个AJAX加载图标的情况。在更传统的OOP环境中,我可以做:
var myIcon = new AJAXIcon(); myIcon.start(); //some stuff myIcon.stop();
我的对象的方法和属性存储在一个变量以供以后使用。现在如果我想在一个jQuery插件具有相同的功能,我会从它的主代码调用有点像这样:
$("#myId").ajaxIcon()
按照惯例,我的插件需要返回传递给我的插件的原始jQuery对象允许可链接性,但如果我这样做,我放弃了访问插件实例的方法和属性的能力。
$.fn.ajaxIcon = function(options) { return this.each(function () { //do some stuff } } $.fn.ajaxIcon.stop = function() { //stop stuff }
但是,在不破坏返回原始jQuery对象的约定的情况下,我不能保留对要引用的插件的特定实例的引用。
我想能够做这样的事情:
var myIcon = $("myId").ajaxIcon(); //myIcon = a reference to the ajaxIcon myIcon.start(); //some stuff myIcon.stop();
有什么想法吗?
解决方法
如果你做类似下面的事情:
(function($){ $.fn.myPlugin = function(options) { // support multiple elements if (this.length > 1){ this.each(function() { $(this).myPlugin(options) }); return this; } // private variables var pOne = ''; var pTwo = ''; // ... // private methods var foo = function() { // do something ... } // ... // public methods this.initialize = function() { // do something ... return this; }; this.bar = function() { // do something ... }; return this.initialize(); } })(jQuery);
然后,您可以访问任何公共方法:
var myPlugin = $('#id').myPlugin(); myPlugin.bar();
这取自这个very helpful article(2009年5月)从trulyevil.com这是自己的this article(2007年10月)从learningjquery.com的扩展。