Javascript 如何重新定义对象和通信对象？

我遇到了一些问题，我知道

var-app=app | |{}

意味着创建变量app是空对象，然后通过重新定义活动来使用app

但我不明白如何像上面的方法那样使用主干中的空对象

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);
})();

    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;
      }
    });
})();

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;
      }
    });

 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;
      }
    });

view.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);
})();

    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;
      }
    });
})();

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;
      }
    });

 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;
      }
    });

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> 

很好。（在videoList.js中） 请参阅下面的屏幕快照

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

请参考我下面的资料来源
router.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);
})();

    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;
      }
    });
})();

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;
      }
    });

 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;
      }
    });

view.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);
})();

    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;
      }
    });
})();

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;
      }
    });

 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;
      }
    });

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

---

如何更改它们？

var-app=app | |{}技术只是一种名称空间模式，以避免污染全局名称空间

创建名为

app

的单个全局变量，然后将应用程序的代码添加到其中。将应用程序拆分为多个文件时，如果先前定义了

app

变量，则希望能够使用该变量

进入

app | |{}

技巧，如果

app

是真的，则返回

app

变量；如果

app

是假的，则返回

{}

空对象（可能是

未定义的
）

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

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





关于重构，首先看一看，根据您使用的下划线版本，它可能不会像您预期的那样工作

然后，对于repeating
render
函数，使用这些函数是完全正常的。它们看起来很相似，但在开发过程中会变得非常不同。
没有人会仔细阅读这些内容。参考以下内容如果你问了两个不同的问题，你应该针对重构部分创建一个新的问题。几分钟后，我将写一个与主题不同的问题，感谢你的评论，我会更好地写一个关于写作问题的问题：）你总是友好地回答我的问题，所以我非常感激。我的一些问题已经解决了，但仍然存在一些问题。我会给出问题的答案。你能解决这些问题吗？我总是感谢你。真诚地