如何重新定义对象和沟通对象？

Question

我遇到了一些问题，我知道 var app = app || {} 意味着创建变量 app 是空对象然后 app 通过重新定义使用activity。

但是我不明白如何像上面的方法那样在backbone中使用空对象。

Router.js

 var app = app || {};
(function() {
    'use strict';
    var views = app.view = app.view || {};
    app.Router = Backbone.Router.extend({
        routes: {
            'list/:id': 'listRoute',
            'situation': 'situationRoute',
            'culture': 'cultureRoute',
            'level': 'livingwordsRoute',
            //wildcard place on last.
            '*home': 'homeRoute'
        },
        _bindRoutes: function() {
          if (!this.routes) return;
          this.routes = _.result(this, 'routes');
          var route, routes = _.keys(this.routes);
          while ((route = routes.pop()) != null) {
            this.route(route, this.routes[route]);
          }
        },
        initialize: function() {
            // create the layout once here
            this.layout = new views.Application({
                el: 'body',
            });
        },
        homeRoute: function() {
            var view = new views.Home();
            var target = 'home';
            this.layout.setContent(view, target);
        },
        situationRoute: function() {
            var view = new views.Situation();
            var target = 'situation';
            this.layout.setContent(view, target);
        },
        listRoute: function(id) {
            switch (id) {
              case 1:
                var list = new app.collection([
                    {
                      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;
              default:
              var list = new app.collection([
                  {
                    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"
                  }
                ]);
            }
            var view = new views.list();
            var target = 'list';
            this.layout.setContent(view, target);
        },
        cultureRoute: function(){
            var view = new views.Culture();
            var target = 'culture';
            this.layout.setContent(view, target);
        },
        livingwordsRoute: function(){
            var view = new views.Level();
            var target = 'livingwords';
            this.layout.setContent(view, target);
        }
      });
      var router = new app.Router();
      Backbone.history.start();
})();

VideoList.js

    var app = app || {};
(function() {
    'use strict';
    var models = app.model = app.model || {};
    var collections = app.collection = app.collection || {};
    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"
        }
    });
    collections.VideoLists =  Backbone.Collection.extend({
        model: models.Video
    });
    var lists = new collections.VideoLists([
        {
            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"
        }
    ]);
    console.log(lists);
})();

view.js

    var app = app || {};
(function() {
    'use strict';
    //views linitalize
    var views = app.view = app.view || {};
    views.Application = Backbone.View.extend({
        initialize: function() {
           this.$content = this.$('#main');
            //this.$loading = this.$('#loading');
        },
        setContent: function(view, target) {
            var content = this.content;
            var subUrl = this.target;

            if (content) content.remove();

            content = this.content = view;
            subUrl = this.target = target;

            var templateName = subUrl;
            var tmpl_dir = '../assets/static';
            var tmpl_url = tmpl_dir + '/' + templateName + '.html';
            var tmpl_string = '';

            $.ajax({
                url: tmpl_url,
                method: 'GET',
                async: false,
                dataType : 'html',
                success: function (data) {
                    tmpl_string = data;
                }
            });
            this.$content.html(content.render(tmpl_string).el);
        }
    });
    views.Home = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
        //how to get return result? in parent object?
    });
    views.Situation = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.list = Backbone.View.extend({
      initialize: function(){
        this.collection = new app.collection();
      },
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Culture = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Level = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
})();

list.html

  <script type="text/template" id="list-template">
      <div class="content">
        <a href="<%= list.url %>"></a>
        <figure id="<%= list.id %>">
          <img src="<%= list.imgSrc %>" alt="">
          <figcaption><%= list.title%></figcaption>
        </figure>
      </div>
      </script>

这是我的消息来源。

我想在Router和View之间进行通信，因为我不明白为什么指示

app.collcetion is not constructor

然后，我在 videolist.js

中进行了测试

var lists = new collections.VideoLists([
        {
            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"
        }
    ]);

生成的很棒。（在videoList.js）请参阅下面的屏幕截图。

我想知道如何重构重复的代码。

请参考我下面的来源
router.js

views.Home = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
        //how to get return result? in parent object?
    });
    views.Situation = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.list = Backbone.View.extend({
      initialize: function(){
        this.collection = new app.collection();
      },
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Culture = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Level = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });

view.js

 views.Home = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });
    views.Situation = Backbone.View.extend({
      render: function(templateName) {
        var template = _.template(templateName);
        this.$el.html(template);
        return this;
      }
    });

我不想重复相同的对象和来源。

我该如何更改它们？

Answer 1

var app = app || {}; 技术只是一种避免污染全局命名空间的命名空间模式。

创建一个名为 app 的全局变量，然后将应用代码添加到其中。将应用拆分为多个文件时，您希望能够使用之前定义的 app 变量。

进入 app || {} 技巧，如果 app 为真，则 return 变量或 {} 空对象，如果 app 为假（可能 undefined).

尽管此技术可以对文件进行不同的排序，但如果文件需要另一个组件（如 app.collection），则应相应地对文件进行排序。

<script src="collections.js"></script><!-- defines app.collection -->
<script src="views.js"></script><!-- requires app.collection -->

How do I declare a namespace in JavaScript?

关于重构，先看看，根据你使用的Underscore版本，它可能不会像你期望的那样工作。

然后，对于重复render函数，有这些是完全正常的。它们看起来很相似，但在开发过程中会变得非常不同。

如何重新定义对象和沟通对象？

How to redefine object and communicate object?

javascript

backbone.js