view中的bad smells:
1 N多的if else,甚至case语句
这是本文的重点,在最后着重讲(用block替代if else)。
2 直接调用model的find方法
对策:将find move到controller中,在view中使用controller传来的对象变量
3 对集合进行复杂的操作
对策:在将这些操作move到helper中,页面调用规整好的数据
<% items.sort_by{|item|[item.created_on,item.price]}.each do |item| %>
#so bad
<% end %>
===>
<% sorted_item.each do |item| %>
#so good
<% end %>
4 临时变量
将临时变量的代码段 move到helper中
<% rate_box_id = "rate_box_#{item.id}" %>
<% spinner_id = "spinner_#{item.id}" %>
<%= link_to_remote("rate it!",
:url => item_path(item),
:loading => "$('#{spinner_id}').show()",
:complete => "$('#{spinner_id}').hide();$('#{rate_box_id}').highLight();",
) %>
<%= image_tag('loading.gif', :id => spinner_id)%
==>
<% with_rate_for item do|spinner,spinner_id| %>
<% link_to_rate(item,:toggle=>spinner_id) %>
<% spinner %>
<% end %>
=========用block替代if else==============
1 如果集合为空,显示友好的信息
很多时候,如果取到的结果集合为空,需要显示用户另外的信息。当然一般我们会这么写:
if(@cart.empty)
您的购物车是空的
else
rend :parial=>'cart'
end
注意,这是在rhtml中写的。这个逻辑还是比较清晰的,但如果一个页面中有几处这种代码,你就得好好考虑一下重构了.
我们可以把集合为空的内容,提到block中,比如:
<%cart_content do%>
购物车是空的!+N长的rhtml代码
<%end%>
将if else都转移到helper中:
module CartHelper
def cart_content(&block)
return yield if cart_empty?
content=(render :partial => "shared/cart" ,:locals => {:cart => prepare_cart})
concat(content,block.binding)
end
end
2 面对不同的登陆用户,显示不同的内容
<%header :guest do %>
#略
<%end%>
<%header :logged_user do %>
#略
<%end%>
<%header :admin do %>
#略
<%end%>
helper中的方法
def header(who)
yield if logged_in? who
end
==========================总结================================
以上代码,都是一些例子,可能不太具有说服力。但在这里要强调的是,view层难测试,自解释差,难重用。在复杂度综合不便的情况下,我更倾向于helper复杂一些,view简单一些。更何况,一些公共的重复代码搬移以后,的确会达到DRY的目的,这是rails设计中是中贯彻的理念。
分享到:
- 2007-11-22 17:02
- 浏览 1000
- 评论(3)
- 论坛回复 / 浏览 (1 / 8399)
- 查看更多
相关推荐
专家关于网页重构的一些看法,还可以,内容不长,感兴趣的可以随便看看。
1. 重构前的一些缺点 1. 频道显示在VideoListActivity实现的,代码结构不够清晰 2. 频道页面需要根据不同频道目前存在矩阵式显示和列表式显示
企业官网的页面代码重构,包含首页,列表页,详情页....下载直接可用于学习或教学,主要使用HTML和CSS,静态页面未添加javascript代码。
页面重构中的设计模式,css开发真心不容易啊,写好css更不容易啊,希望有人喜欢吧,上传了再说。
html与css网易严选重构页面.zip
基于vue的单页面项目,后期会对fetch那块重构
用div css重构的网页 但是不是很好 因为没有原网页。。。
为什么进行HTML重构? HTML重构的目标(What Refactor To) ? 面对质疑:还要重构么? 战术篇 战术篇 工具篇 版本管理工具Version Control 页面验证工具Validators 测试工具 正则表达式工具 Html清理工具 ...
利用Canvas识别页面设计图中的背景色及独立图片元素,并自动生成静态重构稿
此页面本是《REACT:引领未来的用户界面开发框架》例子,不过所用技术仅仅是React Flux,所以小生把它重构了一下!
首先简单说明下我面试的范围,以明确下面所总结的范围:到目前为止,我主要是从事“页面重构工程师”这个职位的技术初试,所谓初试就是第一次的筛选,主要是技术,也就是职位所需能力的面试。 当“ 页面重构工程师 ...
网站设计与开发,页面的布局等等都应该遵循一定的规则,也就是符合一定的规范。《网站重构》正是一本向读者介绍如何更好的构建你的网站的书籍
这次主要是对之前本胖写的单页面 海淘商城做一个系统性的优化。 此项目大大小小共 16 个主体页面,涉及注册、登录、商品详情、购物车、下单、订单、订单详情等等,是一个完整的流程。
JSP应用开发-使用JSTL标签重构BBS论坛页面.pptx
主要介绍了使用vue重构资讯页面的实例代码解析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
本资源提供了一套基于SSM框架的MyPetStore重构设计源码,包含140个文件,其中包括46个Java源代码文件,45个GIF图片文件,13个JSP页面文件,11个HTML页面文件,9个CSS样式文件,以及8个JavaScript脚本文件。...
专业的页面重构师手下出产的页面应该是标准、合理、高效,易扩展,易维护的。为尽早奔向这一NB的方向,吾等前赴后继的前端码农们,升级所需的必要天赋之一:载入更快,更省带宽!
如今,工业化设计已经融入到了...本文从一个页面重构工程师的角度出发,从两个方面谈谈作者所理解的用户体验,以及作者做了哪些和用户体验有关的事情。随着视觉设计的发展,按钮、链接或者导航菜单的表现方式变得异常丰