如何通过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?

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

colleton.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. 不要使用new function 生成集合（作为当前我的来源）
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：

所有对象都有一个constructor 属性。

[...]

以下示例创建一个原型Tree，以及该原型的一个对象 输入，theTree。

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

var theTree = new Tree('Redwood');

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

new 运算符创建用户定义对象类型的实例或 具有构造函数的内置对象类型之一。

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 作为model 属性的值。

这意味着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 命名空间对象可以包含一个对象的实例，如果您想在所有应用程序之间共享它，例如单例、命名空间全局或服务。}