什麼是構建Backbone.js項目的好方法？

我們目前正在啓動我們在這裏工作的第一個Backbone.js項目。實際上，它是我們除了奇怪的jQuery之外的第一個主要的JavaScript項目。什麼是構建Backbone.js項目的好方法？

無論如何，我們與我們的東西的建築鬥爭。什麼是最好的排序方式？

我們已經開始將單獨文件中的所有內容分解到文件夾中;視圖，模型，集合和路由器，然後我們將所有內容包含在我們的index.html中。但問題是這讓我們不得不在每個文件中檢查文檔就緒事件。這是做這件事的最好方法嗎？

下面是一個例子：

這就是所謂PageModel文件中，第一行似乎是錯誤的...

$(function(){ 
    app.models.Page = Backbone.Model.extend({ 
    //stuff 
    }); 
});

那麼在我們index.html我們有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title></title> 

     <link href="assets/css/style.css" rel="stylesheet" type="text/css" /> 

     <script type="text/javascript"> 
      var app   = app     || {}; 

      app.models   = app.models   || {}; 
      app.collections = app.collections  || {}; 
      app.views  = app.views   || {}; 
      app.routers  = app.collections  || {}; 
      app.templates  = app.templates  || {}; 

      app.models.griditems = app.models.griditems || {}; 
      app.views.griditems = app.views.griditems || {}; 
     </script> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
     <script src="assets/js/libs/json2.js" type="text/javascript"></script> 
     <script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"></script> 
     <script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"></script> 

     <script src="assets/js/models/GridItemModel.js" type="text/javascript"></script> 
     <script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"></script> 
     <script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"></script> 
     <script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"></script> 

     <script src="assets/js/collections/GridCollection.js" type="text/javascript"></script> 

     <script src="assets/js/templates/Submenu.js" type="text/javascript"></script> 
     <script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"></script> 

     <script src="assets/js/views/GridView.js" type="text/javascript"></script> 
     <script src="assets/js/views/GridItemView.js" type="text/javascript"></script> 
     <script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"></script> 
     <script src="assets/js/views/VideoGridItemView.js" type="text/javascript"></script> 

     <script src="assets/js/routers/Router.js" type="text/javascript"></script> 

     <script src="assets/js/Application.js" type="text/javascript"></script> 
    </head> 

    <body> 
    </body> 
</html>

來源

2011-08-19 Joel

沒有必要在DOMReady事件中定義模型/集合/視圖/路由器。只有當dom準備就緒時，唯一需要調用的是'Backbone.history.start（）'。 – shesek

這是我們在Backbone項目中使用的結構

app.js

var App = function() { 
     this.Views = {}; 
     this.Routers = {}; 
     this.Models = {}; 
     this.Collections = {}; 
     this.User = {}; 

     this.router = null; 
     this.view = null; 
     this.baseLocation = null; 

     this.beforeInit = function() {}; 
     this.afterInit = function() {}; 

     this.init = function(initData) { 
      if (typeof(this.beforeInit) === 'function') { 
       this.beforeInit.apply(this, arguments); 
      } 

      if (this.Views.Workspace) { 
       this.view = new this.Views.Workspace(); 
      } 
      this.baseLocation = window.location.href.replace(/[?#].*/, '') == Config.web.host; 

      if (this.Routers.Workspace) { 
       this.router = new this.Routers.Workspace(initData); 
      } 
      this.view && this.view.setListeners && this.view.setListeners(); 
      Backbone.history.start(); 

      if (typeof(this.afterInit) === 'function') { 
       this.afterInit.apply(this, arguments); 
      } 
     }.bind(this); 
    }; 

App.prototype = Core;

和renisans.js

var Rens = new App(); 

$.extend(Rens, { 
    container: null, 

    Error: function(data) { 
     // Handling error 
    }, 

    Localization: function(dictionary) { 
     return { 
      get: function(name) { 
       var argumentsList = Array.prototype.slice.call(arguments), 
        strings = argumentsList.slice(1), 
        text = this[name]; 

       if (text && strings.length) { 
        $(strings).each(function(i, string) { 
         var reg = new RegExp('\\$' + i, 'go'); 

         text = text.replace(reg, string); 
        }); 
       } 
       return text || 'SLB.Localization.' + name + ' not found!'; 
      }.bind(dictionary) 
     } 
    }, 

    formatDate: function(rawDate) { 
     var timestamp = /\d+/.exec(rawDate)[0], 
      date = Rens.DateUTC(timestamp), 
      months = Rens.Localization.get('months'); 

     return { 
      date: date, 
      fullDate: [date.dd, months[date.mm], date.hh].join(' '), 
      shortDate: [date.dd, date.MM, date.hh].join('.') 
     }; 
    }, 

    beforeInit: function(initData) { 
     this.Localization = new this.Localization(initData.Localization); 
    } 
});

還簡化模型中的內容物的10

內容/ profile.js

Rens.Models.Profile = Backbone.Model.extend({ 
    ... 
});

來源

2011-08-19 08:32:31

嘿！感謝你的回答。但是，您如何處理您的示例模型文件中的代碼？你還有文件準備好功能嗎？如果我可以看看你是如何構建renisans.js和app.js項目文件的，那將是超級酷。 – Joel

文件只准備一次只用於初始化 –

感謝@ant_Ti的一個偉大的職位，爲我解決了很多問題！但有幾個問題。自從Core.js使用了什麼樣的東西？ App.prototype = Core;？還有，爲什麼你同時擁有Application.js和renisans.js？ – Joel

如果您正在創建應用這種形狀，我強烈建議使用動態加載您的資產，如JavaScript和更多。

你有幾種選擇如下：

我自己有沒有LABjs經驗，但我一直在使用要求。 js在我自己的小項目中。但還沒有在一個重大項目中使用它。

的這種系統的優點：

你可以依賴關係工作，當它們被你的代碼的另一部分請求您的模型或視圖中僅被加載。不是所有的開始。
require.js還提供了基於您指定的依賴關係縮小和聚合代碼的功能。
require.js有幾個用於加載文本文件的小插件（如果您使用模板系統，這可能很有用，或者用於定義文件需要加載的順序的插件）
and require.js還有一個working together with jquery及其模塊的特殊版本。（但你不需要使用這個，你也可以手動加載jquery槽）

你將需要包裝你的models/views/...在模塊中，這樣require.js可以動態加載它們。我在上週詢問了關於堆棧溢出的問題...你可以找到有關如何做的信息here

我建議你閱讀'getting started with require.js'，看看你是否喜歡使用它。

因爲在單獨的文件中使用所有模型/視圖/ ...在開發過程中非常方便，但在投入生產時並不推薦使用。瀏覽器向服務器發送的請求越少越好。

來源

2011-09-12 13:02:18 Sander

我非常同意使用資源加載器。我們使用require.is，我強烈推薦它 – timDunham

什麼是構建Backbone.js項目的好方法？

回答

相關問題