javascript - 如何在backbone.js中通过全局变量创建集合？

Question

我在stackoverflow上得到了很多顾问的帮助，我的部分问题得到了解决，但还有一些问题仍然存在。

我查阅了答案，并尝试解决问题，因为我理解了 javascript 命名空间模式。

A namespacing pattern to avoid polluting the global namespace.
More details on this namespacing pattern
How do I declare a namespace in JavaScript?

我遇到了全局变量创建成功的问题，但是我不处理生成的变量。

collecton.js

    var app = app || {};
(function () {
    'use strict';
    var collections = app.Collection = app.Collection || {};

    collections.VideoLists =  Backbone.Collection.extend({
        model: app.Model,
        initialize: function(){
            console.log('load Collection');
        }
    });

    app.Collection = collections.VideoLists;
})();

model.js

var app = app || {};
(function() {
    'use strict';
    var models = app.Model = app.Model || {};

    models.Video = Backbone.Model.extend({
        initialize: function(){
            console.log('model create');
        },
        defaults:{
                 id : "1",
                 url : "/assets/videos/call/MOV01718.mp4",
                 imgSrc : "assets/img/call/1_thumbnail.png",
                 title: "call situation conservation"
        }
    });
  app.Model = new models.Video();
})();

router.js

listRoute: function(id) {
          //generate the collection using the listsection
          var videoList = this.collection;
          var getId = parseInt(id);
            switch (getId) {
              case 1:
                new videoList([
                    {
                      id : "1",
                      url : "/assets/videos/call/MOV01718.mp4",
                      imgSrc : "assets/img/call/1_thumbnail.png",
                      title: "call situation conservation"
                    },
                    {
                      id : "2",
                      url : "/assets/videos/call/MOV01722.mp4",
                      imgSrc : "assets/img/call/2_thumbnail.png",
                      title: "call situation conservation"
                    }
                  ]);
                break;

  //app.router init part
  initialize: function() {
            // create the layout once here
            this.layout = new views.Application({
                el: 'body',
            });
            // create model and collection once here
            this.model = app.Model;
            this.collection = app.Collection;
        }

请看下图

我认为这一代已经完成得很好。
但我不明白为什么会出现此错误。

我一开始就尝试过
1. 不要使用新函数生成集合(作为我当前的源)
2. 创建变量 videoList 作为对象。
3. 将 Collection 存储在变量中。
4.使用collection.create函数。
例如，list.create({id:'dasdsad'});

然而，这种尝试最终却得到了同样的结果。
我该如何解决这些问题？

Answer 1

命名空间模式的目的是什么？

您滥用了命名空间模式。本例的目标是将所有自定义 Backbone 类构造函数命名为 app 对象。

为了使所有内容清晰分开，请将所有集合构造函数放入 app.Collection 对象中，将模型构造函数放入 app.Model 中，等等

如果在创建所有类后检查 app 命名空间，它应如下所示:

var app = {
    Collection: {
        VideoList: /* video list constructor */
    },
    Model: {
        Video: /* video model constructor */
    },
    View: {
        /* same thing goes for views */
    }
};

app 命名空间不应该¹包含实例，主要是构造函数。

不要覆盖构造函数引用:

app.Model = new models.Video();

当您只需要一个实例时创建一个实例，并将其保留在所需的范围内。

this.model = new app.Model.Video();
this.collection = app.Collection.VideoList();

实例和构造函数

要真正理解上一点，您需要了解构造函数和实例之间的区别。这个概念适用于其他 OOP 语言，但我将在 JavaScript 语言细节中保留描述。

构造函数只是一个函数。来自 MDN doc on Object.prototype.constructor :

All objects will have a constructor property.

[...]

The following example creates a prototype, Tree, and an object of that type, theTree.

function Tree(name) {
  this.name = name;
}

var theTree = new Tree('Redwood');

如上例所示，要创建实例，请使用 new operator 。 What is the 'new' keyword in JavaScript?

The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

new constructor[([arguments])]

创建自定义构造函数可以让您定义自定义类型(类)。有多种方法可以在 JavaScript 中创建更复杂的自定义类型，但这是另一个讨论。更多详情请参见How to “properly” create a custom object in JavaScript?

幸运的是，Backbone 提供了一种简单(自以为是)的方式来定义新类型，extend function ，即available on all the Backbone's base types .

var ModelConstructor = Backbone.Model.extend({ /*...*/ });

var modelInstance = new ModelConstructor();

请注意，myVariable = MyConstructor 只会将构造函数的引用传递给 myVariable，它不会创建新实例。不过，您仍然可以使用该变量作为构造函数。

var myInstance = new myVariable();

排序和依赖项

如果您查看代码，您会注意到 app.Collection.VideoList 类使用 app.Model.Video 作为 >模型属性。

这意味着 app.Collection.VideoList 取决于 app.Model.Video 类的可用性。因此，集合文件应该插入到文档中的模型文件之后。

如 the other answer of mine 所示您链接:

<script src="js/models/todo.js"></script><!-- no dependencies -->
<script src="js/collections/todos.js"></script><!-- depends on the model -->
<script src="js/views/todo-view.js"></script><!-- depends on the collection and the model -->
<script src="js/views/app-view.js"></script><!-- depends on the todo-view -->
<script src="js/routers/router.js"></script><!-- depends on the app view -->
<script src="js/app.js"></script><!-- depends on the router -->

<小时/>

^{1。如果您想在所有应用程序之间共享对象实例，例如单例、命名空间全局或服务，app 命名空间对象可以包含对象的实例。}