从一个jQuery插件内的公共函数

前端之家收集整理的这篇文章主要介绍了从一个jQuery插件内的公共函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我喜欢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的扩展。

原文链接:https://www.f2er.com/jquery/184441.html

猜你在找的jQuery相关文章