jQuery插件对象：通过附接。对（）的事件处理程序，现在对此有范围问题。（主插件对象）(jQ

我试图从我的jQuery插件面条代码和工作移开以更结构化的方式。

我通过使用基本样板模板这样在这里找到： https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js

我还发现了日程MVC纯jQuery代码的灵感来源，因为它没有链接许多功能和让事情很好地分离（我不允许张贴由于两个以上的链路我缺乏的状态，所以你将不得不谷歌那你自己）。

总而言之，我觉得上面的两个相当不错的组合一起工作，但似乎没有办法像这样的工作没有引用this （根插件对象）相当频繁。这本身不是一个问题，但有时this变成超出范围。我还没有真正找到一个优雅的方式在其周围，通过jQuery特别是结合事件处理程序时， on.() 请参阅我的jsfiddle为我的意思的说明： http://jsfiddle.net/hendrikdegraaf/wzp3ok4h/18/

我发现，通过该插件对象在event.data对象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
}

jQuery的proxy功能可在旧的浏览器：

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