1

jQuery のイベント システムを使用して、外部コードがプラグインを駆動できるようにしています。私のイベント ハンドラーでは、'this' はイベントがバインドされている要素に設定されています。プラグインのメソッド自体にアクセスするための最良の方法は何ですか?

;(function($, window, document, undefined){
    var pluginName = "book";

    // Standard constructor
    function Plugin(element, options){
        this.element = element;
        this.options = $.extend({}, defaults, options);

        this.init();
    }

    // Simple init
    Plugin.prototype.init = function(){
        this.setBindings();
    }

    // Tie local methods to event channels
    // so that external code can drive the plugin. 
    Plugin.prototype.setBindings = function(){
        var events = {
            'book-open'      : this.open,
            'book-next-page' : this.toNext,
            'book-prev-page' : this.toPrev,
            'book-cover'     : this.toFront,
            'book-back'      : this.toBack
        }

        for(event in events){
            var fn = events[event];
            console.log(event);
            this.$element.on(event, fn);
        }
    };

    // Event Handlers
    Plugin.prototype.open = function(){
        // when called externally 'this' refers
        // to the element the plugin was intialized on.
        // I want to be able to call the plugin's 'private'
        // methods, like someMethod() below.
    };

    /* .... other event handlers ...  */

    // 'Private' plugin methods
    Plugin.prototype.someMethod = function(){
        // do something
    }

    // Wrap and return technique from @ajpiano & @addyosmani
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if ( !$.data(this, "plugin_" + pluginName )) {
                $.data( this, "plugin_" + pluginName,
                    new Plugin( this, options ));
            }
        });
    }

 })(jQuery, window, document);
4

1 に答える 1

2

関数自体を渡す代わりに、実行したい関数を返す関数を呼び出すことができます。これはプラグインのクロージャーです。

var createBookOpenFunction = function () {
    var self = this; //since you execute this function on the plugin, "this" will be the plugin
    return function () {
        self.open();
    }
};

次に、呼び出す代わりに...

this.$element.on(event, fn);

あなたは代わりに電話する

this.$element.on(event, this.createBookOpenFunction());

そのため、関数が $element で呼び出されると、「self」で閉じられているため、実際の実行はプラグイン オブジェクトで行われます。
そして、返された関数を介して、呼び出し "self.open()" にパラメーター (存在する場合) をフィードするだけです。

また、このスレッドが役立つ場合があります: Controlling the value of 'this' in a jQuery event

（私はjQueryを直接使用していないので、APIで利用できるものすべてに慣れていませんが、ここのいくつかの投稿にはあなたの問題に対する別の解決策があるようです）

于 2012-10-12T19:22:50.890 に答える