1

わかりました、私は jQuery プラグイン ゲームの初心者で、たくさん読んだことがありますが、jQuery プラグインを記述する方法は 2,700 万通りあるようです。プラグインでやりたいことは、最もクリーンな方法でイベントを処理することです。

たとえば、次の基本プラグイン パターンを考えてみましょう。

;(function ( $, window, document, undefined ) {

    var pluginName = 'MyPlugin';
    var defaults = {
            propertyName: "value"
    };

    function Plugin( element, options ) {
            this.options = $.extend( {}, defaults, options );
            this._defaults = defaults;
            this._name = pluginName;
            this.element = element;
            this.init();
    }

    Plugin.prototype = {
            init: function() {
                    // SOME INIT FUNCTION
            },
            someMethod: function(el, options) {
                    // DO SOMETHING ELSE
            }
    }

    $.fn[pluginName] = function(options) {
            return this.each(function() {
                    if (!$.data(this, 'plugin_' + pluginName)) {
                            $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
                    }
                    else if ($.isFunction(Plugin.prototype[options])) {
                            $.data(this, 'plugin_' + pluginName)[options]();
                    }
            });
    }

})( jQuery, window, document );

次に、この単純な html を作成します。

<a href="a link to somewhere">My Link</a>

プラグインで、リンクがクリックされたときに href にアラートを出し、デフォルトのアクションを防止したいとしましょう。明らかに、これは非常に馬鹿げた例であり、私がやりたいことはもっと強烈なので、「プラグインは必要ない」と言わないでください。それはここでのポイントではありません。

したがって、リンクでプラグインを初期化します。

$(document).ready(function(){
    $('a').each(function(){
        $(this).MyPlugin();
    });
});

click: メソッドを追加して、自動的に呼び出す方法があるかどうかはわかりません。それとも、ある種の内部イベントバインディングがあるのでしょうか?

4

2 に答える 2

1

init 関数にクリック イベントを追加するだけなので、よりクリーンになります。

Plugin.prototype = {
    init: function() {
        // DO INIT

        $(this.element).on("click", function(e){
            e.preventDefault();
            alert($(this).attr("href"));
        });
    },
    someMethod: function(el, options) {
        // DO SOMETHING ELSE
    }
};

または、

別のメソッドに置くことができます：http://jsfiddle.net/nashio/PDyEd/4/

;(function ( $, window, document, undefined ) {

    var pluginName = 'MyPlugin';
    var defaults = {
        propertyName: "value"
    };

    function Plugin( element, options ) {
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.element = element;
        this.init();
        this.attachEvents(this.element, this.options);
    }

    Plugin.prototype = {
        init: function() {
            // DO INIT
        },
        attachEvents: function(el, options) {
           $(el).on("click", function(e){
                e.preventDefault();
                alert($(this).attr("href"));
            });
        }
    };

    $.fn[pluginName] = function(options) {
        return this.each(function() {


            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
            else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, 'plugin_' + pluginName)[options]();
            }
        });
    }

})( jQuery, window, document );

$(document).ready(function() {
    $('a').MyPlugin(); 
});
于 2013-03-27T07:30:18.430 に答える
0

編集 2:私は最初は正しかったです。このパターンは使ったことがありませんが、気に入っています。

したがって、プラグイン プロトタイプ メソッドでは、eachループ内の要素にアクセスできるため、そこにクリックをバインドしたり、その他の必要なものをバインドしたりできます。

$.fn[pluginName] = function(options) {
    return this.each(function() {
        $(this).click(function(event) {
            event.preventDefault();
            alert($(this).attr('href'));
        });

        if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
        }
        else if ($.isFunction(Plugin.prototype[options])) {
            $.data(this, 'plugin_' + pluginName)[options]();
        }
    });
}

{また、行のコードに欠落がありましたfunction Plugin。

このフィドルで動作することを確認してください：http://jsfiddle.net/PDyEd/

于 2013-03-27T06:24:25.810 に答える