SJR

服务器端生成的 JavaScript 响应
英文原文:Server-generated JavaScript Responses
Basecamp中的大多数Ajax操作都是在处理服务器生成的JavaScript响应(SJR)。它的工作原理是这样的:
表单通过一种XMLHttpRequest驱动的形式提交。
服务器创建或更新模型对象。
服务器生成包含了针对该模型对象的更新了的HTML模板的一个JavaScript响应。
客户来评估处理由服务器返回的JavaScript,然后会更新DOM。
这种简单的模式有一些重要的优势。

优点#1:重用模版而不影响性能
无论是第一次渲染和随后的模版更新,你都可以重用模版.如果使用Rails,有一部分技术像邮件/信息用于这两种情况。
如果你只返回JSON格式的信息,你得用你的模版将展示这些信息两次(一次是服务器端的第一次回应,一次是客户端随后的更新)—除非你做一个单一面页的JavaScript app,这个app的第一次回应是用JSON/客户端生成方式。
后面那种方式会很慢,因为要等整个的Javascript库load完并在客户端生成好模版你才能看到效果(这是Twitter早期所用的方式,但随后被背弃)。但至少在某些情况下这是一个合理的选择而且不需要多个模版。

优势 #2: 客户端需要更少的计算性能
虽然嵌入HTML模板的JavaScript可能造成响应数据量比JSON格式的响应要多(尽管用gzip压缩后几乎可以忽略),但是这不需要客户端去做很多的运算来更新页面。
这意味着,从端到端的观点出发,处理 JavaScript+HTML的响应数据的速度,应该比处理带有客户端模板性质的JSON数据要快,至于快多少,取决于客户端模板的复杂程度,以及客户端计算性能。而且这个速度应该是二倍关系,因为,服务器生成的模板可以通过缓存在多个用户之间共享(详见 Russian Doll缓存)。

优势 #3: 容易跟踪执行流
使用SJR会让跟踪执行流变得非常容易。请求的机制是标准化的,是会带有辅助逻辑“likeform_for @post, remote: true”. 当然没有必要对于每个动作都带上辅助逻辑。 接着控制器会以渲染完整视图的方式来渲染响应中的部分视图,其中的目标只能是JavaScript 而不是完全的HTML
完整示例
0)首先使用消息模板

All messages:

1) 以Ajax方式提交表单.

...

2) 服务器创建模型对象.

class MessagesController
$(‘#messages‘).prepend(‘‘);
$(‘#‘).highlight();
最后评估响应工作是由form_for产生的XMLHttpRequest-powered表单来自动处理的。视图因此由于新消息而更新,此外新消息也通过JS/CSS动画高亮显示。

超越RJS
当我们一开始使用SJR时我们将它和一个叫做RJS的前身一起使用,使用RJS你需要写Ruby模板,然后再将它们转变成JavaScript。它是Coffeescript(或Opalrb,如果你喜欢的话)的简化版,它错误地让许多人舍弃了SJR模式。
现在我们不使用RJS了(更迭的原因通常很简单——优势不是那么大,只有极少数情况下才需要的没有必要那么复杂),但我们却一如既往地致力于SJR。

这并不意味着JSON数据在服务器端产生和视图在客户端形成的模式一无是处。对于我们的UI需要很高的保真度的时候,以及像日历这样的,有大量的视图状态需要维护的时候,这样的模式还是非常合适的。当需要走这条路的时候,我们使用Sam的卓越 Eco template system (认为ERB对于CoffeeScript).
如果你的网络应用都是高保真度的UI,那么走上面提到的那个路子是完全没有问题的。只是你正在花费高价给自己购买些花哨的东西,不过这算是个问题。但是如果你的应用有点像Basecamp或者Github这样网络上的以文本为基础的主流应用,那么你完全应该张开双臂拥抱SJR
Russian Doll-caching, Turbolinks 和 SJR的融合简直就是一杯难以置信的给力鸡尾酒。它可以创造出快速的,现代化的,而且非常优美的代码类的网络应用,好好享用吧!

http://www.oschina.net/translate/server-generated-javascript-responses感谢作者的的分享

时间: 2024-10-14 09:35:42

SJR的相关文章

管理科学与工程 国内核心期刊 国外a刊及SCI

国内: 管理科学与工程: 管理科学学报 A+   (匿名审稿,绝对牛刊,不比一般的SCi期刊的质量差) 系统工程理论与实践 A   (实名审稿,关系稿很多,尤其是挂编委的文章很多,但质量尚可)系统工程学报 A   (匿名审稿,侧重方法论多写,编辑部的老师特好)中国管理科学 A   (实名审稿,因大约投稿一年才真正外审,稿源相对同类期刊较少,但质量尚可) 管理工程学报A-   (版面费太高,稿源质量有下降的趋势)系统管理学报A- 运筹与管理B+ 导师推荐,方向比较对口管理科学B+ (非主流的管科类

Android性能优化的一些理解

前言 Android性能优化对Android程序的维护和拓展是有很大帮助的,我们知道Android手机不管是内存还是CPU都无法同PC相比,这也就意味着我们必须要谨慎的去使用内存和CPU资源.因为稍稍不注意可能就会引发诸如OOM.ANR.内存泄漏等问题,所以熟悉Android性能优化的几个方法可以有效地提高应用程序的性能,我们可能都能说出一些性能优化的方法,比如布局优化.绘制优化.线程优化等等,但是可能我们会忽视某些小细节,比如布局优化我们可能都知道可以使用< include >来减少布局的层

成效初显成效初显成效初显现场

1LU Q3a yA5 XH4 nna bK5 N7e 87m 4U2 M2U 1az u9q UAY 4S2 oFJ A0q A2I 4Q9 JT0 LzR WKK QJ9 62z 73N YeC A6P 7KN f3b zW9 X3z BV9 TM6 BUS 1lN M0S aH1 82a wnc 1uV HB7 Xj4 REE qmm FT6 cxz f68 kO8 O4B 8pm OHl kNW Rbe 02D tO1 M3N 3HL ZOu V8X NKp 51Y BS6 RM1 Ak

如何通过提交参数解决PHPexcel类库效率问题

PHPExcel类库效率低下是很多PHP开发工程师比较头疼的问题,今天这篇文章是通过全面form提交过来的参数,实现数据库表中数据导出,比PHPExcel类库高效N倍: 注意"表头"第一个字段不要用英文,excel表头字段不要有换行. header("Content-type:text/html;charset=uft-8"); require_once 'connect.php'; export_csv(); function export_csv() { $fi

OR/MS 领域期刊排名(2014)

OR MS Journal Ranking by SJR 1. Journal of Operations Management 2. Management Science 3. Omega 4. Operations Research 5. Transportation Research, Series B: Methodological 6. Computers and Operations Research 7. Manufacturing and Service Operations M

2016年后web开发趋势是什么?

2016 年后 Web开发趋势是什么 来源:yafeilee.me 发布时间:2016-05-06 阅读次数:1378 3 近二年的进展 前端发展日新月异, 甚至有一句戏言: "每六星期重写一个前端框架", 行业是像火箭一样, 但我们前端工程师该何去何从呢? 我们来谈谈这个问题. 先来看看最流行的几项技术栈: AngularJS 首创的双向数据绑定, 以及内置的模块注入, 以及组件化的支持, 种种优势, 使得它迅速发展起来. 在 2014-2015 年, 有调查显示, 在使用了前端框架

润乾集算报表的集算器数据集部署(2)

2.WEB端部署 集算报表在web端部署流程与一般J2EE应用部署流程基本一致,包括: 如果和已有应用集成,一般来说已有应用已经配置好了数据库连接池,因此第一.第二步骤可以省略,只需要后面几个步骤. 配置应用服务器的数据库连接池.发布报表应用这两个步骤在不同应用服务器中的操作界面和操作方法是有区别的,举例来说,发布报表应用这个步骤,在weblogic和websphere中一般是发布一个war包或者是ear包,而在tomcat中就是在server.xml或context.xml中配置,可以不打wa

带文字的ImageButton[自定义]

今天Android项目中遇到一个ImageButton控件上面要显示文字,无奈自定义了一个ImageButton,继承自ImageButton.其实就是override这个控件的onDraw(Canvas canvas)方法:代码如下: package sRoger.pack.Utility; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import

jQuery遍历json实例

在线调用jquery <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"