代码整洁之道(重构)


Posted in Javascript onOctober 25, 2018

前言

之前也介绍过我们团队的前端项目从零开始经历8个月迭代业务代码10万行(仅为产品长期规划需求的20%),至今仍然在不断迭代的过程。

团队成员除了设计好的架构来管理这种复杂度极高的前端应用,还开始补充设计模式以及重构方面的知识,目的是为了让项目代码在不断迭代的过程中优化项目代码,保持代码的新鲜度,鲁棒性,可维护性… 让后续加入的团队新人也可以快速加入我们的产品开发中

PS:  不管对于何种语言,重构都是软件开发过程中不可或缺的一部分。如果已经了解重构的基础,可以直接跳往至文章后面的重构案例部分。

重构背景

“如果尿布臭了,就换掉它”。

  • 随着业务需求的不断加入,代码随着时间的推移变得越来越糟。
  • 这其中可能包括以下坏味道(仅列举):
    • 重复的代码
    • 过长的函数
      • 遵循一条原则: 每当感觉需要注释来说明什么的时候,可以尝试将需要说明的东西写进一个函数中
    • 冗赘类
      • 当子类没有做足够的工作的时候,或者说在可见的预期内,不会有新的情况出现,考虑将类内联化。
    • 过长的类
      • 这种情况容易出现冗余代码。比如如果类内出现了多个变量带有相同的前缀或者后缀,这意味着你可以考虑把他们提炼到某个组件内,或者考虑这个组件是否可以成为子类,使用提炼类的手法来重构。

什么是重构

我们回过头来看一下"什么是重构"

  • 不改变软件可观察行为的前提下,改善其内部结构
  • 以提高理解性和降低修改成本

摘自《重构 - 改善既有代码的设计》(下面简称《重构》)

何时重构?

我们需要明确的一点是: 重构不是一件应该特地拨出一段时间来做的事情。重构不是目的,但是重构可以帮助你把事情做好。

事不过三,三则重构

  • 重复性工作,既有的代码无法帮助你轻松添加新特性时
  • 修补bug时,排查逻辑困难
  • code review 可以让他人来复审代码检查是否具备可读性,可理解性
  • 太多的代码无注释,已然连自己都无法快速理清代码逻辑

重构的衡量指标

  • 数量: 代码的行数
  • 质量: 代码复杂度,耦合度,可读性,架构依赖复杂度等
  • 成本: 花费的时间
  • 回报(成果):  支持后续功能的快速叠加,解决现有因代码设计问题无法优化的矛盾等

抓重点 抓重点啦

说了这么多废话,其实大家都明白没有与实践结合的理论都是空虚的。

但是 重构和 设计模式一样,也是需要一个"学习——领悟——突破"的过程。第一步的学习让你了解基本的重构手法,第二步的实践勾起你对重构手法的回忆以及重温应用,第三步的应用以及实践经验激发你的思考,领悟以及总结,以致于灵活运用。
但凡是人,总是在不断学习,不断温习,以达到具体场景具体应用,灵活自如。

重构是一个很大的话题,《重构》作者本人也是经历了N多的项目,以及多年的经验才总结出来的重构技巧。

重构技巧

《重构》一书作者总结的重构手法实在是太多了,只能通过图片来展示一下所有作者总结的重构列表。
具体的补充,大家可以看看《重构》一书。

代码整洁之道(重构)

代码整洁之道(重构)

重构的实践

作者推荐的一种做法:

  • 随机挑选一个目标 先给自己选择一个目标(譬如“去掉一堆不必要的子类”),然后朝着目标前进,每一步走得小而坚定
  • 没把握就停下来 当你无法证明自己所做的一切能够保证原有程序的逻辑和语义时,请你停下来思考:既有的重构是改善了还是毫无成果需要撤销。
  • 保证每次重构后的测试都能正常跑通

作为开发者, 应当把重构作为开发的一部分,一边开发一边重构。在快速堆叠代码,实现基本需求功能的基础上,写好测试用例,保证功能不变,逐步重构。
这也是我们团队要求每个人都掌握重构这门必备技能的原因。优秀的程序员应当尽量避免低质量的代码。

重构案例

故事场景

有三种类型的电影,顾客可以进行租赁

租赁规则

价格计算规则:

普通片儿 —— 起步价2¥,超过2天的部分每天每部电影收费1.3元
新片儿    —— 每天每部3元
儿童片    —— 起步价2¥,超过3天的部分每天每部电影收费0.8元

积分计算规则:

每借一部电影积分加1,新片每部加2

原始代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
Vue使用NPM方式搭建项目
Oct 25 #Javascript
小程序云开发实战小结
Oct 25 #Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 #Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 #Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 #Javascript
使用ECharts实现状态区间图
Oct 25 #Javascript
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
You might like
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
js验证表单第二部分
2006/11/25 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
js表单登陆验证示例
2016/10/19 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
Vuex提升学习篇
2018/01/11 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
财产保全担保书范文
2014/04/01 职场文书
法制报告会主持词
2014/04/02 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
治庸问责工作总结
2015/08/11 职场文书
严以律己学习心得体会
2016/01/13 职场文书