如何重新定义对象并传递对象？

Question

我遇到了一些问题，我知道var 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); 
})(); 

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> 

这是我的源。

我想，因为我不明白为什么表明

app.collcetion不是构造器

路由器和视图之间进行沟通，然后，我在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中） 请参阅下面的screentshot。

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

请参考我下面源
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 || {};技术只是一种命名空间模式，以避免污染全局名称空间。

More details on this namespacing pattern

中创建名为app单个全局变量，则对于应用程序的代码被添加到它。在多个文件中分割应用程序时，如果以前定义了变量，则希望能够使用app变量。

进入app || {}把戏，这将返回app变量，如果它是truthy或{}空对象，如果app是falsy（可能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?

---

关于重构，先来how to use _.template看看，这取决于下划线的版本，你使用，你期望它可能无法正常工作。

然后，对于重复render功能，这是完全正常的。它们看起来很相似，但在开发过程中会有很大的不同。