日常开发之重构

作为开发人员,应该让重构贯穿于你的开发日常的每一刻。

为什么这么说?

重构是为了改善软件的设计、结构和实现,同时保留其现有的功能。 重构的潜在优势包括提高代码的可读性和降低复杂度。 这些都可以提高源代码的可维护性,并创建一个更简单、更干净或更有表现力的内部架构或对象模型,从而提高程序的可扩展性。

原因我觉得有两方便,一个是客观的因素,随着技术的不断更新迭代,语言的特性也在更新(朝着更高效便捷的方向)。另一个则是人为因素,不同的人由于开发水平的不同写出来的代码也各尽不同。

在一个团队中你除了要写自己的代码,而且还要接手别人的代码,作为一个leader更要去给别人做code review。

所以,重构是如此的必要,而且悄无声息。

举个例子,最近在看到一段代码后,立刻让我产生重构的冲动。

旧代码如下:

首先定义两个常量,对象和数组

const data = {Angular: 3,React: 1,Vue: 2,Next: 1,HTML: 2,Other: 3
};
const colors = ['#d17a29','#da9554','#e3af7f','#edcaa9','#f6e4d4','#204e77'
];

利用for操作,取出以上对象的key和value和数组元素组成新的数组

let sortable = [];
let index = 0;for (let temp in data) {sortable.push([temp, data[temp], colors[index] ? colors[index] : '#D3D3D3']);index++;
}sortable.sort(function(a, b) {return b[1] - a[1];
});

最终输出结果:

[['Angular', 3, '#d17a29'],['Other', 3, '#204e77'],['Vue', 2, '#e3af7f'],['HTML', 2, '#f6e4d4'],['React', 1, '#da9554'],['Next', 1, '#edcaa9']
]

从逻辑实现上没有任何问题。但总感觉哪里不对,是不是有更高效的实现方式呢?

重构后的代码

也许是写代码的惯性使然,立马想到使用Map方法可以将数据返回你想要的格式。

但是对象数据格式好像不支持Map方法。

所以我们得先将对象转化成数组

const newOutput = Object.entries(data);

我们将得到以下格式的数组

[['Angular', 3],['React', 1],['Vue', 2],['Next', 1],['HTML', 2],['Other', 3]
]

是不是和最终想要的结果有点类似了,数组的元素中还差了一个color的值,以及最终需要将它们排序。

接着我们根据索引将color的值添加到以上输出结果中

const newOutput = Object.entries(data)
.map(([title, amount], index) => [title,amount,colors[index] || "#fff"]
);

这里或者使用数组解构更容易理解一点

const newOutput = Object.entries(data).map((item, index) => [...item,colors[index] || '#fff']).sort((a, b) => b[1] - a[1]);

在取不到值的时候我们给添加了一个默认的颜色值

[['Angular', 3, '#d17a29'],['React', 1, '#da9554'],['Vue', 2, '#e3af7f'],['Next', 1, '#edcaa9'],['HTML', 2, '#f6e4d4'],['Other', 3, '#204e77']
]

最后只剩下一步,我们需要按第二项给数组排序,很容易就想到用sort方法

const newOutput = Object.entries(data).map(([title, amount], index) => [title,amount,colors[index] || "#fff"]).sort((a, b) => b[1] - a[1])

以上代码输出:

[['Angular', 3, '#d17a29'],['Other', 3, '#204e77'],['Vue', 2, '#e3af7f'],['HTML', 2, '#f6e4d4'],['React', 1, '#da9554'],['Next', 1, '#edcaa9']
]

没有问题,两种不同的代码都得到了最终的结果。但是重构后的代码量明显比之前的少了很多,而且结构更严谨。

写代码的过程中要学会举一反三,及时拥抱语言的新特性能给我们带来更好的编程体验。

另:以上代码在
【利好工具】JavaScript及时运行调试工具中运行更佳

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

摇钱树

题目描述 Cpg 正在游览一个梦中之城,在这个城市中有n棵摇钱树。。。这下,可让Cpg看傻了。。。可是Cpg只能在这个城市中呆K天,但是现在摇钱树已经成熟了,每天 每棵都会掉下不同的金币(不属于Cpg!&#xff09…

apache thrift_使用Java快速入门的Apache Thrift

apache thriftApache Thrift是由facebook创建的RPC框架,现在它是一个Apache项目。 Thrift允许您在不依赖语言的定义文件中定义数据类型和服务接口。 该定义文件用作编译器的输入,以生成用于构建通过不同编程语言进行通信的RPC客户端和服务器的代码。 您也…

前端八大灵感设计,代码变为现实

我们都知道掌握编程技术是一项很难的事情,没有捷径可走。需要我们在日复一日的工作中去锻炼。如果想要达到擅长甚至需要长年累月的积累。下面列举了一些可以给你带来编码灵感的例子,相信你看到会有想去写代码的冲动。因为一个好的工程师,是不…

Apple 公司开发者账号添加团队成员

Apple 公司开发者账号添加团队成员 简介 首先公司内部团队开发需要的账号类型为公司账号,可以添加团队成员协同开发。 账号下的团队成员有三种角色: Team Agent (代理) 代理: 就是注册开发者账号的那一个,权限最高,续费和创建开发…

相互问题

HTTPS协议是用于确保我们的连接安全的公认标准。 理解此协议的工作原理不是问题,并且从2000年起可以使用相应的RFC文档 。 尽管HTTPS的使用如此广泛,但您仍然可以找到一种无需不必要的复杂性就无法处理此协议的软件。 不幸的是,在使用该语言…

八个使前端工程师惊艳的效果设计,码否?

我们都知道掌握编程技术是一项很难的事情,没有捷径可走。需要我们在日复一日的工作中去锻炼。如果想要达到擅长甚至需要长年累月的积累。 下面列举了一些可以给你带来编码灵感的例子,相信你看到会有想去写代码的冲动。 因为一个好的工程师,…

OpenStack_I版 1.准备过程

openstack是一个开源云平台,python开发此次部署为实验环境, 采用扁平化简单的网络架构部署  优点:低耦合的,模块化Nova 计算资源池Glance 镜像服务Swift 对象存储Horizon 对计算资源,网络资源起别…

使用React和Tailwind CSS搭建项目框架

众所周知,Tailwind CSS框架越来越流行,所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板,一方面自己深入学习下,二来帮助新人更快地上手Tailwind CSS开发。 创建一个React项目 通过使用create-react-app命令创建一个新的…

快点,再快点!

现在看视频不来个两倍速(或者更快)都觉得在浪费生命。特别是在看视频教程的时候,文字我们可以做到一目十行,但是视频呢,如果有字幕,我们甚至不用听清,用3倍速或者4倍速完全没有问题,…

jetty eclipse_3个步骤实现Jetty和Eclipse集成

jetty eclipse本教程将引导您逐步了解如何集成Jetty和Eclipse,以及如何在Eclipse中的Jetty服务器上运行Web应用程序。 脚步: 安装Jetty Eclipse插件 建立网路应用程式 运行网络应用 1 –安装Jetty Eclipse插件 将服务器添加到“服务器”视图时&…

01jquey基础

1.html代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <script type"text/javascript" src"jquery-3.2.1.min.js"></script> <script type"tex…

使用React和Tailwind CSS搭建项目模板

公众号关注 “太空编程”设为 “星标”&#xff0c;带你了解硬核的编程知识&#xff01;众所周知&#xff0c;Tailwind CSS框架越来越流行&#xff0c;所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板&#xff0c;一方面自己深入学习下&#xff0c;二来帮助新人更快地…

Java用Java编译

在上一篇文章中&#xff0c;我写了关于如何在运行时生成代理的信息&#xff0c;我们已经了解到生成Java源代码的程度。 但是&#xff0c;要使用该类&#xff0c;必须对其进行编译&#xff0c;并将生成的字节码加载到内存中。 那是“编译”时间。 幸运的是&#xff0c;从Java 1.…

PHP实现前台页面与MySQL的数据绑定、同步更新

今天我来给大家介绍一个PHP-MySQL的小项目。 使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增、删等操作语句功能。 如果有问题&#xff0c;欢迎拍砖~ 有不懂的地方&#xff0c;提出来咱们一起探讨~ 首先&#xff0c;我们先做好前台HTML、CSS样式&#xff0c;代码如下&a…

如何用Vue实现简易的富文本编辑器,并支持Markdown语法

前端开发经常会用到富文本编辑器&#xff0c;比如CKEditor&#xff0c;动不动一个库几十M的代码量&#xff0c;其中涉及许多你可能用不到的功能特性和相关设置&#xff0c;CKEditor最新版本的代码仓库就有接近2000个JS文件&#xff0c;300,000行代码。 可是如果你只需要一个简…

互联网基建成果,快速实现一个clubhouse要多久

最近国外的一款基于语音的社交软件clubhouse掀起了一股热潮&#xff0c;尤其是在Eleon Musk的带动下&#xff0c;整个互联网圈内人都在第一时间抢先体验。不管它为什么会火&#xff0c;肯定不是技术上有什么特别的优势。随着整个互联网技术生态的不断发展&#xff0c;互联网基础…

阿里帝国到底有多庞大

马云&#xff0c;男&#xff0c;1964年9月10日生于浙江省杭州市&#xff0c;祖籍浙江省嵊州市谷来镇&#xff0c; 阿里巴巴集团主要创始人&#xff0c;现担任阿里巴巴集团董事局主席、日本软银董事、TNC中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事…

resteasy 统一异常_RESTEasy教程第3部分:异常处理

resteasy 统一异常在开发软件应用程序时&#xff0c;异常处理是显而易见的要求。 如果在处理用户请求时发生任何错误&#xff0c;我们应该向用户显示一个错误页面&#xff0c;其中包含详细的异常消息&#xff0c;错误代码&#xff08;可选&#xff09;&#xff0c;更正输入和重…

哪些网站在+1s后有神奇的功能

1s 有些网站&#xff0c;当我们给它 1s 时&#xff0c;会有意想不到的奇效。 github 1s 在 GitHub 域名后面加 1s 可以直接使用 vscode online 打开仓库代码&#xff0c;例如 https://github1s.com/fantingsheng/front-end https://github1s.com/fantingsheng/front-end^^ …

如何搭建一个内部组件共享平台

如今前端越来越趋于组件化的开发方式&#xff0c;最大的益处就是UI页面和逻辑的共用。在开发者的眼里&#xff0c;如果你打开一个网站&#xff0c;组件化的开发方式会让你看起来像这个样子&#xff1a;逻辑功能上我们会封装成一个库&#xff0c;然后NPM发布到公共仓库上&#x…