Question

我正在使用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);

Answer 1

你可以，而不是传递函数本身，调用一个函数，它将返回你想要执行的函数，这是一个关闭插件的闭包。

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

现在，当在$元素上调用函数时，实际执行是在插件对象上完成的，因为它在“self”上关闭。
你可以通过返回的函数将参数（如果有的话）提供给调用“self.open（）”。

此外，此主题可能有所帮助： Controlling the value of 'this' in a jQuery event

（我不直接使用jQuery，所以我不熟悉API中的所有内容，但是这里的一些帖子似乎有替代解决方案来解决你的问题）

在jQuery插件上管理事件处理程序的范围

1 个答案: