Ruby on Rails中jquery_ujs组件拖慢速度的问题解决

所属分类: 脚本专栏 / ruby专题 阅读数: 1878
收藏 0 赞 0 分享

jquery_ujs 对 rails 来说,是一个非常重要的组件,它包含在 rails 的默认组件之中。

jquery ujs 包含一些非常便捷的功能,比如确认对话框、触发 ajax、自动禁用表单提交按钮等,本文主要讨论的是触发 ajax 的功能。

通过添加简单的标签属性,jquery ujs 可以把一个普通的链接或者表单转换成 ajax 提交,而不需要写 JavaScript 代码。

<%= link_to '关闭项目', close_project_path(project), remote: true, method: :post %>

上面的代码会生成如下的代码

<a href="/projects/1/close" data-remote="true" data-method="post">关闭项目</a>

当用户点击后,它会触发一个指向地址 /projects/1/close,method 为 post 的 ajax 请求,而不是 get 的 普通请求,这样使得实现 ajax 调用变得非常便捷。

网速慢导致的问题
事情并不都是美好的,在网速比较慢的时候,jquery ujs 的这个实现会出问题,如果文档还没有加载完成,用户就点击了链接,页面会发起一个到链接地址的 GET 请求,页面会跳转,但指向该地址的 GET 请求可以并不存在,这样就会出错。

有用户有提过一个相关的 Issue,但是开发者并没有受理,然而网速慢是中国的国情,问题我们还是得处理,借助于 CSS3 的一些特性,这个问题其实也不难解决。

pointer-events
pointer-events: none;

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

这个属性可以禁止元素的点击事件,因为一般 CSS 是先加载的,我们只要控制在页面加载完成之前给 jquery ujs 相关的元素应用 pointer-events: none; 样式,在页面加载完成后再去除该样式,就可以解决网速慢的情况下,页面没有加载完成时用户点击 rmote 链接导致的错误了。

解决方案
添加如下的全局样式,默认情况下含有 data-remote 和 data-method 属性的标签不可点击,除非 body 元素含有名为 ready 的 css class。

[data-remote], [data-method] {
 pointer-events: none;

 button, input[type=submit] {
  pointer-events: none;
 }
}

body.ready {
 [data-remote], [data-method] {
  pointer-events: auto;

  button, input[type=submit] {
   pointer-events: auto;
  }
 }
}

然后通过段简单的脚本让页面加载后给 body 元素添加 ready class

$(document).ready ->
 $('body').addClass('ready')

于是,问题轻松的就解决了。

更多精彩内容其他人还在看

简要解读Ruby面向对象编程中的作用域

作用域在面向对象编程中是一个十分重要的概念,程序构建时必须要理解清楚类和方法以及对象的作用范围,接下来就为大家简要解读Ruby面向对象编程中的作用域
收藏 0 赞 0 分享

详解Ruby中的instance_eval方法及其与class_eval的对比

Ruby的eval族方法将字符串作为代码来执行,instance_eval方法便是其中之一,下面就来详解Ruby中的instance_eval方法及其与class_eval的对比
收藏 0 赞 0 分享

Ruby程序中正则表达式的基本使用教程

和Python与Perl一样,Ruby对正则表达式的支持也是相当好的,这里送出整理的Ruby程序中正则表达式的基本使用教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Ruby on Rails所构建的应用程序基本目录结构总结

Ruby on Rails是Ruby世界中一家独大的Web开发框架,要掌握Rails程序的构建,对其目录结构的了解十分必要,下面就来看一下Ruby on Rails所构建的应用程序基本目录结构总结
收藏 0 赞 0 分享

Ruby中的gem包管理的使用及gem源搭建教程

RubyGems是Ruby世界中的包管理工具,gem命令使用起来就如同Linux中的apt与yum一样,也可以构建自己的gem源,下面就带大家一起来学习Ruby中的gem包管理的使用及gem源搭建教程
收藏 0 赞 0 分享

Linux下Redis数据库的安装方法与自动启动脚本分享

这篇文章主要介绍了Linux下Redis数据库的安装方法与自动启动脚本分享,自动启动脚本分别针对CentOS和Ubuntu系统来给出了编写示例,需要的朋友可以参考下
收藏 0 赞 0 分享

Ruby与Ruby on Rails框架环境搭建的简明教程

这篇文章主要介绍了Ruby与Ruby on Rails框架环境搭建的简明教程,包括RubyGems的升级与OpenSSL的支持等配置,需要的朋友可以参考下
收藏 0 赞 0 分享

Ruby编写HTML脚本替换小程序的实例分享

这篇文章主要介绍了Ruby编写HTML脚本替换小程序的实例分享,单纯使用Ruby中的字符串替换方法而没有涉及更复杂的正则表达式,需要的朋友可以参考下
收藏 0 赞 0 分享

详解Ruby中的代码块对象Proc

在Ruby中一个代码块block不是对象,但可以用Proc来替代其作为对象进行操作,接下来我们就来详解Ruby中的代码块对象Proc
收藏 0 赞 0 分享

Ruby中的Proc类及Proc的类方法Proc.new的使用解析

用Proc类可以用Proc.new来创建一个Proc类,进而来操作块,这里我们就来进行Ruby中的Proc类及Proc的类方法Proc.new的使用解析.
收藏 0 赞 0 分享
查看更多