web-dev-qa-db-ja.com

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

何かご意見は？

jqueryajaxpreloader
33
Daniel

次のようなことをした場合：

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

これは、 非常に役立つ記事 （2009年5月）からのものです（それ自体が thisの拡張であるtrueevil.comから） learningjquery.comの記事 （2007年10月）。

91
DEfusion

わかりました、これを行う方法を見つけました：

プラグインコード：

$.ajaxIcon.init = function(element, options) {
    //your initialization code

    this.start = function() {
         //start code
    }

    this.stop = function() {
         //stop code
    }
}

$.fn.ajaxIcon = function(options) {
    this.each(function () {
        //This is where the magic happens
        jQuery(this).data('ajaxIcon', new jQuery.ajaxIcon.init(this, opts));
    });

return this;
}

次に、コードの他の場所で使用するには：

var myIcon = $("#myId").ajaxIcon.data('ajaxIcon') 
// myIcon: a reference to the 'init' object specific to this plugin instance
myIcon.start();
myIcon.stop();

出来上がり、私の質問に答えました:)

2
Daniel

私はあなたが探しているものを次のようなもので達成できると思います：

var myIcon = $("myId").ajaxIcon(); //myIcon = a reference to the ajaxIcon 
$.ajaxIcon.start(myIcon);//some stuff
$.ajaxIcon.stop(myIcon);

まだテストしていません-そのATMを実行できる環境にアクセスできません

0
Josh E

すべての機能を備えたサンプルプラグイン：

    <script type="text/javascript">
(function( $ ) {

    $.fn.PluginX = function( options ) {
        // Default variables
        // var defaults = {textColor: "#000", backgroundColor: "#fff"}
        // var opts = $.extend( {}, defaults, options );

        // Or
        var settings = $.extend( {}, $.fn.PluginX.defaults, options );

        // Private function
        var privFunc = function(txt) {
            return "Private function " + txt;
        };

        // Public function
        this.pubFunc = function(txt) {
            console.log("\r\nPublic function " + txt);
            return this;
        };

        // Public function2
        this.pubFunc2 = function(txt) {
            console.log("\r\nPublic function " + txt);

            // Private from public
            privFunc("\r\nPrivate function from public -- " + txt);
            return this;
        };

        // Our plugin implementation code goes here.
        return this.each(function() {
            // alert(opts.validate);
            $(this).on('click',function(){
                var elem = $( this );
                var markup = elem.text();                                
                console.log("\r\nElement text " + markup);

                // Function private
                console.log(privFunc(markup));

                // External func
                console.log($.fn.PluginX.format(markup));

                // External function
                console.log(external(markup));
            });

            return this;
        });
    };

    // Variable
    $.fn.PluginX.defaults = {
        validate: "username"
    };

    // External Function
    $.fn.PluginX.format = function(txt) {
        return "<strong>" + txt + "</strong>";
    };

    // External Function
    function external(txt){
        return "External " + txt;
    }

})(jQuery);

$(document).ready(function() {
    var pl = $('.txt').PluginX({validate: "words"}).pubFunc("Hello Public").pubFunc2("Hello Public2");        
});
</script>
<p class="txt">Hello Max</p>
<p class="txt">Hello Pax</p>
0
Jony