什么是构建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项目的好方法？

回答

相关问题