利用 BackboneJS 更好的组织 jQuery 应用的架构 已翻译 100%

blackshow 投递于 2013/10/30 08:59 (共 48 段, 翻译完成于 11-12)
阅读 16545
收藏 166
12
加载中

在构建高交互度的Web应用程序方面,JavaScript发挥出越来越重要的作用。如Backbone.js,Marionette.js,Ember.js 和Angular.js 这些库和框架,在流行度和功能方面快速成长。对于建立复杂和强大的浏览器应用这件事这些库和框架使之变得容易了。它们帮助我们迎来了一个单页应用时代SPAs使网页上的交互性和实用性达到了前所未有的程度

但为了达到互动的目的,并不是每个Web应用程序或网站上的每个页面都需要通过SPA框架来创建很多应用程序更适合于小规模的功能。对于这些页面,需要有一种高层次的交互性,同时又不需要客户端路由和其他的SPA功能属性。随着小页面在功能需求方面的减少,在创建页面时,将适当的框架和库的列表减少也顺理成章。例如,如果只是添加表单验证,你并不需要一个完整的MVC框架。要是不需要一个完整的SPA框架,而且有很好的理由的话,许多开发者编写代码时只会用到jQuery。而为了创建进一步的交互动作可以很容易地通过 plug-ins 和add-ons扩展jQuery提供的交互性

super0555
super0555
翻译于 2013/10/30 17:03
3

在建造大型的jQuery应用时,所面临的困难之一是保持代码有条理。它很容易迷失于世界末日的一棵圣诞树——一个深层嵌套的回调函数列表,这个列表看起来似乎掌控着每一个功能和交互。事实上,对于代码的组织或结构jQuery提供任何指导

好消息是,你不需要在jQuery和结构良好的代码之间做出选择,后者由SPA库和框架帮你书写。借助Backbone.js提供的结构良好创建模块,你可以把基于jQuery应用的简单性和交互性结合起来,以便创建同样具有很好代码组织结构的高互动性的网页

super0555
super0555
翻译于 2013/10/30 19:18
4

什么是Backbone.js

Backbone.js是一个帮助开发者在Web应用程序中向Javascript代码添加架构的组件库。来自BackboneJS.org的描述是这样的:

“Backbone.js通过提供带有键值绑定的模型和定制的事件,带有枚举功能的丰富的集合API,带有声明式事件处理的视图,而且将它所有这些东西通过一个RESTful JSON接口连接到你现有的API上面,来向Web应用程序提供架构

Backbone.js包含了提供不同组特定功能集合的构造块,包括:

  • Model:包含由键值对组成的属性的对象。Model封装了应用程序中的数据以及同数据相关的行为。
  • Collection:是一个模型的集合。Collection可以让相关模型的集合共同工作并且作为一个整体被管理。通用的集合特性诸如新增和移除,迭代,过滤等都有提供。
  • View:用于管理和操作DOM的通用方法集合与配置,并且显示来自Model和Collection的数据。View提供了使用jQuery DOM 事件的一种结构良好的方法,它们可以很容易的对HTML模板以及更多的其它东西进行渲染。
  • Event:它是对面向Javascript对象的观察者设计模式的一个小巧但强大的实现。事件将Backbone.js应用粘合在一起。Backbone.js中的每一个对象都包含事件系统,它让每一个Backbone.js对象都能触发事件并能得到处理。
  • Router和History:使用URL哈希片段或者HTML5的pushState技术来管理浏览器历史的对象集合。Router和History对象允许对一个应用程序的对象打上书签或者链接,重载页面的时候精确的回到上一次最后留下的样子。    
LeoXu
LeoXu
翻译于 2013/10/31 12:24
2

尽管Backbone.js有其它小的部分,但如果需要定制它们的时候,理解这些很重要。不过一个高层次观察对于大多数应用程序来说,这六个对象是最重要的

这些 Backbone.js 单个部分之外,从模式与架构的视角有一些关于如何称呼它的争论。 显然Backbone.js符合Model-View-* (MV*)模式家族。 毕竟它提供了一组对象,帮助你组织模型和视图。 但这并不完全符合MVC模式,或MVVM模式,或MVP,或别的什么。Backbone.js为MV *家族的一个成员是最简单的。在此基础上 人们叫它什么并没有多大 差异
super0555
super0555
翻译于 2013/10/30 16:30
2

建立联系人列表

许多应用类型需要为他人存储和查询联系人信息,比如一个CRM系统,一个时间追踪应用,账单或者其他的一些东西。尽管联系人应用可能还没有最令人激动的特性集合,但它提供了一个使用高级交互性的很好的例子,但不需要成为SPA。

一个简单的联系人列表仅仅需要少量的特性:

  • 联系人列表
  • 添加联系人
  • 编辑联系人
  • 删除联系人
  • 联系人数据
它也需要与这些特性相配的数据,包括:
  • 姓名
  • 图片URL
  • 邮件地址
  • 电话号码
  • 注释
在学习Backbone.js过程中使用的简单联系人列表仅仅需要处理一个单独的邮件地址和电话号码。在真正的应用中,你会想要允许多个电话号码和邮箱地址,但Backbone.js没有内建的嵌套或者分层的模型。这让处理多值或者嵌套对象和集合变得有些更具挑战性,尽管通过插件添加这项功能并不困难。一个简单的邮件地址和电话号码可以满足这个应用。
Ley
Ley
翻译于 2013/10/31 08:03
4

这个应用的布局相对简单,可以如图片1图片2的样子。只需要一个列表视图而且有一个表单来添加和编辑联系人。

Click for a larger version of this image.

图片 1: 这是添加联系人表单

Click for a larger version of this image.


图片2: 这是联系人列表例子。

当你点击添加按钮,表单将显现,并允许你添加一个新的联系人。点击保存将联系人信息发送到服务器。点击取消清除表单并隐藏表单。

在联系人列表中,点击编辑按钮可以显示同添加过程一样的样子,但是表单里将有存在的联系人信息。点击保存并发送编辑信息给服务器。保存还是用最新的信息来更新联系人列表。取消将抛弃任何改变并不会更新列表。

yale8848
yale8848
翻译于 2013/10/30 20:02
3

一个API服务器

Backbone.js为数据提供一个如REST的API,并能和服务器端很好的交互。这个在很多语言中都能很容易的安装,包括Ruby on Rails、NodeJS、ASP.NET MVC(包括WebAPI)、Python Django和各种PHP框架等等。最重要的方面不是服务器使用的技术架构。当然,其重点是如REST的API并能提供各种资源。

Backbone.js是在Rails的世界中开发的,所以它的API使用起来如一个Rails生成的API。Backbone.js工作使用的每一个资源应该对应一个在Web服务器上的API,这个API可以接受和返回JSON,而且符合Rails URL和HTTP的约定动作。

yale8848
yale8848
翻译于 2013/10/30 19:39
3

在某个联系人列表里,其API可能如下:

  • GET /contacts:返回所有联系人
  • POST /contacts: 从表单数据中创建一个新的联系人,其数据用JSON格式
  • GET /contacts/:id: 通过参数id得到指定联系人
  • PUT /contacts/:id: 通过得到表单传来的JSON格式数据来更新一个存在的联系人。通过id参数来标识更新的联系人
  • DELETE /contacts/:id: 通过指定id来删除联系人

这篇文章中构建联系人应用是一个技术而且对于服务器框架来说是未知的,直到服务器符合了基本API结构。至于你怎样才能实现服务器框架则完全取决于你。

yale8848
yale8848
翻译于 2013/10/30 19:50
3

新增表单

在为这个app准备的javascript中首先要做的,是处理新增按钮的点击。添加一个标准的jQuery DOMReady 回调函数,以确保DOM已经准备好并且可用了。然后,在DOMReady回调函数里面,添加一个找到#add元素的选择器还有对点击事件的侦听。在事件参数上调用preventDefault以确保按钮的点击不会传到服务器。

$(function(){

  $("#add").click(function(e){
    e.preventDefault();
    showAddForm();
  });

  // other code will go here ... 

});

在事件的回调函数里面制造了一个对showAddForm的调用,以展示添加表单。这个函数找到#add-edit-form元素,并且使用动画来展示它。

function showAddForm(){
  var form = $("#add-edit-form");
  form.slideDown();
}
接下来,为#save按钮的点击事件添加一个事件处理器。这个按钮存在于#add-edit-form里面,但它也可以通过ID被选择器找到。在点击处理器中,从表单中所有的输入元素中抓取数据并且将其发送到服务器以创建一个新的contact。当这些都做好以后,就用新的contact信息更新contact的列表,就像列表1所展示的那样。 
LeoXu
LeoXu
翻译于 2013/10/31 07:57
4

当向服务的传送成功时,它会调用updateList和clearForm函数,它们会做你所希望做的事情( 简洁起见,这些断码从略)。

不需要完成这个简单应用的整个功能,你就能看明白现在代码能够很快的变成一揽子可用的功能挂在上面。这种结构松散的代码被相当典型的用在使用jQuery的小型页面上。几乎每一个Javascript和jQuery开发者都写过类似的代码,而这一风格由于其能让一些小型的任务得以完成,因此会持续流行下去。

编写结构良好的jQuery代码是可能的,当然,即使你使用了提供那种架构的框架或者库也可以。  那会变得像是你在重复制造轮子,所以你应该专注于如何让业务运作起来。不要在构建基础架构上花时间,就使用模型,集合,视图和其他Backbone.js能够提供的类型,将你的应用程序迁移到这样一个更好的架构上,然后一步一个脚印。

LeoXu
LeoXu
翻译于 2013/10/31 08:07
3
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(15)

行者__
行者__

引用来自“jingdor”的评论

我记得外国有个教程很简短的 就讲完了 backbone.js 怎么用了 为啥这篇罗嗦了 这么多.
1:请具体指出是哪一篇.简短就好? 2:如果你觉得啰嗦,请给出不罗嗦的. 结论: 说话张嘴就喷,处处抱怨,自以为是,讲话含糊不明,无理无据, 这就是能力和素质低的具体体现,请加油修炼学习提高自己.说话要三思.
tonitech
tonitech

引用来自“莫慌张”的评论

引用来自“七念”的评论

重客户端才用这玩意儿,但是重客户端会导致机器的资源不足,如果你打开东西多的话,机子一直在响,这玩东西也不好调试,豆瓣有个什么来着用的这玩意儿,有点花哨,一般的项目Jquery就足够了,不推荐用这东西,前端应该是简约风格,一些重要的东西放在后台

用这种方式可以有效得节约服务器资源和加快用户访问速度。。你所有东西都放后台做的话每次用户访问时是重新访问一次页面,而用这个的话用户后续每次只需读取相应json数据然后用户浏览器自动渲染生成界面。这样用户访问速度快又能节省服务器开销何乐而不为呢?我崇尚后台和前端完全分开模式。后台处理后通过json和前端交互数据,关于模板生成渲染全部由前端完成。。
前端交互特别多的大项目可以使用这个,我也一直用restful的架构,前后完全分离。
t
t0591
backbone用的项目比较多
墨鱼ID
墨鱼ID
感觉最重要的还是能有效的组织前端代码,而且对rest的支持可以减少很多ajax的代码量
feld
feld
挺好用的,最近我们公司某些项目就使用了它,基于seajs+backbone,学习成本很高,但只要理解了他的思想理念,我感觉比现有开发模式好很多,有时候还是不要断章取义,亲自深入了解下再评论
smallbaby
smallbaby
正在找backbone和easyui的结合方式.....烦。。
MrMign
MrMign
好复杂啊
ffyisme
ffyisme

引用来自“ssmh01”的评论

引用来自“七念”的评论

重客户端才用这玩意儿,但是重客户端会导致机器的资源不足,如果你打开东西多的话,机子一直在响,这玩东西也不好调试,豆瓣有个什么来着用的这玩意儿,有点花哨,一般的项目Jquery就足够了,不推荐用这东西,前端应该是简约风格,一些重要的东西放在后台

用这种方式可以有效得节约服务器资源和加快用户访问速度。。你所有东西都放后台做的话每次用户访问时是重新访问一次页面,而用这个的话用户后续每次只需读取相应json数据然后用户浏览器自动渲染生成界面。这样用户访问速度快又能节省服务器开销何乐而不为呢?我崇尚后台和前端完全分开模式。后台处理后通过json和前端交互数据,关于模板生成渲染全部由前端完成。。

对于MIS类单页面并且结构简单的web应用使用这种模式的多,对于复杂页面,很少使用这种模式,一方面是JS的模板引擎功能不够强大,另一方面,后端可以通过CDN和cache换成页面,对于web server的压力并不是特别大
watchdb
watchdb
http://localtodos.com/ http://backbonejs.org/docs/todos.html 这个?
莫慌张
莫慌张

引用来自“七念”的评论

重客户端才用这玩意儿,但是重客户端会导致机器的资源不足,如果你打开东西多的话,机子一直在响,这玩东西也不好调试,豆瓣有个什么来着用的这玩意儿,有点花哨,一般的项目Jquery就足够了,不推荐用这东西,前端应该是简约风格,一些重要的东西放在后台

用这种方式可以有效得节约服务器资源和加快用户访问速度。。你所有东西都放后台做的话每次用户访问时是重新访问一次页面,而用这个的话用户后续每次只需读取相应json数据然后用户浏览器自动渲染生成界面。这样用户访问速度快又能节省服务器开销何乐而不为呢?我崇尚后台和前端完全分开模式。后台处理后通过json和前端交互数据,关于模板生成渲染全部由前端完成。。
返回顶部
顶部