在骨干.js中使用全局变量..最佳实践

Question

也许只是一个愚蠢的问题。
在所有示例中，我都看到视图模型和集合是全局变量。
这里有一个例子。 骨干介绍 。
是否可以在不使用全局变量或命名空间的情况下定义模型视图和集合？
然后如何访问它们？

Answer 1

您可以在任何需要的地方定义模型和集合（及其各自的实例）。 我建议为模型等使用某种全局命名空间约定，以供重用。 一种简单的方法是：

window.ProjectModels = window.ProjectModels || {};  //use existing namespace  or create a new one.
ProjectModels.SomeModel = Backbone.Model.extend({ ...});
ProjectModels.SomeOtherModel = Backbone.Model.extend({ ...});
ProjectModels.SomeRelatedModel = ProjectModels.SomeModel.extend({ ...});
...
window.ProjectViews = window.ProjectViews || {};  //use existing namespace  or create a new one.
ProjectViews.SomeModelView = Backbone.View.extend({ ...});
ProjectViews.SomeOtherModelView = Backbone.View.extend({ ...});
ProjectViews.SomeRelatedModelView = ProjectViews.SomeModel.extend({ ...});

您可能想知道为什么我没有将集合放在自己的名称空间中。 我没有将集合放在自己的命名空间中的唯一原因是，我可以看到在某些情况下可能会扩展Backbone.Model来进行某种层次的集合/事物； 我也可以区分模型而不是集合，因为我有一个命名集合[Something] Collection的约定...换句话说，我没有充分的理由，只是按照自己的喜好来做。

Answer 2

好吧，@ JayC实际上是关于全局名称空间的，并且存在某种命名空间的约定，但是我实际上很喜欢为每个Backbone类使用单独的模块，并稍后使用一个（或不使用，如果您知道自己是什么）加载它。做）命名空间。 让我举例说明使用CommonJS的没有全局变量的应用程序（实际上，有很多很好的资源介绍如何使用RequireJS）。

您需要的是一个非常简单的附加库，看起来像这个要点 。 它基本上为您提供CommonJS规范，该规范可用于单独的文件或缩小的文件（例如script.js文件）。

假设您有4个文件，分别为： model.js ， collection.js ， view.js ， app.js ，它们看起来像这样：

// model.js
this.require.define({'model.js': function(exports, require, module) {(function() {
    var MyModel = Backbone.Model.extend({
        ...
    });

    module.exports = MyModel;
}).call(this)}});

// collection.js
this.require.define({'collection.js': function(exports, require, module) {(function() {
    var MyCollection = Backbone.Collection.extend({
        model : require('model.js');
    });

    module.exports = MyCollection;
}).call(this)}});

// view.js
this.require.define({'view.js': function(exports, require, module) {(function() {
    var MyView = Backbone.View.extend({
        initialize: function() {
            var Collection = require('collection.js');
            this.collection = new Collection();
        }
    });

    module.exports = MyView;
}).call(this)}});

// app.js
this.require.define({'app.js': function(exports, require, module) {(function() {
    var View = require('view.js');

    $(function() {
        new View();
    });
}).call(this)}});    

html文件中的脚本标签应如下所示：

<script src='jquery-underscore-backbone.js'></script>
<script src='commonjs.js'></script> <!-- this is the library from the gist -->
<script src='model.js'></script>
<script src='collection.js'></script>
<script src='view.js'></script>
<script src='app.js'></script>

您可以缩小所有文件的大小，并且仅加载其中所有文件的缩小内容的文件（例如script.js），并且也可以使用。

这样，您将没有全局命名空间填充，也没有App.Class ，也没有App.Collection ...等。如果您确定自己在做什么，则甚至不必具有window.app变量。

我知道它看起来很丑，因为有包装器，但是有些框架可以自动包装，或者如果您使用AJAX模块加载（requireJS），则不需要使用该包装器功能。

一个很好的例子（node.js）是： Stich