关于javascript: backbone.js的用途是什么?

What is the purpose of backbone.js?

我试着从其站点http://documentcloud.github.com/backine了解backine.js的实用性,但我还是搞不清楚。

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


主干.js基本上是一个超轻型框架,允许您以MVC(模型、视图、控制器)的方式构造您的javascript代码,其中…

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

视图是此模型的HTML表示形式(视图随模型更改而更改,等等)。

以及可选的控制器,在本例中,它允许您通过hashbang URL保存JavaScript应用程序的状态,例如:http://twitter.com/search?Q=BurnBo.js

我发现一些有骨气的优点:

  • 不再有javascript意粉:代码被组织并分解成语义上有意义的.js文件,这些文件随后使用jammit进行组合。

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

  • 事件绑定工作正常

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

  • js代码有很好的文档记录和很好的阅读能力。让我了解了一些JS代码技术。

欺骗:

  • 我花了一段时间才意识到如何将它应用到我的代码中,但我是一个javascript新手。

下面是一组关于使用主干网和Rails作为后端的优秀教程:

cloudedit:a主干.js教程与rails:

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

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

另外还有一个很棒的集合类,可以让您处理模型集合和模拟嵌套模型,但我不想从一开始就混淆您。


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

如果您计划构建的内容是UI定期更改其显示方式,但不转到服务器获取整个新页面的地方,那么您可能需要像backbone.js或sammy.js这样的内容。这类事情的主要例子是谷歌的Gmail。如果你曾经使用过它,你会注意到它在你第一次登录时下载了一大块HTML、CSS和javascript,然后一切都发生在后台。它可以在阅读电子邮件和处理收件箱之间移动,然后再次搜索所有邮件,而无需请求呈现一个全新的页面。

正是这种应用程序使这些框架更易于开发。如果没有这些库,您要么最终聚集一组不同的库来获取部分功能(例如,用于历史管理的jquery bbq、用于事件的events.js等),要么最终自己构建所有东西,并自己维护和测试所有东西。与之形成鲜明对比的是,像backbone.js这样的东西,有成千上万的人在Github上观看它,数百个分叉,人们可能正在其中工作,还有数百个问题已经在堆栈溢出时在这里被问到和回答。

但是,如果您计划构建的内容不够复杂,不值得使用与框架相关的学习曲线,那么这些都不重要。如果您还在构建PHP、Java或其他站点,后端服务器仍然在用户请求的情况下重做构建Web页面,而JavaScript /jQuery只是在这个过程上锦上添花,您就不需要或还没有准备好BACKBONE.JS。


主干是…

…一个非常小的组件库,可以用来帮助组织代码。它打包成一个单独的javascript文件。不包括注释,它的实际javascript少于1000行。它写得很清楚,你可以在几个小时内读完整本书。好的。

它是一个前端库,您可以在网页中添加一个脚本标记。它只影响浏览器,对您的服务器几乎没有什么影响,只是在理想情况下它应该公开一个RESTfulAPI。好的。

如果您有一个API,主干有一些有用的功能可以帮助您与之交谈,但是您可以使用主干向任何静态HTML页面添加交互性。好的。主干用于…

…正在向javascript添加结构。好的。

因为javascript不强制任何特定的模式,所以javascript应用程序很快就会变得非常混乱。任何在javascript中构建了超越琐碎的东西的人都可能遇到以下问题:好的。

  • 我将把数据存储在哪里?
  • 我将把我的功能放在哪里?
  • 我将如何将我的函数连接在一起,以便以一种明智的方式调用它们,而不使用意大利面?
  • 我如何让不同的开发人员维护这个代码?
  • 主干试图通过以下方式回答这些问题:好的。

    • 模型和集合,帮助您表示数据和数据集合。
    • 视图,以帮助您在数据更改时更新DOM。
    • 一种事件系统,使组件能够互相监听。这样可以使您的组件保持分离状态,并防止散裂。
    • 一组最少的合理约定,这样开发人员就可以在同一代码基上工作。

    我们称之为mv*模式。模型、视图和可选附加项。好的。主干很轻

    尽管初见端倪,但脊骨非常轻,几乎什么都做不到。它的作用是非常有帮助的。好的。

    它为您提供了一组可以创建的小对象,这些对象可以发出事件并相互倾听。例如,您可以创建一个小对象来表示注释,然后创建一个小的CommentView对象来表示注释在浏览器中特定位置的显示。好的。

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

    这种编写代码的方式有助于防止您陷入混乱,即使您的代码库在许多交互中变得非常大。好的。模型

    开始时,通常将数据作为数据属性存储在全局变量或DOM中。这两者都有问题。全局变量可能相互冲突,并且通常是不好的形式。存储在DOM中的数据属性只能是字符串,您必须重新对它们进行分析。存储数组、日期或对象以及以结构化形式解析数据是很困难的。好的。

    数据属性如下:好的。

    1
    2
    <p data-username="derek" data-age="42">
    </p>Ok.

    主干通过提供一个模型对象来表示数据和相关方法来解决这个问题。假设您有一个待办事项列表,那么您将拥有一个表示该列表中每个项目的模型。好的。

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

    主干为您提供与DOM对话的视图对象。所有操作dom或监听dom事件的函数都在这里。好的。

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

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

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

    同样,在表单中键入内容时,视图可以更新模型对象。然后,侦听该模型的每个其他视图都将调用其自己的渲染函数。好的。

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

    您可以以任何您认为合适的方式实现渲染函数。您可以在这里放置一些jquery来手动更新dom。好的。

    您也可以编译一个模板并使用它。模板只是一个带有插入点的字符串。您将它与一个JSON对象一起传递给一个编译函数,然后返回一个编译后的字符串,您可以将它插入到您的DOM中。好的。收藏

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

    视图可以监听集合,并在集合更新时自动更新。好的。

    您可以向集合中添加排序和筛选方法,并使其自动排序。好的。以及将一切联系在一起的活动

    应用程序组件尽可能地相互分离。它们使用事件进行通信,因此ShoppingCartView可能会侦听ShoppingCart集合,并在将Cart添加到时重新绘制自身。好的。

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

    当然,其他对象也可能正在监听购物车,并可能执行其他操作,如更新汇总,或将状态保存在本地存储中。好的。

    • 视图侦听模型,并在模型更改时进行渲染。
    • 视图侦听集合,并在集合中的某个项更改时呈现列表(或网格或地图等)。
    • 模型听取视图,以便在编辑表单时更改状态。

    分离这样的对象并使用事件进行通信意味着您永远不会陷入麻烦之中,添加新的组件和行为很容易。新组件只需监听系统中已有的其他对象即可。好的。习俗

    为主干编写的代码遵循一组松散的约定。DOM代码属于一个视图。集合代码属于集合。业务逻辑进入模型。另一个开发人员拿起你的代码库将能够击中地面运行。好的。总结

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

    我非常喜欢脊骨,所以写了一本关于脊骨的介绍书。你可以在线阅读:http://nicholasjohnson.com/backin-book/好的。

    我还把材料分解成一个简短的在线课程,你可以在这里找到:http://www.forwardadvance.com/course/主干。你可以在大约一天内完成这门课程。好的。好啊。


    下面是一个有趣的演示:

    主干网简介.js

    提示(来自幻灯片):

    • 浏览器中的Rails?不。
    • 一个用于JavaScript的MVC框架?索塔
    • 一个大的脂肪状态机?对!


    jquery和mootools只是一个工具箱,其中包含了项目中的许多工具。主干就像是项目的架构或主干,您可以在其上使用jquery或mootools构建应用程序。


    js是一个JavaScript框架,可以帮助您组织代码。它实际上是构建应用程序的主干。它不提供小部件(如jquery ui或dojo)。

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


    我不得不承认,MVC的所有"优势"从未使我的工作变得更轻松、更快或更好。它只是让整个编码体验更加抽象和耗时。当试图调试某人对分离意味着什么的概念时,维护是一场噩梦。不知道你们中有多少人曾经尝试过更新一个使用cairngorm作为MVC模型的flex站点,但是更新需要30秒的时间通常需要2个多小时(搜索/跟踪/调试只是为了找到一个事件)。对我来说,MVC过去和现在都是一个"优势",你可以填充它。


    这是一个很好的介绍视频:网址:http://vimeo.com/22685608

    如果您正在寻找更多的铁路和主干,thoughtbot有一本非常好的书(不是免费的):https://workshops.thoughtbot.com/主干网-js-on-rails


    这是我写在主干网上的一篇快速入门文章。希望它有帮助!http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploration-javascript-mv-frameworks-part-1-hello-backbonejs.aspx


    主骨是杰里米·阿什肯纳斯创作的,他也写过咖啡描述。作为一个大量使用JavaScript的应用程序,我们现在所知道的主干负责将应用程序结构成一个一致的代码库。主干网唯一的依赖项underline.js也是documentcloud应用程序的一部分。

    主干网帮助开发人员在其客户端Web应用程序中管理数据模型,其规则和结构与传统服务器端应用程序逻辑相同。

    使用主干网的其他好处。

  • 将主干视为库,而不是框架
  • Javascript现在正以一种结构化的方式进行组织,即(MVVM)模型
  • 大型用户社区

  • 主干.js是带有javascript的模型视图控制器(MVC)但是用Java脚本实现的MVC模式的Extjs优于主干

    有了脊梁骨,你几乎可以自由地做任何你想做的事情。我将使用backboneJS,而不是尝试通过API和定制进行分叉,因为它简单且易于实现。同样很难说你需要的是两个库中的一个是库另一个是组件


    它还添加了使用控制器和带有KVO的视图的路由。您将能够用它开发"Ajaxy"应用程序。

    把它看作是一个轻量级的sproutcore或cappuccino框架。


    是客户端的MVC设计模式,相信我……它将为您节省大量的代码,更不用说更干净、更清晰的代码,以及更易于维护的代码。一开始可能有点棘手,但相信我,这是一个很棒的图书馆。


    已经有那么多好的答案了。主干JS有助于保持代码的有序性。更改模型/集合可以自动处理视图呈现,从而减少大量的开发开销。

    即使它为开发提供了最大的灵活性,开发人员也应该小心地销毁模型并适当地删除视图。否则,应用程序中可能存在内存泄漏。


    一个Web应用程序涉及大量用户与许多Ajax请求的交互,这些请求需要不时地更改,并且实时运行(如Facebook或StackOverflow),应该使用MVC框架,如主干.js。这是构建好代码的最佳方法。

    如果应用程序只是很小的话,那么主干.js就太危险了,特别是对于第一次使用的用户。

    主干网为您提供客户端MVC,以及由此带来的所有优势。