40、RJS模板：提升Web应用交互性的利器

RJS模板：提升Web应用交互性的利器

一、RJS模板概述

在Web开发中，为了让应用更具交互性，我们常常会使用AJAX技术。RJS模板就是一种能让XHR（XMLHttpRequest）调用返回JavaScript代码在浏览器执行的强大技术。它是存放在 app/views 层级下、扩展名为 .rjs 的文件，包含能向浏览器发送JavaScript命令的代码。当接收到动作请求时，调度器会优先查找匹配的 .rjs 模板（如果请求来自XHR），解析模板、生成JavaScript并返回给浏览器执行。

RJS模板的优势显著，它能为多个页面提供标准的交互行为，还能减少页面中自定义JavaScript代码的嵌入量。其主要使用模式之一是通过单个动作引发多个客户端效果。

下面以拖放待办事项为例，说明RJS模板的应用场景。当用户将待办事项从一个列表拖到另一个列表时，事项的ID会发送到服务器。服务器需要重新分类该事项，即从原列表移除并添加到新列表，这就要求服务器更新视图中的两个列表。但服务器在一次请求中只能返回一个响应，此时有以下几种处理方式：
1. 结构优化 ：将两个放置目标包含在一个更大的元素中，更新时更新整个父元素。
2. 数据解析 ：返回结构化数据给复杂的客户端JavaScript函数，该函数解析数据并分配到两个放置目标。
3. RJS调用 ：使用RJS在客户端执行多个JavaScript调用，分别更新每个放置目标并重置新列表的排序功能。

以下是服务器端 todo_pending 和 todo_completed 方法的代码：

def todo_completed
  update_todo_completed_date Time.now
end

def todo_pending
  update_todo_completed_date nil
end

private
def update_todo_completed_date(newval)
  @user = User.find(params[:id])
  @todo = @user.todos.find(params[:todo])
  @todo.completed = newval
  @todo.save!
  @completed_todos = @user.completed_todos
  @pending_todos = @user.pending_todos
  render :update do |page|
    page.replace_html 'pending_todos', :partial => 'pending_todos'
    page.replace_html 'completed_todos', :partial => 'completed_todos'
    page.sortable "pending_todo_list",
      :url=>{:action=>:sort_pending_todos, :id=>@user}
  end
end

在执行完常见的CRUD操作后， render :update do |page| 部分会生成一个 JavaScriptGenerator 实例，用于创建返回给浏览器的代码。这里进行了三个调用：两个用于更新页面上的放置目标列表，一个用于重置待办事项列表的排序功能。

二、RJS辅助方法分类

RJS提供了多种辅助方法，以下是详细介绍：
1. 编辑数据
- replace_html ：仅替换元素内的数据，将指定元素的 innerHTML 属性设置为渲染后的文本。
- replace ：替换整个元素（包括标签），先删除原元素，再插入渲染后的文本。
示例代码如下：
ruby def edit_user @user = User.find(params[:id]) if @user.update_attributes(params[:user]) render :update do |page| page.replace_html "user_#{@user.id}", :partial => "_user" end else render :action => 'edit' end end
2. 插入数据
使用 insert_html 方法插入数据，该方法接受三个参数：插入位置、目标元素的ID和渲染插入文本的选项。插入位置可以是 :before 、 :top 、 :bottom 和 :after 。
示例如下：

def add_todo
  todo = Todo.new(params[:todo])
  if todo.save
    render :update do |page|
      page.insert_html :bottom, 'todo_list', "<li>#{todo.name}</li>"
    end
  end
end

3. 显示/隐藏数据
   • show ：显示指定ID的元素。
   • hide ：隐藏指定ID的元素。
   • toggle ：切换指定ID元素的可见性。
   • remove ：从页面中完全删除指定元素。
     示例代码：

def add_todo
  todo = Todo.new(params[:todo])
  if todo.save
    render :update do |page|
      page.insert_html :bottom, 'todo_list', "<li>#{todo.name}</li>"
      page.replace_html 'flash_notice', "Todo added: #{todo.name}"
      page.show 'flash_notice'
    end
  end
end

def delete_todo
  if Todo.destroy(params[:id])
    render :update do |page|
      page.remove "todo_#{params[:id]}"
    end
  end
end

4. 选择元素
   • [] 语法 ：通过ID查找元素，返回底层元素的代理，可调用其方法，功能等同于客户端的 Prototype $ 方法。
   • select ：选择使用某些CSS类的所有元素，返回包含这些元素的数组，可直接操作数组或传入块进行迭代处理。
     示例代码：

def add_todo
  todo = Todo.new(params[:todo])
  if todo.save
    render :update do |page|
      page.insert_html :bottom, 'todo_list', "<li>#{todo.name}</li>"
      page['flash_notice'].update("Added todo: #{todo.name}").show
    end
  end
end

5. 直接JavaScript交互
   • << 方法 ：将提供的值追加到响应中，与其他响应一起立即求值。若提供的字符串不是可执行的JavaScript，用户将看到RJS错误对话框。
   • call 方法 ：调用现有的JavaScript函数，接受函数名和可选的参数数组。
   • assign 方法 ：为变量赋值，接受变量名和要赋的值。
   • alert 方法 ：调用JavaScript的 alert 函数，显示消息。
   • redirect_to 方法 ：将URL赋值给 window.location.href 。
   • delay 方法 ：创建浏览器计时器，暂停或延迟脚本执行，接受暂停的秒数和要执行的块。
     示例代码：

render :update do |page|
  page << "cur_todo = #{todo.id};"
  page << "show_todo(#{todo.id});"
end

render :update do |page|
  page.assign 'cur_todo', todo.id
  page.call 'show_todo', todo.id
end

def add_todo
  todo = Todo.new(params[:todo])
  if todo.save
    render :update do |page|
      page.insert_html :bottom, 'todo_list', "<li>#{todo.name}</li>"
      page.replace_html 'flash_notice', "Todo added: #{todo.name}"
      page.show 'flash_notice'
      page.delay(3) do
        page.replace_html 'flash_notice', ''
        page.hide 'flash_notice'
      end
    end
  end
end

6. Script.aculo.us辅助方法
   RJS还为 Script.aculo.us 的大部分功能提供支持，最常用的是 visual_effect 方法，它是 Script.aculo.us 不同视觉效果的简单包装，接受视觉效果名称、要执行效果的DOM元素ID和标准效果选项的哈希。
   示例代码：

def add_todo
  todo = Todo.new(params[:todo])
  if todo.save
    render :update do |page|
      page.insert_html :bottom, 'todo_list', "<li>#{todo.name}</li>"
      page.replace_html 'flash_notice', "Todo added: #{todo.name}"
      page.show 'flash_notice'
      page.visual_effect :pulsate, 'flash_notice'
      page.delay(3) do
        page.replace_html 'flash_notice', ''
        page.visual_effect :fade, 'flash_notice'
      end
    end
  end
end

此外，还可以使用 sortable 方法创建可排序列表， draggable 方法创建可移动元素， drop_receiving 方法创建放置目标元素。

三、总结

AJAX技术让Web应用更具交互性，Rails在开发流程中很好地集成了AJAX。使用Rails辅助方法能隐藏大部分JavaScript代码，但了解其背后的实际操作也很重要。在使用AJAX时，要以用户利益为出发点，遵循“不造成伤害”的原则，在能改善用户体验的地方合理使用，这样才能让基于Rails的AJAX应用发挥出最佳效果。

四、流程图

graph LR
    A[用户操作] --> B{请求类型}
    B -- XHR请求 --> C[调度器查找.rjs模板]
    C --> D[解析模板生成JavaScript]
    D --> E[返回JavaScript到浏览器执行]
    B -- 非XHR请求 --> F[调度器查找.rhtml模板]
    F --> G[返回HTML到浏览器]

五、表格

辅助方法	功能	参数
replace_html	替换元素内的数据	元素ID、渲染选项哈希
replace	替换整个元素	元素ID、渲染选项哈希
insert_html	插入数据	插入位置、目标元素ID、渲染选项
show	显示元素	元素ID或ID数组
hide	隐藏元素	元素ID或ID数组
toggle	切换元素可见性	元素ID或ID数组
remove	删除元素	元素ID或ID数组
[]	通过ID查找元素	元素ID
select	选择使用CSS类的元素	CSS类名
<<	追加JavaScript代码	代码字符串
call	调用JavaScript函数	函数名、可选参数数组
assign	为变量赋值	变量名、值
alert	显示JavaScript警告框	消息
redirect_to	重定向URL	URL
delay	延迟执行脚本	秒数、执行块
visual_effect	应用视觉效果	效果名称、元素ID、效果选项哈希
sortable	创建可排序列表	列表ID、选项哈希
draggable	创建可移动元素	元素ID、选项哈希
drop_receiving	创建放置目标元素	元素ID、选项哈希

RJS模板：提升Web应用交互性的利器

六、RJS模板使用注意事项

在使用RJS模板时，有一些关键的注意事项需要牢记，以确保应用的稳定性和性能。
1. JavaScript执行环境 ：由于RJS模板返回的是JavaScript代码，这些代码需要在浏览器中正确执行。因此，要确保页面中已经正确引入了所需的JavaScript库，如Prototype和Script.aculo.us等。如果缺少这些库，代码将无法正常运行，可能会导致页面出现错误或无法实现预期的交互效果。
2. 错误处理 ：RJS模板生成的JavaScript代码通常会被包裹在 try/catch 块中，这是为了在客户端出现错误时能够捕获并尝试描述问题。但在实际开发中，我们也应该尽量避免出现错误。在编写RJS代码时，要仔细检查语法和逻辑，确保生成的JavaScript代码是有效的。同时，对于可能出现的异常情况，要进行适当的处理，避免给用户带来不好的体验。
3. 性能优化 ：虽然RJS模板可以方便地实现页面的动态更新，但如果使用不当，可能会影响页面的性能。例如，频繁地进行大量的DOM操作会导致页面响应变慢。因此，在使用RJS模板时，要尽量减少不必要的DOM操作，合理安排代码的执行顺序，提高代码的执行效率。

七、实际应用案例分析

为了更好地理解RJS模板的实际应用，下面通过一个具体的案例进行分析。

假设我们正在开发一个任务管理系统，用户可以在不同的任务列表之间拖放任务，并且可以对任务进行完成和未完成的标记。我们可以使用RJS模板来实现这些交互功能。

1. 拖放任务功能
   当用户将一个任务从一个列表拖到另一个列表时，任务的ID会被发送到服务器。服务器接收到请求后，会更新任务的分类，并使用RJS模板更新页面上的任务列表。

# 服务器端代码
def move_task
  task = Task.find(params[:task_id])
  new_list_id = params[:new_list_id]
  task.list_id = new_list_id
  task.save!

  render :update do |page|
    page.replace_html "list_#{task.list_id}", :partial => "tasks/list_#{task.list_id}"
    page.replace_html "list_#{new_list_id}", :partial => "tasks/list_#{new_list_id}"
    page.sortable "list_#{new_list_id}", :url => {:action => :sort_tasks, :list_id => new_list_id}
  end
end

在这个例子中，服务器更新了任务的列表ID，并使用 replace_html 方法更新了原列表和新列表的内容。同时，使用 sortable 方法重置了新列表的排序功能。

2. 标记任务完成功能
   当用户标记一个任务为已完成或未完成时，服务器会更新任务的完成状态，并使用RJS模板更新页面上的任务列表。

# 服务器端代码
def mark_task_completed
  task = Task.find(params[:task_id])
  task.completed = true
  task.save!

  render :update do |page|
    page.replace_html "pending_tasks", :partial => "tasks/pending_tasks"
    page.replace_html "completed_tasks", :partial => "tasks/completed_tasks"
  end
end

def mark_task_pending
  task = Task.find(params[:task_id])
  task.completed = false
  task.save!

  render :update do |page|
    page.replace_html "pending_tasks", :partial => "tasks/pending_tasks"
    page.replace_html "completed_tasks", :partial => "tasks/completed_tasks"
  end
end

在这个例子中，服务器更新了任务的完成状态，并使用 replace_html 方法更新了待办任务列表和已完成任务列表的内容。

八、总结与展望

RJS模板为Web应用的开发提供了一种强大的方式来实现动态交互效果。通过返回JavaScript代码到浏览器执行，我们可以在不刷新整个页面的情况下更新部分内容，提高用户体验。同时，RJS模板提供了丰富的辅助方法，如编辑数据、插入数据、显示/隐藏数据等，使得开发人员可以更加方便地实现各种交互功能。

然而，随着Web技术的不断发展，前端框架如React、Vue.js等逐渐流行起来，它们提供了更加高效和灵活的方式来构建交互式Web应用。虽然RJS模板在Rails开发中仍然有其独特的优势，但在未来的开发中，我们可能需要根据项目的需求和特点，综合考虑使用不同的技术来实现最佳的效果。

九、流程图

graph LR
    A[用户拖放任务] --> B[发送任务ID到服务器]
    B --> C{任务分类更新}
    C -- 成功 --> D[生成RJS模板代码]
    D --> E[返回JavaScript到浏览器]
    E --> F[更新页面任务列表]
    C -- 失败 --> G[显示错误信息]

十、表格

功能	服务器端操作	RJS模板操作
拖放任务	更新任务列表ID	替换原列表和新列表内容、重置新列表排序功能
标记任务完成	更新任务完成状态	替换待办任务列表和已完成任务列表内容
标记任务未完成	更新任务完成状态	替换待办任务列表和已完成任务列表内容