35、使用 jQuery 精简代码、提升效率

使用 jQuery 精简代码、提升效率

1. jQuery 替代 RJS

早期的 Rails 与 JavaScript 库发展同步，当时人们对不同 JavaScript 库没有明显偏好，Rails 选择了一个合适的库并使其正常工作。如今，很多人有了自己的偏好，jQuery 就是替代 Prototype 的热门选择之一。

以下是之前创建的 RJS 文件示例：

# Download depot_u/app/views/line_items/create.js.rjs
page.select("#notice").each { |notice| notice.hide }
page.replace_html('cart', render(@cart))
page[:cart].visual_effect :blind_down if @cart.total_items == 1
page[:current_item].visual_effect :highlight,
  :startcolor => "#88ff88",
  :endcolor => "#114411"

现在我们移除这个 RJS 文件：

$ rm app/views/line_items/create.js.rjs

并使用 jQuery 替代，以下是替代后的文件：

// Download depot_v/app/views/line_items/create.js.erb
$("#notice").hide();
if ($('#cart tr').length == 1) { $('#cart').show('blind', 1000); }
$('#cart').html("<%= escape_javascript(render(@cart)) %>");
$('#current_item').css({'background-color':'#88ff88'}).
  animate({'background-color':'#114411'}, 1000);

对比这两个文件，我们可以发现它们有很多相似之处，都实现了隐藏 #notice 、替换购物车 HTML、展开当前项以及颜色渐变动画等功能。但也存在一些关键差异：
- 语言不同 ： .js.rjs 文件使用 Ruby 语句，而 .js.erb 文件使用 JavaScript。
- 执行位置不同 ：RJS 文件在服务器端执行，可访问数据库模型；而 jQuery 文件除了 <% 和 %> 标记内的代码在服务器执行外，其余都在客户端执行，可访问浏览器的文档对象模型（DOM）。这也导致了语句顺序的小变化，在渲染前检查购物车的长度。

2. 布局文件的修改

布局文件中也有一处使用了 Prototype 方法，需要进行修改：

<!-- Download depot_v/app/views/layouts/application.html.erb -->
<!-- ... -->
<div id="banner">
  <%= form_tag store_path, :class => 'locale' do %>
    <%= select_tag 'set_locale',
      options_for_select(LANGUAGES, I18n.locale.to_s),
      :onchange => 'this.form.submit()' %>
    <%= submit_tag 'submit' %>
    <%= javascript_tag "$('.locale input').hide()" %>
  <% end %>
  <%= image_tag("logo.png") %>
  <%= @page_title || t('.title') %>
</div>
<!-- ... -->

3. 下载 jQuery 库并移除 Prototype 库

与 Haml 不同，使用 jQuery 需要额外下载 jQuery 库并移除不再需要的 Prototype 库。 jquery-rails 提供了一个 Rails 生成器来处理这些步骤，我们只需执行以下命令：

rails generate jquery:install --ui --force

执行该命令后，会有如下操作：
| 操作 | 文件 |
| ---- | ---- |
| remove | public/javascripts/controls.js |
| remove | public/javascripts/dragdrop.js |
| remove | public/javascripts/effects.js |
| remove | public/javascripts/prototype.js |
| fetching | jQuery (1.4.3) |
| create | public/javascripts/jquery.js |
| create | public/javascripts/jquery.min.js |
| fetching | jQuery UI (latest 1.x release) |
| create | public/javascripts/jquery-ui.js |
| create | public/javascripts/jquery-ui.min.js |
| fetching | jQuery UJS adapter (github HEAD) |
| force | public/javascripts/rails.js |

--ui 参数用于获取 jQuery UI 库， --force 选项会替换 rails.js 文件。

4. 运行应用和测试问题

完成上述操作后，我们可以运行应用，表面上看没有差异。不过，运行功能测试时会出现问题：

Started .........F............................
Finished in 1.49875 seconds.
1) Failure:
test_should_create_line_item_via_ajax(LineItemsControllerTest)
[/test/functional/line_items_controller_test.rb:65]:
No RJS statement that replaces or inserts HTML content.
46 tests, 76 assertions, 1 failures, 0 errors

这是因为我们不再使用 RJS，解决方法是将 assert_select_rjs 替换为 assert_select_jquery ，并适当调整参数：

# Download depot_v/test/functional/line_items_controller_test.rb
test "should create line_item via ajax" do
  assert_difference('LineItem.count') do
    xhr :post, :create, :product_id => products(:ruby).id
  end
  assert_response :success
  assert_select_jquery :html, '#cart' do
    assert_select 'tr#current_item td', /Programming Ruby 1.9/
  end
end

5. 在 RailsPlugins.org 上寻找更多插件

目前我们已经了解了四个插件，在 RailsPlugins.org 上可以找到更多，当前该网站包含 500 多个插件，大部分适用于 Rails 3。以下是按类别划分的一些插件：
- 核心功能外移插件 ：如 classic_pagination ，分页原本是 Rails 的核心功能，后来移到了该插件，不过现在基本被 will_paginate 替代； acts_as_tree 作为插件发展良好； rails_xss 从未来版本的 Rails 中移植关键功能以帮助迁移。
- 实现通用逻辑和界面的插件 ： devise 和 authlogic 实现用户认证和会话管理，建议直接使用这些插件，节省开发时间。
- 替换 Rails 大部分功能的插件 ： datamapper 替换 ActiveRecord； cucumber 、 rspec 和 webrat 可单独或一起使用，用简单的测试故事、规范和浏览器模拟替换测试脚本。
- 错误监控插件 ： hoptoad_notifier 和 exception_notification 可帮助监控部署服务器中的错误。

总之，插件几乎可以实现任何功能，你也可以创建自己的插件，更多信息可在 Rails 指南和文档中查找。

使用 jQuery 精简代码、提升效率

6. 回顾 Rails 相关概念及后续探索方向

Rails 涵盖了多个重要概念，以下为你详细梳理：
| 概念 | 说明 |
| ---- | ---- |
| 模型（Model） | 负责处理数据和业务逻辑，如 Active Record 用于数据库操作，包含创建、读取、更新和删除（CRUD）等方法，还支持数据验证、关联关系定义等功能。 |
| 视图（View） | 负责呈现数据给用户，有多种模板语言可供选择，如 ERB、Haml 等，还支持部分模板和布局，可通过辅助方法生成 HTML 内容。 |
| 控制器（Controller） | 作为模型和视图的桥梁，接收用户请求，调用模型处理数据，选择合适的视图呈现结果。具备过滤器、重定向、响应不同请求格式等功能。 |
| 配置（Configuration） | 通过配置文件对 Rails 应用进行各种设置，如数据库连接、缓存设置、日志级别等，遵循“约定优于配置”原则，减少不必要的配置。 |
| 测试（Testing） | 包含单元测试、功能测试、集成测试等，可确保代码质量和功能正确性。常用测试框架有 Test::Unit、RSpec 等。 |
| 部署（Deployment） | 将应用部署到生产环境，可使用 Capistrano 等工具实现自动化部署，还需考虑服务器配置、性能优化、监控等方面。 |

7. 进一步探索的建议

现在你已经掌握了 Rails 的基础知识，可以从以下几个方面深入探索：
- 官方网站 ：访问 Ruby on Rails 官方网站，这里有最新的文档、教程、博客文章和社区资源，能帮助你了解 Rails 的最新动态和发展方向。
- 社区贡献 ：积极参与 Rails 社区的讨论和贡献，如在论坛上分享经验、解决问题，为开源项目贡献代码等，这不仅能提升自己的技术水平，还能结识更多的开发者。
- 相关书籍 ：Pragmatic Bookshelf 有很多关于 Ruby 和 Rails 的书籍，涵盖了不同的主题和难度级别，可以根据自己的需求选择阅读。
- 实践项目 ：通过实际项目来巩固所学知识，尝试开发一些小型应用，逐步增加复杂度，遇到问题时查阅文档和社区资源解决。

以下是一个简单的流程图，展示了进一步探索 Rails 的步骤：

graph LR
    A[访问官方网站] --> B[学习最新文档和教程]
    B --> C[参与社区讨论和贡献]
    C --> D[阅读相关书籍]
    D --> E[实践项目]
    E --> F[持续学习和提升]

通过不断学习和实践，你将能够熟练掌握 Rails 开发，为构建高质量的 Web 应用打下坚实的基础。祝你在 Rails 的学习和开发之旅中取得成功！