[翻译] 205 Unobtrusive JavaScript -

darkbaby123

浏览: 103305 次
性别:
来自: 武汉

最近访客更多访客>>

13号避难所专业外出打酱油人员

sdsbsdsbs

iceyanbin

chenying998179

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

[翻译] 205 Unobtrusive JavaScript

博客分类：

Ruby on Rails

JavaScript Rails jQuery Ajax HTML5

205 Unobtrusive JavaScript

查看英文原版

译者：darkbaby123

译者前言：

Unobtrusive JavaScript这个词在国内叫法不一，我也不知道如何翻译比较贴切，索性就直接采用英文了。一来避免造成误解，二来在大家Google或Wikipedia中也好查。

Unobtrusive JavaScript并不是Rails的概念，它只是合理组织JavaScript代码的一种方式。Rails 3只是使用这个方式优化自己生成的客户端代码而已。

这一集中我们将看看一个Rails 3的新特性：如何使用Unobtrusive JavaScript。Unobtrusive JavaScript是一种将web应用程序的行为和内容（或结构）分离的技术。就像CSS让我们可以分离表现和内容一样。这次我们就要讲述Rails 3是如何利用Unobtrusive JavaScript的，但在此之前，先看一个简单的例子。

下图是一个网页，当我们点击 Click Here 链接时，会用JavaScript弹出一个提示框显示"Hello World!"。

这个页面的HTML大概是这样：

<!DOCTYPE html>  
<html>  
  <head>  
    <title>UJS Example</title>  
  </head>  
  <body>  
    <h1><a href="#" onclick="alert('Hello world!'); return false;">Click Here</a></h1>  
  </body>  
</html>

在这个页面中有一个链接，它的onclick属性中含有一些JavaScript代码。把JavaScript内联在HTML标签中是一件很坏的事情，因为我们把结构和行为混合在一起了。回顾1990年，那时我们经常用font标签设置文本的字体、字号和颜色，因为当时还没有CSS。这意味着，如果我们需要改变网站的所有文字的字体，可能就要改动上数以百计的地方。直到CSS出现后，我们可以把样式提取出来，放到样式表中去。这使网站更加易于维护。

同样的道理也适用于JavaScript。把小段的JavaScript代码放到HTML标签的属性中，这样做混淆了焦点并使网站难以更新。将JavaScript放到单独文件中，降低了代码重复，便于重构，而且有利于编写和调试复杂的web应用程序。

那么怎么让这个简单例子中的JavaScript不再恼人呢？一个主要改动就是将内联的JavaScript放到单独的文件中，然后用一个JavaScript框架（这里用jQuery），将脚本挂到元素的事件上。下面就是我们改动后的页面。

<!DOCTYPE html>  
<html>  
  <head>  
    <title>UJS Example</title>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="UTF-8"></script>  
    <script type="text/javascript"charset="UTF-8">  
      $(function () {  
        $('#alert').click(function () {  
          alert('Hello, world!');  
          return false;  
        })  
      });  
    </script>  
  </head>  
  <body>  
    <h1><a href="#" id="alert">Click Here</a></h1>  
  </body>  
</html>

首先要声明的是，我们并没有把JavaScript放到单独的文件中，这只是为了更好地展示代码的改动。

对于body部分的链接，我们移除了 onclick 属性并加上了 id ，这样就可以用jQuery去找到该链接。在head部分，我们加上了jQuery库的引用，下面是一段JavaScript代码（这段代码本应放到单独的文件中）。在这段代码的开始，我们调用了jQuery的 $ 方法并以一个函数作为参数。这个函数会在页面的DOM加载时调用。在这个函数中，我们用jQuery的id选择器找到链接，然后给它的onclick事件绑定一个函数，这个函数用alert弹出"Hello World!"提示框，最后返回false来避免触发该链接默认的行为。

当我们刷新页面后，我们看到这个新页面和原来有着一样的效果（点击链接，弹出"Hello World!"）。

看起来我们做了更多工作，却没有什么明显效果。但这个简单的例子并没有充分展示出Unobtrusive JavaScript的优势，因为这个页面只有一处内联的JavaScript。而且这个例子不是为了检验Unobtrusive JavaScript的优点，只是演示整个过程是如何完成，和如何比较的。只有页面中有大量的JavaScript时，Unobtrusive JavaScript的优势才会显现出来。

目前这种做法有个问题，就是JavaScript经常被写到静态的文件中，然后被关联进页面。那么我们如何将服务端的动态内容放到JavaScript中去，而不使用内联的做法呢？

在HTML5中，我们可以使用动态的数据属性（data attribute）来存储一个元素的相关数据。这个动态属性和其他的元素属性一样，只是属性名要以 data- 开头。为了存储我们点击链接弹出的提示信息，我们把链接改写成如下形式：

<a href="#" id="alert" data-message="Hello from UJS">Click Here</a>

在JavaScript中，我们改写代码，从链接的新属性中取出信息然后用alert提示。

译者注：data attribute是HTML5的新特性之一，用于给一个元素存储数据信息。HTML5也提供了对应的JavaScript接口来访问这些数据属性。以下面的代码为例，获取链接的data-message属性还可以用this.dataset.message。但目前似乎没有浏览器支持这种语法……所以，目前只能用传统的getAttribute方法获取自定义属性。至于把自定义属性以 data- 开头的唯一作用，就是让HTML文档可以通过W3C的HTML 5标准检验。

$(function () {  
  $('#alert').click(function () {  
    alert(this.getAttribute('data-message'));  
    return false;  
   })  
});

现在我们刷新页面，就可以看到存储在数据属性中的提示信息。

Rails 3 如何使用数据属性

Rails 3 用它的方式去利用这些自定义的数据属性来将值传给Unobtrusive JavaScript。现在我们来看看一个Rails 3应用程序怎么去应用它们。我们的web应用程序是一个电子商务网站，用户可以在上面查询产品信息。每个产品都有相应的edit和destroy链接。但当我们点击destroy链接时，却发现它似乎并没有正常工作。

这对于Rails 3应用程序是一个很普遍的问题。如果你刚建立一个新的应用程序，或者把一个应用程序从旧版本的Rails中迁移上来，你就会发现一些使用了JavaScript的部分无法工作了。

下面是视图中用来生成Destroy链接的代码。它就是一个普通的 link_to 方法，有一个 :confirm 参数用来控制JavaScript的 confirm 弹出框的提示信息。还有一个 :method 参数被设置为 delete ，这样请求就会以delete方式而不是get方式提交。

# /app/views/products/show.html.erb
<%= link_to "Destroy", @product, :confirm => "Are you sure?", :method => :delete %>

有趣的是它生成的HTML源代码：

<a href="/products/8" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a>

在Rails 2中，使用 link_to 生成destroy链接会生成一堆内联JavaScript代码，它用来创建 confirm 对话框，还会生成一个form去模拟delete请求。相比之下，Rails 3创建的代码更加的简洁，而且使用到了我们之前所讲的HTML5数据属性。其中 data-confirm 用来存放确认信息，data-method用来存放请求方式。

这个destroy链接没有工作的原因就是没有在页面的head部分引入相应的JavaScript文件。所以这个链接就会像正常的链接那样发起get请求，因为没有人告诉它该做什么。

为了修复这个问题，我们layout的head部分加入以下两行代码：

<%= javascript_include_tag :defaults %>  
<%= csrf_meta_tag %>

第一行代码很眼熟，它会加载Rails应用程序的基本JavaScript文件。第二行代码会创建两个meta标签来存放authenticity token。它会在delete请求中用到。如果我们刷新页面后看看源代码，就会看到这两行代码生成的HTML。

译者注：注意多出来的一个脚本rails.js。Rails 3 的Unobtrusive JavaScript就存放在这里

<script src="/javascripts/prototype.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/effects.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/dragdrop.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/controls.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/rails.js?1268677667" type="text/javascript"></script>  
<script src="/javascripts/application.js?1268677667" type="text/javascript"></script>  
<meta name="csrf-param" content="authenticity_token"/>  
<meta name="csrf-token" content="9ImdFvbeW7ih9oKqBDQ3O889q/hJ1q5uajpT4DFDAoA="/>

现在我们有了应用程序所需的所有JavaScript文件和两个meta标签。这两个meta标签用来防止跨站点的伪造请求，确保put和delete请求来自正确的用户，而不是来自其他站点或黑客。

现在有了这两行代码，我们的destroy链接就可以正常工作了。

为查询表单提供AJAX支持

下面我们要修改index页面中负责查询的form，使它用AJAX发起请求而不是直接发起get请求。index视图的form代码如下：

<% title "Products" %>  
  
<% form_tag products_path, :method => :get do %>  
  <p>  
    <%= text_field_tag :search, params[:search] %>  
    <%= submit_tag "Search", :name => nil %>  
  </p>  
<% end %>  
  
<div id="products">  
  <%= render @products %>  
</div>  
  
<p><%= link_to "New Product", new_product_path %></p>

这里的form使用了我们在第37集中讲到的技术。在旧版本的Rails中，如果我们要让form以AJAX方式提交，就要用 form_remote_tag 来代替 form_tag 。这个方法会生成大量的内联JavaScript，而这种情况正是我们一直想避免的。

因此，旧版本中很多remote版的helper方法都被移出了Rails 3。如果你还想使用这些旧方法，可以安装 Prototype Legacy Helper 这个插件来代替Rails 3的新方式（Unobtrusive JavaScript）。我们下面会讲到这种新的做法。

现在我们继续使用 form_tag ，而不是 form_remote_tag 。但给它加一个新参数 :remote 。

# /app/views/products/index.html.erb
<% form_tag products_path, :method => :get, :remote => true do %>  
  <p>  
    <%= text_field_tag :search, params[:search] %>  
    <%= submit_tag "Search", :name => nil %>  
  </p>  
<% end

这个 :remote 参数也可以用在其他helper方法中，如 link_to ，button_to ，form_for 。如果我们刷新页面然后查看源码，可以看到新的form代码如下所示：

<form action="/products" data-remote="true" method="get">  <p>  
    <input id="search" name="search" type="text" />  
    <input type="submit" value="Search" />  
  </p>  
</form>

新的form标签和没使用 :remote 参数之前的版本没什么区别，只是加了一个 data-remote 属性。这足以告诉 rails.js 文件中的JavaScript，让form以AJAX的方式提交。

客户端的改造完成了，下面我们要写服务端代码来响应AJAX请求。产品列表都包含在一个 id 为products的 div 中，所以我们可以更新这个div的内容来显示查询出来的产品。form的提交请求将由 ProductsController 的 index 方法处理。我们现在要做的就是添加一个新的视图 index.js.erb 来处理js请求。

我们可以在这个视图中按自己的喜好写JavaScript，然后它会在客户端执行。这个新视图中的JavaScript代码用来更新 div 中的产品信息。

# /app/views/products/index.js.erb
$("products").update("<%= escape_javascript(render(@products)) %>");

现在我们刷新页面然后查询一次，可以看到它已经变成了AJAX请求，而且页面的URL没有发生变化。

总而言之，通过使用 :remote 参数和执行服务端返回的JavaScript代码。Rails 3可以很容易地做到Unobtrusive JavaScript方式的AJAX。

切换JavaScript框架

我们最后加一点花絮，演示一下如何切换我们的应用程序使用的JavaScript框架。我们目前的程序默认使用Rails自带的Prototype，但如果我们要换成jQuery该怎么办呢？

首先我们要把application layout中的这段代码

# /app/views/layouts/application.html.erb
<%= javascript_include_tag :defaults %>

换成

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "jquery.rails.js" %>

第一个文件是我们从google上获取的jQuery最新版，但这样还不够，因为我们还需要为 rails.js 找一个jQuery替代版本。它负责存放和Rails相关的 Unobtrusive JavaScript 代码。你可以在 jquery-ujs project on Github 找到官方版本。这个项目包含了我们所需的 rails.js 文件。我们把它下载到 public/javascripts 目录然后将它改名为 jquery.rails.js 。这就是我们的第二个文件。

现在我们需要把原来写过的Prototype代码改成jQuery版的。我们需要对之前创建的 index.js.erb 做两处改动。用 #products 选择器替换原先的 product ，然后把 update 方法换成jQuery中的 html 方法。

# /app/views/products/index.js.erb
$("#products").html("<%= escape_javascript(render(@products)) %>");

现在，我们的程序还是和以前一样正常工作，只是底层框架已经换成了jQuery。

优雅的降级

如果用户使用禁用了JavaScript的浏览器访问我们的网站，查询form就会自动降级成使用get请求发起提交。但destroy链接就无法是使用了。因为链接只能使用get请求，而Rails是使用JavaScript来模拟delete请求的。一个解决办法就是使用 button_to 生成的按钮来代替链接。但按钮实在看起来太丑了。如果我们想继续使用链接，一个更好的办法是使用第77集所讲的技术，在删除之前显示一个单独的确认页面。