jQuery插件中的公共函数

小编典典

jQuery插件中的公共函数

ajax

我喜欢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();

有什么想法吗？

阅读 316

2020-07-26

共1个答案

小编典典

如果您执行以下操作：

(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();

摘自trueevil.com 这篇非常有用的文章（2009年5月），该文章本身是learningjquery.com上这篇文章（2007年10月）的扩展。

2020-07-26