backbone.js的目的是什么?

我试图从它的网站http://documentcloud.github.com/backbone上理解backbone.js的实用程序,但我仍然不能弄清楚很多。

谁能帮我解释一下它是如何工作的,以及它如何有助于编写更好的JavaScript?

157976 次浏览

js是一个帮助你组织代码的JavaScript框架。它实际上是构建应用程序的基础。它不提供小部件(如jQuery UI或Dojo)。

它为您提供了一组很酷的基类,您可以扩展这些基类来创建与服务器上RESTful端点接口的干净JavaScript代码。

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

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

JQuery和Mootools只是一个工具箱,里面有很多你项目的工具。Backbone就像你的项目的架构或主干,你可以在上面使用JQuery或Mootools构建应用程序。

js基本上是一个超轻的框架,它允许你以MVC(模型,视图,控制器)的方式来构造你的Javascript代码。

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

视图是这个模型的HTML表示(视图随着模型的改变而改变,等等)

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

我发现了Backbone的一些优点:

  • 不再有Javascript面条:代码被组织并分解成语义上有意义的.js文件,然后使用JAMMIT进行组合

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

  • 事件绑定可以正常工作

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

  • js的代码有很好的文档,值得一读。让我看到了很多JS代码技术。

缺点:

  • 我花了一段时间来思考如何将它应用到我的代码中,但我是一个Javascript新手。

下面是一组关于使用Backbone和Rails作为后端的很棒的教程:

CloudEdit:一个Backbone.js教程与Rails:

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/

附:还有这个很棒的集合类,它可以让你处理模型的集合和模拟嵌套模型,但我不想从一开始就把你弄糊涂。

这是一个有趣的演示:

Backbone.js简介 .js简介

提示(来自幻灯片):

  • 浏览器中的Rails ?没有
  • JavaScript的MVC框架?有几分
  • 一个巨大的状态机?是的 !
这是一个很好的入门视频: http://vimeo.com/22685608 < / p > 如果你正在寻找更多关于Rails和Backbone的知识,Thoughtbot有这本非常好的书(不是免费的): https://workshops.thoughtbot.com/backbone-js-on-rails < / p >

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

如果你计划构建的是UI经常改变但不去服务器获取整个新页面显示方式的东西,那么你可能需要像Backbone.js或Sammy.js这样的东西。最基本的例子就是谷歌的GMail。如果你曾经使用过它,你会注意到当你第一次登录时,它会下载一大块HTML、CSS和JavaScript,然后一切都在后台发生。它可以在阅读电子邮件和处理收件箱之间切换,并再次搜索和返回所有这些邮件,而无需要求呈现一个全新的页面。

这类应用程序正是这些框架所擅长的,使其更易于开发。如果没有它们,你将会把不同的库集合在一起来获得部分功能(例如,用于历史管理的jQuery BBQ,用于事件的events .js等),或者你将最终自己构建一切,并必须自己维护和测试一切。相比之下,像Backbone.js这样的东西在Github上有成千上万的人在观看,人们可能在数百个分叉上工作,以及在Stack Overflow上已经提出和回答了数百个问题。

但是,如果您计划构建的东西不够复杂,不值得花费与框架相关的学习曲线,那么这一切都不重要。如果你仍然在构建PHP、Java或其他网站,而后端服务器仍然在根据用户的请求进行构建网页的所有繁重工作,而JavaScript/jQuery只是在这个过程中锦上添花,那么你将不需要或还没有准备好使用Backbone.js。

涉及大量用户交互和许多AJAX请求的web应用程序,需要不时更改,并实时运行(如Facebook或StackOverflow)应该使用MVC框架,如Backbone.js。这是构建好代码的最好方法。

如果应用程序很小,那么Backbone.js就太过分了,尤其是对第一次使用它的用户。

Backbone为您提供了客户端MVC,以及由此隐含的所有优势。

backbone.js是模型-视图-控制器(MVC)与JavaScript 但是Extjs(存档)比MVC模式的骨干更好的java脚本

有了骨气,你几乎可以自由地做任何你想做的事。而不是尝试通过api和自定义,我将使用Backbonejs,因为它的简单性和易于实现。同样,很难说你需要从这两者中得到什么,一个是库,另一个是组件

我必须承认,MVC的所有“优势”并没有使我的工作更容易、更快或更好。它只是使整个编码体验更加抽象和耗时。当试图调试其他人关于分离意味着什么的概念时,维护是一场噩梦。不知道你们中有多少人曾经尝试过更新使用Cairngorm作为MVC模型的FLEX站点,但是应该花费30秒的更新通常需要超过2个小时(查找/跟踪/调试只是为了找到一个事件)。MVC过去是,现在仍然是,对我来说,你可以填充的“优势”。

是客户端的MVC设计模式,相信我。这将为你节省大量的代码,更不用说更干净清晰的代码,更容易维护的代码。 一开始可能有点棘手,但相信我,这是一个很棒的图书馆。< / p >

Backbone is

...一个非常小的组件库,你可以用来帮助组织你的代码。它被打包成一个JavaScript文件。除去注释,它的实际JavaScript代码不到1000行。它写得很合理,你可以在几个小时内读完整本书。

它是一个前端库,你用一个脚本标签把它包含在你的网页中。它只影响浏览器,很少涉及服务器,除了理想情况下它应该公开一个restful API。

如果您有一个API, Backbone有一些有用的特性可以帮助您与它对话,但是您可以使用Backbone向任何静态HTML页面添加交互性。

Backbone is for

...为JavaScript添加结构。

因为JavaScript不强制执行任何特定的模式,所以JavaScript应用程序很快就会变得非常混乱。任何用JavaScript构建过一些非常简单的东西的人都可能会遇到这样的问题:

  1. 我将在哪里存储数据?
  2. 我要把函数放在哪里?
  3. 我将如何将我的函数连接在一起,以合理的方式调用它们,而不是变成意大利面条?
  4. 如何让不同的开发人员可以维护这些代码?

Backbone试图回答这些问题,为您提供:

  • 模型和集合帮助您表示数据和数据的集合。
  • 视图,以帮助您在数据更改时更新DOM。
  • 事件系统,以便组件可以相互侦听。这样可以使组件解耦合并防止面条化。
  • 合理约定的最小集合,因此开发人员可以在相同的代码库上一起工作。

我们称之为MV*模式。模型,视图和可选的额外功能。

Backbone -is-light

尽管最初的样子,Backbone非常轻,但它几乎什么都不做。它所做的是非常有用的。

它提供给你一组你可以创建的小对象,它们可以发出事件并相互监听。例如,您可以创建一个小对象来表示注释,然后创建一个小commentView对象来表示注释在浏览器中特定位置的显示。

您可以告诉commentView监听注释并在注释更改时重新绘制自己。即使您在页面的多个位置显示了相同的注释,所有这些视图也可以侦听相同的注释模型并保持同步。

这种编写代码的方式可以帮助您避免陷入混乱,即使您的代码库因许多交互而变得非常大。

< h2 id = " models-r34g " > < / h2 >模型

开始时,通常将数据存储在全局变量中,或在DOM中作为数据属性存储。这两种方法都有问题。全局变量之间可能会发生冲突,并且通常形式不好。存储在DOM中的数据属性只能是字符串,您将不得不再次解析它们。存储数组、日期或对象之类的东西,以及以结构化形式解析数据是很困难的。

数据属性是这样的:

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

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

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

< h2 id = " views-evax " > < / h2 >的看法

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

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

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

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

同样,当您在表单中输入时,视图可以更新模型对象。所有其他视图都会监听这个模型,然后调用它自己的渲染函数。

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

渲染函数

你可以用任何你认为合适的方式来实现你的渲染函数。您可以在这里放入一些jQuery来手动更新DOM。

您还可以编译一个模板并使用它。模板只是一个带有插入点的字符串。您将它与JSON对象一起传递给编译函数,并获得一个编译后的字符串,可以将其插入到DOM中。

< h2 id = " collections-oo4z " > < / h2 >集合

您还可以访问存储模型列表的集合,因此todoCollection将是todo模型的列表。当集合获得或丢失模型、更改其顺序或更新集合中的模型时,整个集合将触发一个事件。

视图可以侦听集合并在集合更新时更新自身。

例如,您可以向集合添加排序和筛选方法,并使其自动排序。

And Events to Tie It All Together

应用程序组件尽可能地相互解耦。它们使用事件进行通信,因此shoppingCartView可能监听shoppingCart集合,并在购物车被添加到其中时重绘自身。

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

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

  • 视图监听模型,并在模型发生变化时进行渲染。
  • 视图侦听集合并在集合中的项发生变化时呈现列表(或网格或地图等)。
  • 模型侦听视图,以便它们可以更改状态,也许是在编辑表单时。

像这样解耦对象并使用事件进行通信意味着您永远不会陷入困境,并且添加新组件和行为也很容易。您的新组件只需要侦听系统中已经存在的其他对象。

< < h2 id = " conventions-g8q8 " >约定/ h2 >

为Backbone编写的代码遵循一组松散的约定。DOM代码属于视图。集合代码属于集合。业务逻辑放在模型中。另一个开发人员继承了您的代码库,将能够开始运行。

求和

Backbone是一个轻量级库,可以为代码提供结构。组件是分离的,并通过事件进行通信,因此您不会陷入混乱。您可以轻松地扩展代码库,只需创建一个新对象并让它适当地侦听现有对象即可。您的代码将更干净、更好、更可维护。

我的小本子

我非常喜欢骨气,还专门写了一本介绍骨气的书。你可以在这里在线阅读:http://nicholasjohnson.com/backbone-book/

我还把材料分解成一个简短的在线课程,你可以找到在这里(存档)。你可以在一天内完成课程。

Backbone由Jeremy Ashkenas创建,他还编写了CoffeeScript。作为一个javascript较多的应用程序,我们现在所知道的Backbone负责将应用程序构建成一个一致的代码库。backbone的唯一依赖项Underscore.js也是DocumentCloud应用的一部分。

Backbone帮助开发人员在客户端web应用程序中管理数据模型,使用的纪律结构与在传统服务器端应用程序逻辑中获得的一样多。

使用Backbone.js的其他好处

  1. 将Backbone视为一个库,而不是一个框架
  2. Javascript现在以一种结构化的方式组织起来,(MVVM)模型
  3. 庞大的用户群体

已经有这么多好答案了。Backbone js有助于保持代码的组织性。更改模型/集合可以自动处理视图渲染,从而减少了大量的开发开销。

尽管它为开发提供了最大的灵活性,但开发人员应该小心地销毁模型并正确地删除视图。否则,应用程序中可能会出现内存泄漏。