0

我有一个非常简单的问题。如何在不使用 requireJS 的情况下加载 BackboneJS 并在模块中使用它？

我只使用 1 个模块，所以所有 Backbone 视图、模型和集合都将在该文件中。

索引.html

<!-- libraries 10k zipped-->
<script src='js/libs/underscore-min.js'></script>
<script src='js/libs/backbone-min.js'></script>

<!-- modules -->
<script src='js/game.js'></script>

游戏.js

window.onload = (function(Backbone){

    var Input = Backbone.View.extend({  
            events: {
                'mousedown' : 'handleMouseDown',
                'mouseup'   : 'handleMouseUp',
            },

            handleMouseDown: function(){
                console.log('mousedown');
            },

            handleMouseUp: function(){
                console.log('mouseup');
            }
    }), 

    input = new Input;
    return input;
})();
4

2 回答 2

1

我认为您只需要进行一些小的调整。

首先，在和jquery.js之前拉入。underscore-min.jsbackbone-min.js

然后，您可以使用$(function() { ... })而不是显式地将某些内容分配给window.onload：

$(function() {
    var Input = Backbone.View.extend({...
    //...
});

你window.onload有两个问题：

  1. 您将其用作函数的参数，但在调用函数时Backbone没有提供值。Backbone
  2. 您正在调用该函数并将其返回值分配给window.onload. window.onload应该是一个函数，而不是一个new Input.

如果你真的想使用，window.onload那么你会这样做：

window.onload = function() {
    var Input = Backbone.View.extend({  
    /* ... */
};

你<script src='js/libs/backbone-min.js'></script>会给你一个全局的Backbone，所以你不必function(Backbone) { ... }像使用 Require.js 那样做。

此外，如果您对脚本顺序很小心，您甚至不需要将您的Input内部包装在一个函数中，只需保留以下内容：

var Input = Backbone.View.extend({  
    events: {
        'mousedown' : 'handleMouseDown',
        'mouseup'   : 'handleMouseUp',
    },
    handleMouseDown: function(){
        console.log('mousedown');
    },
    handleMouseUp: function(){
        console.log('mouseup');
    }
});
var input = new Input;

在你的js/game.js，你应该没问题。

于 2012-09-06T03:16:09.967 回答
0

您需要将 Backbone 作为参数传递，因为您在 in 参数中使用它：

window.onload = (function(Backbone){

    var Input = Backbone.View.extend({  
            events: {
                'mousedown' : 'handleMouseDown',
                'mouseup'   : 'handleMouseUp',
            },

            handleMouseDown: function(){
                console.log('mousedown');
            },

            handleMouseUp: function(){
                console.log('mouseup');
            }
    }), 

    input = new Input;
    return input;
})(Backbone);
于 2012-09-06T03:11:01.493 回答