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

Using global variables in backbone.js .. best practice

本文关键字：js 最佳 全局变量      更新时间：2023-09-26

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

您可以在任何位置定义模型和集合(及其各自的实例(。 我会为模型等推荐某种全局命名空间约定，只是为了重用。 执行此操作的一种简单方法是：

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...换句话说，我没有充分的理由，我只是按照自己的口味去做。

好吧，

@JayC关于全局命名空间实际上是正确的，并且有某种命名空间约定，但我实际上喜欢为每个 Backbone 类使用单独的模块，并在以后使用一个(或没有，如果你知道你在做什么(命名空间加载它。让我放置一个使用 CommonJS 的无全局变量应用程序的示例(实际上有一个很好的资源如何使用 RequireJS 制作它(。

您需要的是非常简单且看起来像这个要点的附加库。它基本上为您提供了CommonJS规范，可用于单独的文件或缩小的文件(例如脚本.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>

您可以缩小所有文件并仅加载一个(例如脚本.js(以及所有这些文件的缩小内容，并且也可以工作。

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

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

很好的例子(节点.js(是：

相关文章：