如何重新定義對象並傳遞對象？

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功能，這是完全正常的。它們看起來很相似，但在開發過程中會有很大的不同。