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 回答