Question

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

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

的index.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>

game.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;
})();

Answer 1

我认为你只需要做一些小的调整。

首先，在jquery.js和underscore-min.js之前提取backbone-min.js。

然后，您可以使用$(function() { ... })而不是明确地向window.onload分配内容：

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

您的window.onload有两个问题：

您使用Backbone作为函数的参数，但在调用函数时，您没有为Backbone提供值。
您正在调用该函数并将其返回值分配给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，因此您不必像使用Require.js那样function(Backbone) { ... }。

另外，如果你对脚本顺序很小心，你甚至不需要将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，你应该没事。

Answer 2

你需要传递Backbone作为参数，因为你在para中使用它：

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

如何加载BackboneJS

2 个答案: