代码整洁之道(重构)


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代码
Jul 01 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
yii用户注册表单验证实例
2015/12/26 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python 的 Socket 编程
2015/03/24 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
文案策划求职信
2014/04/14 职场文书
白酒营销策划方案
2014/08/17 职场文书
2014年度考核工作总结
2014/12/24 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
运动会主持词大全
2015/07/02 职场文书
党员转正大会主持词
2015/07/02 职场文书
卫生主题班会
2015/08/14 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫