代码整洁之道(重构)


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控制表格隔行变色
Jun 26 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
原生JS实现层叠轮播图
May 17 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 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
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
python实现超简单端口转发的方法
2015/03/13 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python如何实现转换URL详解
2019/07/02 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
apache ftpserver搭建ftp服务器
2022/05/20 Servers
nginx七层负载均衡配置详解
2022/07/15 Servers