Rails
英文原文：
Responsive JavaScript in Rails: load what you need when you need it
一年前我做了一个关于这个主题的演讲。我第一次关注这个技术是因为
@dhh发布的他们在
37signals使用的一些观点。我注意到他们
在模板视图里如何使用JavaScript，动态生成JavaScript这是它的关注点，这引起了我的思考。
与之前我们在前端加载全部javascript相比，为什么我们不加载最少量的JavaScript然后在用户界面需要的时候再加载额外的JavaScript代码呢？
我把这称为响应式的JavaScript，你听说过pjax这个
术语，或者
unobtrusive JavaScript，等等。目的是后端的JavaScript按前端动作加载。不管是GET、POST、DELETE等待，只要请求是ajax，响应将会是JavaScript而不是JSON。
你使用的一些产品中的一些实例或许已经使用这个
概念了。BCX、GitHub、Airbnb都以不同方式使用了这个概念。这一概念的问题在于它不绑定任何的库或框架，你必须使用目前的工具来它工作。庆幸，现在已经有了一个JavaScript库可以帮助你开始。jQuery-UJS可以让你添加
remote=”true” 到任何链接，这些链接会自动转换成一个Ajax调用。
首先，一个例子
class PostsController < ApplicationController
def index
@posts = Post.all
end
def show
@post = Post.find params[:id].to_i
respond_to do |format|
format.js
format.html
end
end
def create
#.. Create a post
respond_to do |format|
format.js
format.html
end
end
end
<!-- app/views/index.html.erb -->
<ul class="posts">
<%= @posts.each do |post| %>
<%= render_link_to_post(post) %>
<% end %>
</ul>
# app/views/create.js.erb
(function() {
var $post = $("<%= j render_link_to_post(@post) %>")
$post.hide().prependTo($("ul.posts")).fadeIn()
})()
# app/views/show.js.erb
(function() {
var $post = $("<%= j render("overview", post: @post) %>")
$post.dialog("open")
})()
<!-- app/views/show.html.erb -->
<div class="title">
<%= @post.title %>
</div>
<div class="body">
<%= @post.body %>
</div>
#helper.rb
def render_link_to_post(post)
link_to post.title, post_path(post), remote: true
end
在这个例子中，当有人点击链接，它将会调用/posts/:id。如果请求是AJAX，它将调用show.js.erb，执行模板里的代码。如果不是的话，它将调用show.html.erb。还有一个叫created.js.erb模板，当你通过Ajax表单创建一个资源时将被调用。表单被清理的尽可能简单。
URL帮你定位到bug
假设你点击链接时有一个bug，通过使用这种技术，你可以通过查看URL追溯起源。
举例：posts/:id与与位于app/views/posts/show.js.erb的JS模板相关联。
正如你在处理HTML视图时所期望的一样。
web页面有生命期
回顾一下上面的例子。当你用Ajax表单发布一条post，按预设列表将生成一个与该post对应的链接。看一下请求的方法：它和你调用/posts时相同，这不是一种偶然。当你使用这种方法时会试图避免代码重复，ajax除了不最终生成页面外与正常请求使用相同的组件。
这意味着，当你发布一个新post后，如果你刷新页面，将会显示相同的文章列表，因为它们使用了相同的机制。
复用相同的视图逻辑
这是一个以前的扩展。既然在服务器端已经生成了HTML，你可能会在视图里看到很多重复代码，使用助手类或修饰器来简化代码将不会是件难事。
因为所有映射都来自从同一个地方，HTML的修改也可以在同一个地方完成。比如，如果我想要将列表中的链接替换成一个更具描述性的，我可以修改render_link_to_post（一个坏的函数名，原谅我）的实施细则以适应变化。
JavaScript在动作间的传递 & 页面加载优化
现在，你的JavaScript在2个不同的地方加载：
- 由标签链接加载JavaScript。在页面加载时加载，运行时不能定制，JavaScript可以被预编译；
- 作为用户页面动作的响应加载。
对服务内容能更好的控制是这种方式的优点。如果你感觉解析代码较多时慢，你可以一些请求时的负载抽取到标签链接中加载。
当需要时加载需要的
由于网页在服务器端的渲染，所以响应最小化时你有很多可选的库，也许你可以试试jQuery、Zepto或其他什么的，但记住：JavaScript几乎从来（我不知道是不是每个都是）不在加载时渲染页面，加载完后才开始。
看看上面的例子。create.js.erb上有个问题，我可以用很好的功能和其他好东西来包装它，但如果人们从不发布post这有什么意义呢。
这需要你维持一个平衡。当有有些东西大量使用是（每用户每页使用超过一次），像你其他库一样用标签来加载它吧，其他的当HTML动作触发时再加载吧。
可重复的动作(调试目的)
你是否遇到过这种情况，当你调试应用的时候3~4个不同的动作都提示你的javascript代码里有bug？因为响应是独立的JavaScript代码，你只能将响应粘贴到控制台一步步捕捉异常。
我做了什么呢，我拿掉了挡在我和我正在使用变量间的障碍，这样，在控制台了我可以将bug缩小到变量层面。
清晰
客户端的JavaScript通常与通知或事件搭配使用，触发这些事件、收到服务器更新，这一切瞬间就绪。通常瞬间见效的事通常难以追踪。
当响应是JavaScript代码时结果就很容易理解了。看看上面的例子，我详细你能明白这两个Ajax响应的预期行为。
就是这样
这是我的选择，你可也可以有自己的选择。我希望你喜欢这篇文章且有了自己尝试一下的冲动。
如果你实现了，在twitter给我留言告诉我它是如何运行的！
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
