哪里可以在jquery-boilerplate中实现window.resize函数？

Question

我正在尝试将使用jquery插件模式编写的插件之一转换为jquery-boilerplate提供的插件。 我的插件依靠$( window ).resize()函数使其响应，但是当我尝试在jquery-boilerplate上使用它时，当我调整窗口浏览器的大小时，Web控制台会返回TypeError：

function Plugin ( element, options ) {
    this.element = element;
    this.cfg = $.extend( true, defaults, options );
    this._defauls = defaults;
    this._name = pluginName;
    this.init();
}

// Avoid Plugin.prototype conflicts
$.extend( Plugin.prototype, {
    init: function() {
        this.windowWidth();

        $(window).resize(function(){
            this.windowWidth();
        });
    },

    windowWidth: function() {
        var w = $( window ).width();

        console.log(w);
    }
} );

Web控制台返回： TypeError: this.windowWidth is not a function 。

我也尝试过这种方式：

function Plugin ( element, options ) {
    this.element = element;
    this.cfg = $.extend( true, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    this.init();

    $(window).resize(function(){
        this.init();
    });
}

// Avoid Plugin.prototype conflicts
$.extend( Plugin.prototype, {
    init: function() {
        this.windowWidth();
    },

    windowWidth: function() {
        var w = $( window ).width();

        console.log(w);
    }
} );

然后Web控制台返回： TypeError: this.init is not a function 。

我必须在哪里放置必须根据jquery-boilerplate监听jquery resize方法的代码？

我基本上以这种方式使其工作：

function Plugin ( element, options ) {
    var element = $( element ),
        cfg = $.extend( true, defaults, options ),

        windowWidth = function() {
            return $( window ).width();
        };

    console.log( windowWidth() );

    $(window).resize(function(){
        console.log( windowWidth() );
    });
}

但这不是jquery-boilerplate团队的目的，那么如何在使用jquery-boilerplate插件模式时做到这一点？

Answer 1

此错误与jquery-boilerplate没有关系。 在编写任何插件之前，您绝对应该了解更多有关Java中“ this”关键字的信息。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this