0

我完全开始使用 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”关键字，因为它不再是我想要的。什么是最好的解决方案？我在这里使用 require 所做的事情让我感到非常奇怪。

谢谢阅读

编辑：

最后，在 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
    };
});
4

2 回答 2

0

对于 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绑定到您希望它具有的值的函数。

于 2013-10-29T16:38:05.903 回答
0

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

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
    };
});
于 2013-10-26T00:44:19.883 回答