【翻译】再见, Clean Code!


鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础
💫个人格言: "如无必要,勿增实体"


正文开始

文章目录

  • 【翻译】再见, Clean Code!
    • 正文
      • 那是一个深夜
      • 次日早晨
      • 这只是一个阶段

【翻译】再见, Clean Code!

这篇文章翻译于React核心开发者Dan的这篇博客。

原文链接:overreacted.io/goodbye-cle…

正文

那是一个深夜

我的同事刚刚提交了他们整个星期一直在编写的代码。我们正在开发一个图形编辑画布,他们实现了通过拖动矩形和椭圆等形状边缘的小手柄来调整其大小的功能。

代码能正常运行。

但显得很冗余。每个形状(如矩形或椭圆)拥有各自不同的手柄集合,而拖动手柄的不同方向会以不同的方式影响形状的位置和尺寸。如果用户按住 Shift 键,我们还需要在调整大小时保持形状的长宽比。涉及了大量的数学计算。

代码大致如下:

let Rectangle = {resizeTopLeft(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeTopRight(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeBottomLeft(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeBottomRight(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},
};let Oval = {resizeLeft(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeRight(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeTop(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeBottom(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},
};let Header = {resizeLeft(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeRight(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},  
}let TextBlock = {resizeTopLeft(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeTopRight(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeBottomLeft(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},resizeBottomRight(position, size, preserveAspect, dx, dy) {// 10 repetitive lines of math},
};

那些重复的数学运算令我颇为烦恼。

代码不够整洁。

大部分重复出现在处理相似方向的函数之间。比如,Oval.resizeLeft()Header.resizeLeft() 就有相似之处,因为它们都涉及拖动左侧的手柄。

另一类相似性存在于处理相同形状的所有方法之间。例如,Oval.resizeLeft() 与其它 Oval类的其他方法也有共通之处,因为它们都是围绕椭圆进行操作。同样,RectangleHeaderTextBlock 之间也存在一些重复,因为文本块本质上就是矩形。

我有了一个想法。

我们可以这样对代码进行归类,从而消除所有重复:

let Directions = {top(...) {// 5 unique lines of math},left(...) {// 5 unique lines of math},bottom(...) {// 5 unique lines of math},right(...) {// 5 unique lines of math},
};let Shapes = {Oval(...) {// 5 unique lines of math},Rectangle(...) {// 5 unique lines of math},
}

然后组成他们的行为

let {top, bottom, left, right} = Directions;function createHandle(directions) {// 20 lines of code
}let fourCorners = [createHandle([top, left]),createHandle([top, right]),createHandle([bottom, left]),createHandle([bottom, right]),
];
let fourSides = [createHandle([top]),createHandle([left]),createHandle([right]),createHandle([bottom]),
];
let twoSides = [createHandle([left]),createHandle([right]),
];function createBox(shape, handles) {// 20 lines of code
}let Rectangle = createBox(Shapes.Rectangle, fourCorners);
let Oval = createBox(Shapes.Oval, fourSides);
let Header = createBox(Shapes.Rectangle, twoSides);
let TextBox = createBox(Shapes.Rectangle, fourCorners);

代码的总大小减半,重复的部分也完全消失了!如此整洁。如果我们想要改变某个特定方向或形状的行为,我们可以在一个地方进行修改,而不是到处更新方法。

已经是深夜了(我太投入了)。我将我的重构代码提交到了主分支然后去睡觉了,为自己解开了同事混乱的代码而感到骄傲。

次日早晨

……并未如我所料。

上司找我进行了一次单独交谈,委婉地要求我撤销那次修改。我惊愕不已。旧代码一团糟,而我的代码整洁明了!

尽管心有不甘,我还是照做了。然而,我花了好几年才意识到他们是对的。

这只是一个阶段

对“清洁代码”痴迷、热衷于消除重复,是我们许多人必经的一个阶段。当我们对自己的代码缺乏信心时,往往会将自己的自我价值感和职业自豪感寄托于那些可度量的事物上。一套严格的代码风格规则、一种命名方案、一种文件结构、对重复的零容忍……

虽然无法完全自动化地消除重复,但随着练习,这一过程会变得愈发容易。通常情况下,每次修改后,你都能判断出代码中的重复是增多了还是减少了。因此,消除重复仿佛是在提升代码某个客观指标,给人以成就感。更糟糕的是,它还会影响人们的自我认知:“我是那种编写清洁代码的人”。这种错觉具有极强的迷惑性。

一旦我们掌握了创建抽象的能力,就很容易对此上瘾,只要看到重复的代码,就会迫不及待地从中抽离出抽象。经过几年编程历练,我们会发现到处都是重复——而抽象化正是我们的新超能力。如果有人告诉我们抽象是一种美德,我们会欣然接受,并开始评判他人不崇尚“清洁”。

我现在明白,那次所谓的“重构”在两方面都是一场灾难:

  • 首先,我没有与原作者沟通。我在没有征得他们意见的情况下重写了代码并提交。即便这算是一种改进(我现在已不再这么认为),这种方式也极其糟糕。一个健康的工程团队始终在建立信任。未经讨论就擅自重写队友的代码,将严重损害你们在代码库上的协作效率。
  • 其次,没有什么是免费的。我的代码牺牲了应对需求变更的能力,换取了减少重复,但这并非一笔划算的交易。例如,后来我们需要为不同形状的不同手柄添加许多特例和行为。若沿用我的抽象设计,实现这些变更会复杂数倍;而若是采用原先“杂乱”的版本,这些改动则轻而易举。

那我是否在建议你应该编写“脏”代码呢?并非如此。我想强调的是,当你谈论“清洁”或“脏乱”时,应当深入思考其含义。这些词语会让你产生反感、正义感、美感或是优雅感吗?你能否确切指出这些品质所对应的工程成果?它们又是如何具体影响代码的编写与修改方式?

我当初的确未曾深入思考这些问题,只是过分关注代码的外观,却忽视了它在一个由充满变数的人类组成的团队中如何演变。

编程是一段旅程。想一想从写下第一条代码至今,你已走了多远。第一次体验到通过提取函数或重构类让复杂代码变得简洁,想必令你欣喜不已。如果你对自己的技艺引以为豪,追求代码清洁自然颇具吸引力。那么,就先这样做一段时间吧。

但切勿止步于此。不要成为清洁代码的狂热信徒。清洁代码并非目标,而是我们在面对系统无尽复杂性时试图理清头绪的一种手段,是在面对未知领域、不清楚某项改动会对代码库产生何种影响时的导航工具。

让清洁代码指引你,然后适时放下它。

个人感言:clean code固然重要,但不可过度封装🙅‍♂️。

End

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

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

相关文章

面试八股——JVM★

类加载 类加载器的定义 类加载器的类别 类装载的执行过程 类的装载过程: 加载: 验证: 准备: 这里设置初始值并不是传统意义的设置初始值(那个过程在初始化阶段)。 解析: 初始化: …

微信小程序|自定义弹窗组件

目录 引言小程序的流行和重要性自定义弹出组件作为提升用户体验和界面交互的有效方式什么是自定义弹出组件自定义弹出组件的概念弹出层组件在小程序中的作用和优势为什么需要自定义弹出组件现有的标准弹窗组件的局限性自定义弹出组件在解决这些问题上的优势

基于Springboot的校园闲置物品交易网站

基于SpringbootVue的校园闲置物品交易网站的设计与实现 开发语言:Java数据库:MySQL技术:SpringbootMybatis工具:IDEA、Maven、Navicat 系统展示 用户登录 首页 商品信息展示 商品资讯 后台管理 后台首页 用户管理 商品类型管…

《系统架构设计师教程(第2版)》第9章-软件可靠性基础知识-04-软件可靠性设计

文章目录 1. 容错设计技术1.1 恢复块设计1.2 N版本程序设计1.3 冗余设计 2. 检错技术3. 降低复杂度设计4. 系统配置中的容错技术4.1 双机热备技术4.1.1 双机热备模式4.1.2 双机互备模式4.1.3 双机双工 4.2 服务器集群技术 1. 容错设计技术 1.1 恢复块设计 恢复块设计 选择一组…

用于 SQLite 的异步 I/O 模块(二十四)

返回:SQLite—系列文章目录 上一篇:SQLite的PRAGMA 声明(二十三) 下一篇:SQLite、MySQL 和 PostgreSQL 数据库速度比较(本文阐述时间很早比较,不具有最新参考性)(二…

亚马逊、沃尔玛自养号测评技术解析:如何降低潜在风险

亚马逊等电商平台在全球范围内迅速扩张,竞争愈发激烈。为提升产品排名和销量,众多卖家选择采用自养号测评的策略。然而,自养号测评技术并非完美无缺,它存在着一定的技术局限性。由于缺乏对自养号原理及底层环境搭建的深入理解&…

华为配置通过流策略实现流量统计

配置通过流策略实现流量统计示例 组网图形 图1 配置流策略实现流量统计组网图 设备 接口 接口所属VLAN 对应的三层接口 IP地址 SwitchA GigabitEthernet1/0/1 VLAN 10 - - GigabitEthernet1/0/2 VLAN 20 - - GigabitEthernet1/0/3 VLAN 10、VLAN 20 - - S…

MapReduce原理简介

MapReduce 是一种用于处理大规模数据集的编程模型和计算框架,最初由 Google 提出,并被 Hadoop 等开源项目广泛应用。它主要包括两个阶段:Map 阶段和 Reduce 阶段。下面是 MapReduce 的基本原理: 图示不错 MapReduce 的基本原理&…

Java的Future机制详解

Java的Future机制详解 一、为什么出现Future机制二、Future的相关类图2.1 Future 接口2.2 FutureTask 类 三、FutureTask的使用方法四、FutureTask源码分析4.1 state字段4.2 其他变量4.4 构造函数4.5 run方法及其他 一、为什么出现Future机制 常见的两种创建线程的方式。一种是…

开源模型应用落地-chatglm3-6b-gradio-入门篇(七)

一、前言 早前的文章,我们都是通过输入命令的方式来使用Chatglm3-6b模型。现在,我们可以通过使用gradio,通过一个界面与模型进行交互。这样做可以减少重复加载模型和修改代码的麻烦, 让我们更方便地体验模型的效果。 二、术语 2.…

《剑指 Offer》专项突破版 - 面试题 110 : 所有路径(C++ 实现)

题目链接:所有路径 题目: 一个有向无环图由 n 个节点(标号从 0 到 n - 1,n > 2)组成,请找出从节点 0 到节点 n - 1 的所有路径。图用一个数组 graph 表示,数组的 graph[i] 包含所有从节点 …

组件与组件之间的传递-事件总线

两个组件之间的数据传递(属于非父子组件通讯) 当项目中只是两个组件的少量数据传递时使用事件总线这种方法会比较方便,但当遇到大量数据传递时推荐使用vuex 思路 组件与组件之间不能直接传递,这是候可以创建一个EventBus.js文件…

ELK日志分析系统之Zookeeper

一、Zookeeper简介 ZooKeeper是一种为分布式应用所设计的高可用、高性能且一致的开源协调服务,它提供了一项基本服务:分布式锁服务。分布式应用可以基于它实现更高级的服务,实现诸如同步服务、配置维护和集群管理或者命名的服务。 Zookeepe…

力扣:49. 字母异位词分组

知识点: 散列函数 散列函数能使对一个数据序列的访问过程更加迅速有效,通过散列函数,数据元素将被更快地定位: 1. 直接寻址法:取关键字或关键字的某个线性函数值为散列地址。即H(key)key或H&a…

计算机网络 Cisco路由器基本配置

一、实验内容 1、按照下表配置好PC机IP地址和路由器端口IP地址 2、配置好路由器特权密文密码“abcd+两位班内序号”和远程登录密码“star” 3、验证测试 a.验证各个接口的IP地址是否正确配置和开启 b.PC1 和 PC2 互ping c.验证PC1通过远程登陆到路由器上&#…

C#医学实验室/检验信息管理系统(LIS系统)源码

目录 检验系统的总体目标 LIS主要包括以下功能: LIS是集:申请、采样、核收、计费、检验、审核、发布、质控、耗材控制等检验科工作为一体的信息管理系统。LIS系统不仅是自动接收检验数据,打印检验报告,系统保存检验信息的工具&a…

初级软件测试常见问题

1.JMeter (1)在http请求的时候,消息体数据中的数据需要用{}和“”标记起来,变量要用${}括起来。 (2)在响应断言的时候,要根据测试模式输出的内容来改变测试字段,假如输出错误可以把…

系统学c#:1、基础准备(软件下载与安装)

一、Vs软件下载与安装 访问Visual Studio官方网站: https://visualstudio.microsoft.com/zh-hans/downloads 下载Visual Studio 运行exe文件,点击“继续” 初始文件安装完成后选择我们需要安装的项,并勾选好必要的单个组件,设…

代码随想录阅读笔记-回溯【全排列】

题目 给定一个 没有重复 数字的序列,返回其所有可能的全排列。 示例 输入: [1,2,3]输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ] 思路 以[1,2,3]为例,抽象成树形结构如下: 回溯三部曲 1、递归函数参数 首先排列是有…

Emacs之实现复制当前已打开文件buffer(一百三十五)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…