`
dazuiba
  • 浏览: 128006 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

页面重构,将重构进行到底!

阅读更多
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设计中是中贯彻的理念。
  
分享到:
评论
3 楼 linzy410 2008-01-10  
这样一来,可能就是help里面太乱了,什么都往里面塞。
2 楼 skzr.org 2007-12-24  
呵呵,真丑陋阿/tx
是啊ruby怎么就能代替java
我还指望着称为java高手呢
1 楼 jarwang 2007-11-30  
精华贴都这样...可想而知.ruby有多"热门"了?
其实就是有点不明白.ruby怎么就能代替java???

相关推荐

    页面重构技术讨论稿

    专家关于网页重构的一些看法,还可以,内容不长,感兴趣的可以随便看看。

    视频频道页面重构总结1

    1. 重构前的一些缺点 1. 频道显示在VideoListActivity实现的,代码结构不够清晰 2. 频道页面需要根据不同频道目前存在矩阵式显示和列表式显示

    阳光喔页面重构.zip

    企业官网的页面代码重构,包含首页,列表页,详情页....下载直接可用于学习或教学,主要使用HTML和CSS,静态页面未添加javascript代码。

    页面重构中的设计模式

    页面重构中的设计模式,css开发真心不容易啊,写好css更不容易啊,希望有人喜欢吧,上传了再说。

    html与css网易严选重构页面.zip

    html与css网易严选重构页面.zip

    基于vue的单页面项目后期会对fetch那块重构

    基于vue的单页面项目,后期会对fetch那块重构

    div css网页重构

    用div css重构的网页 但是不是很好 因为没有原网页。。。

    HTML重构 div+css教程

    为什么进行HTML重构? HTML重构的目标(What Refactor To) ? 面对质疑:还要重构么? 战术篇 战术篇 工具篇 版本管理工具Version Control 页面验证工具Validators 测试工具 正则表达式工具 Html清理工具 ...

    cLayout一键生成重构稿

    利用Canvas识别页面设计图中的背景色及独立图片元素,并自动生成静态重构稿

    react-旨在重构一个react事例

    此页面本是《REACT:引领未来的用户界面开发框架》例子,不过所用技术仅仅是React Flux,所以小生把它重构了一下!

    页面重构工程师应该具有的技能和素质

    首先简单说明下我面试的范围,以明确下面所总结的范围:到目前为止,我主要是从事“页面重构工程师”这个职位的技术初试,所谓初试就是第一次的筛选,主要是技术,也就是职位所需能力的面试。 当“ 页面重构工程师 ...

    网站重构(中文版)

    网站设计与开发,页面的布局等等都应该遵循一定的规则,也就是符合一定的规范。《网站重构》正是一本向读者介绍如何更好的构建你的网站的书籍

    单页面海淘商城重构版

    这次主要是对之前本胖写的单页面 海淘商城做一个系统性的优化。 此项目大大小小共 16 个主体页面,涉及注册、登录、商品详情、购物车、下单、订单、订单详情等等,是一个完整的流程。

    JSP应用开发-使用JSTL标签重构BBS论坛页面.pptx

    JSP应用开发-使用JSTL标签重构BBS论坛页面.pptx

    使用vue重构资讯页面的实例代码解析

    主要介绍了使用vue重构资讯页面的实例代码解析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    基于SSM框架的MyPetStore重构设计源码

    本资源提供了一套基于SSM框架的MyPetStore重构设计源码,包含140个文件,其中包括46个Java源代码文件,45个GIF图片文件,13个JSP页面文件,11个HTML页面文件,9个CSS样式文件,以及8个JavaScript脚本文件。...

    页面重构技能-内容篇

    专业的页面重构师手下出产的页面应该是标准、合理、高效,易扩展,易维护的。为尽早奔向这一NB的方向,吾等前赴后继的前端码农们,升级所需的必要天赋之一:载入更快,更省带宽!

    一个页面重构工程师眼中的“用户体验”

    如今,工业化设计已经融入到了...本文从一个页面重构工程师的角度出发,从两个方面谈谈作者所理解的用户体验,以及作者做了哪些和用户体验有关的事情。随着视觉设计的发展,按钮、链接或者导航菜单的表现方式变得异常丰

Global site tag (gtag.js) - Google Analytics