bone.js的目的是什么?

2020/09/27 06:41 · javascript ·  · 0评论

我试图从它的站点http://documentcloud.github.com/backbone理解belish.js的实用程序,但是我仍然不太清楚。

有人可以通过解释它的工作原理以及对编写更好的JavaScript有什么帮助来帮助我吗?

Backbone.js基本上是一个超轻型框架,可让您以MVC(模型,视图,控制器)的方式构造Javascript代码,其中...

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

视图是此模型的HTML表示(视图随模型的变化而变化,等等)

以及可选的Controller(在这种情况下,该Controller允许您通过hashbang URL)保存Javascript应用程序的状态,例如:http : //twitter.com/#search? q=backbone.js

我在Backbone上发现的一些优点:

  • 不再使用Javascript Spaghetti:将代码组织并分解为语义上有意义的.js文件,然后使用JAMMIT对其进行组合

  • 没有更多的jQuery.data(bla, bla):没有必要在DOM存储数据,在型号代替使用存储数据

  • 事件绑定就可以了

  • 极其有用的Underscore实用程序库

  • ribs.js代码有据可查,并且读物很好。使我对许多JS代码技术大开眼界。

缺点:

  • 花了我一些时间来解决这个问题,并弄清楚如何将其应用于我的代码,但是我是Java语言的新手。

这是一组有关将Backbone与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类,可让您处理模型的集合并模仿嵌套模型,但是我不想从一开始就使您感到困惑。

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

如果您打算构建的界面是UI会定期更改其显示方式,但不去服务器获取整个新页面,则您可能需要Backbone.js或Sammy.js之类的东西。谷歌的GMail就是这样的主要例子。如果您曾经使用过它,您会注意到它在您首次登录时下载了一大块HTML,CSS和JavaScript,然后在后台进行所有操作。它可以在阅读电子邮件和处理收件箱以及再次搜索并遍历所有收件箱之间切换,而无需请求呈现整个新页面。

这些框架擅长使这类应用易于开发。没有它们,您要么将各种单独的库组合在一起以获得部分功能(例如,用于历史管理的jQuery BBQ,用于事件的Events.js等),要么最终自己构建所有东西并且还必须自己维护和测试所有内容。与此形成鲜明对比的是,Backbone.js之类的东西在Github上有成千上万的人在观看它,人们可能正在使用它的数百个Fork,在Stack Overflow上已经有数百个问题已经问及回答了。

但是,如果您计划构建的内容不够复杂而不值得与框架相关的学习曲线,那么这一切都不重要。如果您仍在构建PHP,Java或其他网站,后端服务器仍在根据用户的请求来构建网页,而JavaScript / jQuery只是在该过程中锦上添花,那您就不会不需要或尚未准备使用Backbone.js。

骨干是...

...一个很小的组件库,可用于帮助组织代码。它打包为单个JavaScript文件。除注释外,它的实际JavaScript少于1000行。它写得很明智,您可以在几个小时内阅读全部内容。

这是一个前端库,您可以在脚本中将其包含在网页中。它只会影响浏览器,对服务器的影响很小,只是理想情况下应该公开一个宁静的API。

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

骨干是...

...将结构添加到JavaScript。

因为JavaScript不强制执行任何特定的模式,所以JavaScript应用程序很快就会变得非常混乱。任何在JavaScript中构建过琐碎事物的人都可能遇到以下问题:

  1. 我将数据存储在哪里?
  2. 我将功能放在哪里?
  3. 我如何将我的功能连接在一起,以便以一种明智的方式调用它们,而不会变成意大利面条?
  4. 如何使该代码可由其他开发人员维护?

Backbone试图通过给您以下答案来回答这些问题:

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

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

骨干很轻

尽管最初出现过,Backbone的重量却非常轻,几乎没有任何作用。它所做的工作非常有帮助。

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

您可以告诉commentView收听评论,并在评论更改时重绘自身。即使您在页面上的多个位置显示了相同的评论,所有这些视图也可以收听相同的评论模型并保持同步。

即使您的代码库因许多交互而变得很大,这种方式的代码编写方法也可以帮助您避免纠结。

楷模

开始时,通常将数据存储在全局变量中或作为数据属性存储在DOM中这两个都有问题。全局变量可以相互冲突,并且通常是错误的形式。存储在DOM中的数据属性只能是字符串,您将不得不对其进行解析。很难存储诸如数组,日期或对象之类的东西,并且很难以结构化形式解析数据。

数据属性如下所示:

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

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

更新模型后,它将触发一个事件。您可能具有与该特定对象关联的视图。该视图侦听模型更改事件并重新渲染自身。

观看次数

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

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

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

视图通常还绑定到特定的模型或集合。当模型更新时,它将引发视图侦听的事件。他们可能会调用该视图来重绘自身。

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

这使我们可以清晰地分离关注点,使我们的代码保持整洁。

渲染功能

您可以按照自己认为合适的任何方式实现渲染功能。您可能只是将一些jQuery放在此处以手动更新DOM。

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

馆藏

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

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

您可以向集合中添加排序和过滤方法,例如使其自动排序。

和将一切联系在一起的活动

应用程序组件应尽可能彼此分离。它们使用事件进行通信,因此shoppingCartView可能会侦听shoppingCart集合,并在添加购物车时重新绘制自身。

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

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

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

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

约定

为Backbone编写的代码遵循一组宽松的约定。DOM代码属于视图。集合代码属于集合。业务逻辑进入模型。另一位使用您的代码库的开发人员将能够开始工作。

总结一下

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

我的小书

我非常喜欢Backbone,因此写了一些介绍性的书。您可以在此处在线阅读:http : //nicholasjohnson.com/backbone-book/

我还将材料分解为一个简短的在线课程,您可以在这里找到它:http : //www.forwardadvance.com/course/backbone您可以在大约一天的时间内完成课程。

这是一个有趣的演示:

Backbone.js简介

提示(来自幻灯片):

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

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

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

JQuery和Mootools只是一个包含大量项目工具的工具箱。骨干网就像项目的架构或骨干网一样,您可以使用JQuery或Mootools在其上构建应用程序。

这是一个非常不错的入门视频:http :
//vimeo.com/22685608

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

我必须承认,MVC的所有“优势”从未使我的工作变得更轻松,更快或更好。它只是使整个编码体验更加抽象和耗时。当尝试调试别人对分离意味着什么的概念时,维护是一场噩梦。不知道你们中有多少人曾经尝试更新使用Cairngorm作为MVC模型的FLEX站点,但是需要30秒才能完成的更新通常需要2个小时以上的时间(仅为了查找单个事件而进行的狩猎/跟踪/调试) )。对我来说,MVC过去是,现在仍然是可以填充的“优点”。

这是我在BackboneJS上撰写的快速入门文章。希望能帮助到你!
http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

骨架.js是带有JavaScript的模型视图控制器(MVC),
Extjs优于Java脚本编写的MVC模式的骨架

有了骨干,您几乎可以自由做任何您想做的事情。与其尝试遍历api和自定义,不如使用Backbonejs,因为它简单易行。再说一遍,很难说您需要的是一个库还是另一个组件

骨干网由Jeremy Ashkenas创建,他还撰写了CoffeeScript。作为一个JavaScript繁重的应用程序,我们现在称为Backbone负责将应用程序结构化为一致的代码库。Underscore.js是骨干唯一的依赖项,它也是DocumentCloud应用程序的一部分。

Backbone帮助开发人员在客户端Web应用程序中管理数据模型,就像在传统服务器端应用程序逻辑中一样,具有纪律性结构性

使用Backbone.js的其他好处

  1. 将Backbone视为库而不是框架
  2. 现在正在以结构化的方式组织Javascript (MVVM)模型
  3. 大型用户社区

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

将其视为轻量级的Sproutcore或Cappuccino框架。

相信我,这是客户端上的MVC设计模式。它将为您节省大量代码,更不用说更简洁明了的代码,更易于维护的代码了。起初可能有些棘手,但请相信我,它是一个很棒的图书馆。

已经有很多好的答案。Backbone js有助于保持代码井井有条。更改模型/集合会照顾到视图呈现的自动性,从而减少了很多开发开销。

即使它为开发提供了最大的灵活性,开发人员也应小心破坏模型并正确删除视图。否则,应用程序中可能会发生内存泄漏。

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

如果应用程序很小,那么Backbone.js会显得过时,特别是对于初次使用的用户。

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

本文地址:http://javascript.askforanswer.com/bone-jsdemudeshishenme.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!