33

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

何かご意見は？

4

5 に答える 5

3

わかりました、私はこれを行う方法を理解しました：

プラグインコード：

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

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

于 2009-06-23T19:33:35.297 に答える
0

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

    <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>
于 2019-07-26T15:58:54.147 に答える
0

次のようなもので、探しているものを達成できると思います。

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

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

于 2009-06-23T19:07:05.787 に答える
-1

これを実現しようとしている jQuery プラグインのほとんどは、匿名スコープとクロージャーを使用して、そのインスタンスに固有の関数と変数を参照します。たとえば、次のパターンを使用します。

;(function ($) {
    // your code
})(jQuery);

モジュールの最初と最後の間に、必要な関数を宣言できます。グローバル名前空間を汚染することはなく、クロージャーを介してローカル変数へのアクセスを保持できるため、多くの問題を解決できます。また、関数を使用することを恐れないでください$.data。

于 2009-06-23T18:37:22.673 に答える