Question

我完全开始使用RequireJS，因为我感觉它很有用，但我仍然陷入一个简单的编程问题：当我用完范围时（比如当我在jQuery回调函数内编码时），我不知道知道确切的正确方法来引用我的位置。我有一个例子：这个代码在我的项目的src / dir中，我在lib /中有jquery.js和require.js.

// src/main.js

define(function() {
    return {
        setup: function(settings){
            this.settings = settings;
        },

        start: function(){
            this.initScr();
        },

        initScr: function(){
            var screen = $('<canvas>').attr({
                width: window.innerWidth,
                height: window.innerHeight
            });
            $('body').append(screen);
            this.DOM.screen = screen[0];
            $(window).resize(function(){
                require(['game/main'], function(game) {
                    console.log(this);
                    game.DOM.screen.width = window.innerWidth;
                    game.DOM.screen.height = window.innerHeight;
                });
            });
        },

        settings: {},
        DOM: {}
    };
});

这里的问题是，在我的“模块”中，特别是在这里的jQuery回调中，如何从此回调中更改模块对象的属性？我不能在这里使用“this”关键字，因为它不再是我想要的那个。什么是最好的解决方案？我在这里做的要求让我觉得很奇怪。

感谢您阅读

修改

最后，在pax162回答的帮助下，我做到了这一点。

define(function() {
    var initScr =  function(){
                var screen = $('<canvas>').attr({
                    width: window.innerWidth,
                    height: window.innerHeight
                });
                $('body').append(screen);
                DOM.screen = screen[0];
                $(window).resize(function(){
                    DOM.screen.width = window.innerWidth;
                    DOM.screen.height = window.innerHeight;
                });
            };

    var start = function(){
                initScr();
            };

    var setup = function(settings1){
                settings = settings1;
            };

    var settings = {};

    var DOM = {};

    return {
            setup: setup,
            start: start,
            initScr:initScr,
            settings: settings,
            DOM: DOM
    };
});

Answer 1

您可以这样做，并保留范围：

define(function() {




var initScr =  function(){
            var screen = $('<canvas>').attr({
                width: window.innerWidth,
                height: window.innerHeight
            });
            $('body').append(screen);
            DOM.screen = screen[0];
            $(window).resize(function(){
                require(['game/main'], function(game) {
                    //console.log(this);
                    game.DOM.screen.width = window.innerWidth;
                    game.DOM.screen.height = window.innerHeight;
                });
            });
        };

var start = function(){
            initScr();
        };

var setup = function(settings1){
            settings = settings1;
        };

var settings = {};

var DOM = {};

    return {
        setup: setup,
        start: start,
        initScr:initScr,
        settings: settings,
        DOM: DOM
    };
});

Answer 2

使用Javascript 1.8.5或更高版本，Function.prototype.bind是我更喜欢的解决方案。文档说绑定：

创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

在您的情况下，您的原始代码可以修改，以便调整大小处理程序的设置如下：

$(window).resize(function(){
    this.DOM.screen.width = window.innerWidth;
    this.DOM.screen.height = window.innerHeight;
}.bind(this));

当bind被称为this时，您拥有所需的值。调整大小后，将调用bind的返回值，这是this绑定到您希望它具有的值的函数。

更改范围时如何正确引用原始对象

2 个答案: