Javascript jQuery插件对象：通过.on（）附加了一个事件处理程序，现在有一个范围问题。（主插件对象）

我正试图从jQuery插件中的意大利面代码中移开，以更结构化的方式工作

我使用的基本样板模板如下：

我还发现ToDo MVC纯jQuery代码是一个灵感来源，因为它没有链接很多函数，并且可以很好地将事情分开（由于我没有身份，我不允许发布两个以上的链接，所以你必须自己用谷歌搜索）

总而言之，我发现上面两种方法的结合非常好，但是如果不经常引用

这个
（根插件对象），似乎就没有办法这样工作。这本身不是一个问题，但有时
这
超出了范围。我还没有找到一种优雅的解决方法，尤其是通过jQuery
on.（
）绑定事件处理程序时。请参阅我的JSFIDLE以了解我的意思：

我发现将
event.data
对象中的plugin对象作为
event.data.base
传递有点尴尬（这太冗长了，会损害代码的可读性）。没有更好的方法来引用主插件对象吗

我以前在使用这种构造插件的方法时遇到过可变范围的问题，因此，对于如何以合理的方式构造插件的任何一般性建议都将不胜感激

谢谢，

亨德里克

编辑：请看下面我的代码

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

    // Create the defaults once
    var pluginName = "myplugin",
        defaults = {
            settingA : 'someValue',
            settingB : 'someValue'
        };

    // The actual plugin constructor
    function Plugin(params) { 
        params.options = $.extend( {}, defaults, params.options);
        this.params = params;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {
        init: function () {
            var base = this; // cache the context so we can still reference it when entering new context
            this.cacheElements();
            this.bindEvents(base);
        },
        cacheElements : function (base) { //cache elements
            this.$el = $('div.doSomething');
        },
        bindEvents : function (base) { // bind some touch functions to touch events, and modal window hidden event
            this.$el.on('click', {base: base}, this.myFunction);
        },
        myFunction : function () {
            console.log(this); //this now refers to $el

        }
    };
    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( params ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin(params));
            }
        });
    };

})( jQuery, window, document );

我最近遇到了这个问题，我找到了一些解决办法

JavaScript的
bind
适用于现代浏览器：

bindEvents : function (base) {
    this.$el.on('click', {base: base}, this.myFunction.bind(this));
},
myFunction : function () {
    console.log(this); // Plugin context
}

bindEvents : function (base) {
    this.$el.on('click', {base: base}, $.proxy(this.myFunction, this));
},
myFunction : function () {
    console.log(this); // Plugin context
}

jQuery的
proxy
功能适用于较旧的浏览器：

bindEvents : function (base) {
    this.$el.on('click', {base: base}, this.myFunction.bind(this));
},
myFunction : function () {
    console.log(this); // Plugin context
}

bindEvents : function (base) {
    this.$el.on('click', {base: base}, $.proxy(this.myFunction, this));
},
myFunction : function () {
    console.log(this); // Plugin context
}

您还可以在
bindEvents
函数中创建事件处理程序函数，并允许自己访问这两个上下文：

bindEvents : function (base) {
    var instance = this;
    var myFunction = function() {
        console.log(this); // element context
        console.log(instance); // Plugin context
    };
    this.$el.on('click', {base: base}, myFunction);
}

请在这里发布您的代码，而不仅仅是作为JSFIDLE链接。