backbone.js的用途是什么?

我试图从它的网站http://documentcloud.github.com/backbone了解backbone.js的效用,但我仍然无法弄清楚。

任何人都可以通过解释它的工作原理来帮助我吗?如何在编写更好的JavaScript方面有所帮助?

Backbone.js基本上是一个超亮的框架,允许你在一个MVC (模型,视图,控制器)的时尚结构的Javascript代码…

模型是检索和填充数据的代码的一部分,

视图是该模型的HTML表示(视图随模型更改等而变化)

和可选的控制器 ,在这种情况下,您可以通过hashbang URL保存Javascript应用程序的状态,例如: http : //twitter.com/#search? q=backbone.js

我在Backbone发现的一些优点:

  • 没有更多的JavaScript意粉:代码被组织和分解成语义有意义的.js文件,这些文件稍后使用JAMMIT

  • 没有更多的jQuery.data(bla, bla) :不需要在DOM中存储数据,而是将数据存储在模型中

  • 事件绑定只是起作用

  • 非常有用的下划线实用程序库

  • backbone.js代码是很好的文档和一个伟大的阅读。 打开了我的眼睛到一些JS代码技术。

缺点:

  • 花了我一阵头围绕它,弄清楚如何将它应用到我的代码,但我是一个Javascript新手。

以下是关于使用Backbone with Rails作为后端的一套很好的教程:

CloudEdit:带有Rails的Backbone.js教程:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps还有一个很棒的Collection类,可以让你处理模型集合和模仿嵌套模型,但是我不想从一开始就迷惑你。

如果您打算在浏览器中构build复杂的用户界面,那么您最终可能会发现自己最终发明了组成Backbone.js和Sammy.js等框架的大部分组件。 所以问题是,你是否在浏览器中构build了足够复杂的东西来使用它(所以你最终不会自己发明同样的东西)。

如果您打算构build的是UI定期更改显示方式但不去服务器获取整个新页面的内容,那么您可能需要类似Backbone.js或Sammy.js的内容。 Google的GMail就是这样的主要例子。 如果你曾经使用过它,你会注意到,当你第一次login时,它会下载一大块HTML,CSS和JavaScript,然后在后台发生一切。 它可以在读取电子邮件和处理收件箱之间移动,并且可以在不需要整个新页面的情况下search并重新search。

这就是这些框架擅长简化开发的应用程序。 如果没有它们,你最终可能会把各种各样的单个库合并在一起,以获得部分function(例如,jQuery BBQ用于历史pipe理,Events.js用于事件等),或者最终你自己创build一切也必须自己维护和testing一切。 与Backbone.js相比,Github上有成千上万的人在观看它,人们可能在上面工作的数百个叉子,以及Stack Overflow已经有数百个问题已经被问到和回答了。

但是,如果你打算构build的框架不够复杂,不值得与框架相关的学习曲线,那么没有什么重要的。 如果您仍在构buildPHP,Java或其他网站,而后端服务器仍然按照用户的请求来完成网页build设的繁重工作,而JavaScript / jQuery只是为这个过程锦上添花,需要或尚未准备好Backbone.js。

骨干是…

…一个非常小的组件库,您可以使用它来帮助组织您的代码。 它被打包成一个JavaScript文件。 不包含评论,它有不到1000行的实际JavaScript。 这是明智的写作,你可以在几个小时内阅读整个事情。

这是一个前端图书馆,您可以用脚本标记将其包含在您的网页中。 它只影响浏览器,并没有提及你的服务器,除非它理想地暴露一个平静的API。

如果您有一个API,Backbone有几个有用的function可以帮助您与之交谈,但是您可以使用Backbone为任何静态HTML页面添加交互性。

骨干是为…

…将结构添加到JavaScript。

由于JavaScript不执行任何特定模式,因此JavaScript应用程序可能会非常快速地变得非常混乱。 任何在JavaScript中构build超出琐碎内容的东西都可能遇到以下问题:

  1. 我将在哪里存储我的数据?
  2. 我在哪里可以放置我的function?
  3. 我将如何将我的function连接在一起,以便以合理的方式调用它们,而不是转向意大利面条?
  4. 我怎样才能让这个代码可以由不同的开发人员维护?

骨干寻求回答这些问题给你:

  • 模型和集合来帮助您表示数据和数据集合。
  • 视图,帮助您在数据更改时更新DOM。
  • 事件系统,使组件可以相互倾听。 这使您的组件解耦,并防止spaghettification。
  • 最小的一套明智的约定,所以开发人员可以在同一个代码库上一起工作。

我们称之为MV *模式。 模型,视图和可选附加组件。

骨干很轻

尽pipe最初出现,骨干是非常轻,几乎没有任何事情。 它所做的是非常有帮助的。

它为您提供了一组您可以创build的小对象,并可以发出事件并相互倾听。 例如,您可以创build一个小对象来表示评论,然后用一个小的commentView对象来表示评论在浏览器中特定位置的显示。

您可以告诉commentView来收听评论,并在评论发生变化时重新绘制自己。 即使您的网页上的多个位置显示相同的评论,所有这些视图都可以听同一个评论模型并保持同步。

即使您的代码库变得非常庞大并且有很多交互,这种组合代码的方式也可以帮助您避免纠结。

楷模

开始时,通常将数据存储在全局variables中,或者作为数据属性存储在DOM中。 这两个都有问题。 全局variables可能相互冲突,一般都是不好的forms。 存储在DOM中的数据属性只能是string,您将不得不再次parsing它们。 存储数组,date或对象之类的东西并且以结构化的formsparsing数据是很困难的。

数据属性如下所示:

 <p data-username="derek" data-age="42"></p> 

Backbone通过提供一个Model对象来表示你的数据和相关的方法来解决这个问题 。 假设你有一个待办事项列表,你将有一个模型来表示这个列表上的每个项目。

当你的模型更新时,它会触发一个事件。 你可能有一个与该特定对象绑定的视图。 该视图监听模型更改事件并重新呈现自身。

查看

Backbone为您提供了与DOM交谈的View对象。 所有操作DOM或监听DOM事件的函数都在这里。

一个视图通常实现一个渲染function,重绘整个视图,或者可能是视图的一部分。 实现一个渲染函数没有义务,但这是一个常见的约定。

每个视图都绑定到DOM的特定部分,因此您可能只有一个searchFormView,它只能侦听search表单,而shoppingCartView只能显示购物车。

视图通常也绑定到特定的模型或集合。 当模型更新时,它会触发视图侦听的事件。 该视图可能会调用渲染来重绘自己。

同样,当你input一个表单时,你的视图可以更新一个模型对象。 所有听其他模型的视图都会调用它自己的渲染函数。

这给了我们一个清晰的关注点,使我们的代码保持整洁。

渲染function

你可以用你认为合适的方式实现你的渲染function。 你可能只是在这里把一些jQuery手动更新DOM。

你也可以编译一个模板并使用它。 模板只是一个插入点的string。 你把它传递给一个JSON对象的编译函数,并获取一个编译的string,你可以插入到你的DOM。

集合

您还可以访问存储模型列表的集合,因此todoCollection将成为待办事项模型列表。 当一个集合获得或失去一个模型,改变它的顺序或集合中的一个模型更新时,整个集合会触发一个事件。

一个视图可以监听一个集合,并在集合更新时自行更新。

您可以将sorting和过滤方法添加到您的集合,并使其自动sorting,例如。

和事件联系在一起

尽可能多的应用程序组件是相互分离的。 他们使用事件进行通信,因此shoppingCartView可能会收听shoppingCart集合,并在添加购物车时重新绘制自己。

 shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render); 

当然,其他对象也可能正在收听shoppingCart,并且可能会执行其他操作,如更新总计,或者将状态保存在本地存储中。

  • 视图监听模型并在模型更改时进行渲染。
  • 视图监听集合,并在集合中的项目更改时呈现列表(或网格或地图等)。
  • 模型听视图,以便他们可以改变状态,也许当一个表单被编辑。

使用事件来解耦对象和使用事件进行通信意味着你永远不会纠结在一起,添加新的组件和行为是很容易的。 您的新组件只需要听取系统中已有的其他对象。

约定

为Backbone编写的代码遵循一些松散的约定。 DOM代码属于View。 集合代码属于一个集合。 业务逻辑进入模型。 另一位开发人员将能够实现您的代码库。

总结一下

骨干是一个轻量级的库,它可以为你的代码提供结构。 组件通过事件分离和通信,所以你不会一塌糊涂。 您可以轻松地扩展您的代码库,只需创build一个新对象并让它适当地监听现有的对象。 您的代码将更干净,更好,更易于维护。

我的小书

我非常喜欢Backbone,所以我写了一本有关它的简介。 你可以在这里在线阅读: http : //nicholasjohnson.com/backbone-book/

我也把这些材料分解成了一个简短的在线课程,你可以在这里find: http : //www.forwardadvance.com/course/backbone 。 你可以在一天内完成课程。

这是一个有趣的介绍:

Backbone.js的介绍

提示(来自幻灯片):

  • 在浏览器中的Rails? 没有
  • 一个JavaScript的MVC框架? Sorta
  • 一个大胖子状态机?

Backbone.js是一个JavaScript框架,可以帮助你组织你的代码。 它是字面上你build立你的应用程序的骨干。 它不提供小部件(如jQuery UI或Dojo)。

它为您提供了一组很酷的基类,您可以通过扩展来创build干净的JavaScript代码,与服务器上的RESTful端点进行交互。

JQuery和Mootools只是一个工具箱,有很多你的项目的工具。 骨干像项目的架构或主干,可以使用JQuery或Mootools构build应用程序。

这是一个相当不错的介绍性video: http : //vimeo.com/22685608

如果你正在寻找Rails和Backbone的更多信息,Thoughtbot有这本不错的书(不是免费的): https ://workshops.thoughtbot.com/backbone-js-on-rails

我不得不承认,MVC的所有“优点”从来没有让我的工作变得更容易,更快,更好。 它只是使整个编码体验更抽象和耗时。 维护是一个噩梦,当试图debugging某人概念的分离手段。 不知道你们有多less人试图更新一个使用Cairngorm作为MVC模型的FLEX站点,但是需要30秒钟更新的站点通常需要2个多小时(寻找/跟踪/debugging只是为了find一个事件)。 对于我来说,MVC对于你来说是一个“优势”。

backbone.js是模型 – 视图 – 控制器(MVC)的JavaScript,但Extjs比骨干的MVC模式由java脚本

有了骨干,你就可以自由地做任何你想做的事情。 而不是试图通过api分叉和定制我会使用Backbonejs的简单性和易于实现。 再一次,很难说你需要的是另外一个图书馆

Backbone由Jeremy Ashkenas创build,他也编写了CoffeeScript。 作为一个JavaScript重要的应用程序,我们现在所知道的Backbone负责将应用程序构build为一个一致的代码库。 Underscore.js是主干的唯一依赖,也是DocumentCloud应用程序的一部分。

Backbone可以帮助开发人员在客户端Web应用程序中pipe理数据模型,并具有与传统的服务器端应用程序逻辑相同的规则结构

使用Backbone.js的其他好处

  1. 看到Backbone是一个库,而不是一个框架
  2. 现在,Javascript正在以结构化的方式组织起来,即(MVVM)模型
  3. 大型用户社区

它还增加了使用控制器和KVO视图的路由。 你将能够用它开发“AJAXy”应用程序。

把它看作是一个轻量级的Sproutcore或Cappuccino框架。

在客户端是一个MVCdevise模式,相信我..这将节省大量的代码,更不用说更干净和清晰的代码,更容易维护代码。 起初可能有点棘手,但相信我是一个伟大的图书馆。

一个涉及很多用户与许多AJAX请求交互的Web应用程序,需要随时更改,并且实时运行(如Facebook或StackOverflow)应该使用MVC框架,如Backbone.js。 这是构build好代码的最好方法。

如果应用程序只是很小,那么Backbone.js是矫枉过正的,特别是对于第一次使用的用户。

骨干为您提供客户端MVC,以及所有这些隐含的优势。