也许只是一个愚蠢的问题。
在所有示例中,我看到视图模型和集合都是全局变量。
这里是一个例子。骨干简介。
可以在不使用全局变量或命名空间的情况下定义模型视图和集合吗?
然后我怎样才能访问它们?
2 回答
好吧,@JayC 关于全局命名空间实际上是正确的,并且存在某种命名空间约定,但我实际上喜欢为每个主干类使用单独的模块,然后使用一个(或者没有,如果你知道你是什么)加载它做)命名空间。让我放置一个使用 CommonJS 的无全局变量应用程序的示例(实际上有一个很好的资源如何使用 RequireJS 来制作它)。
您需要的是非常简单且看起来像这个gist的附加库。它基本上为您提供了 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 )与所有这些文件的缩小内容,并且也可以工作。
通过这样做,您将没有全局命名空间填充,no App.Class
, no App.Collection
... 等。如果您确定自己在做什么,您甚至不必有window.app
变量。
我知道它看起来很丑,因为包装器,但是有些框架会自动包装它,或者如果你使用 AJAX 模块加载( requireJS ),你就不需要使用这个包装函数。
很好的例子(node.js)是:Stich
您可以在任何您想要的地方定义您的模型和集合(以及它们各自的实例)。我会为模型等推荐某种全局命名空间约定,以供重用。一个简单的方法是:
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 的约定......换句话说,我没有充分的理由,我只是按照我的口味去做。