如何放飞自我,提升开发效率

最近我转到了新的业务线开发,面临着需求繁多和工期紧张的压力,常常被指责开发速度慢、效率低下。随着时间的推移,这让我感到烦躁。于是,我决定放弃一些原则,提升代码编写的速度,反正都是一锤子买卖的代码。结果,我被指责的次数减少了,心情变得愉快,效率明显提升,甚至得到了表扬。

我彻底放飞自我,开始无原则编程,追求"能跑就行"的理念。这样做让我烦恼少了,陪伴孩子的时间多了,颈椎也得到了缓解。遇到问题时,我会向 AI 寻求帮助,无论是处理数据还是转换接口,一切都变得简单而美好。

然而,随着时间的推移,我开始感到一阵迷茫:这真的是我想要的工作方式吗?这样的工作似乎谁都能做到。

一、变量语义化浪费时间

变量语义化的主要目的是提高代码的可读性和可维护性,使得其他开发者(或未来的自己)能够更容易理解代码的目的和逻辑。

现在AI都可以根据上下文分析代码了,那还有必要花费时间进行语义化的变量命名呢?这似乎显得有些浪费时间。

举个例子,假设一个页面中有四个标签页,每个标签页都有一个表格。在之前,我会根据每个表格的内容为数据变量进行语义化命名,而现在我直接这样定义:

js 复制代码
const [data1,setData1] = useState([]);
const [data2,setData2] = useState([]);
const [data3,setData3] = useState([]);
const [data4,setData4] = useState([]);

这种做法虽然节省了时间,但是否会影响代码的可读性和可维护性呢?

二、只用useState

在 React 中,useStateuseRef 都可以用来定义变量。虽然我明白使用 useState 定义的变量会在更新时触发组件重新渲染,但我在想,这对性能的影响到底有多大?如果将来产品反馈页面反应慢,我可以再把那些与渲染无关的变量改为 useRef 来进行优化。既然如此,开发过程中何必那么在意区分与渲染无关的变量呢?

三、复用就是复制

你这个页面的功能和另一个页面的功能差不多,只是逻辑上有些不同,复用一下代码应该能很快完成。

查看了另一个页面的代码,发现逻辑写得很死,要复用的话,还得提取公共逻辑并做兼容判断。

考虑到工期很紧,想想万一修改后导致另一个页面无法使用,还是直接把另一个页面的代码复制到自己页面中,进行改造就行。这就是复用了。

四、组件化开发

在页面开发过程中,会遇到相似的DOM结构。以往习惯都会把这部分抽取从成为一个组件,并根据组件属性渲染不同DOM结构。

现在也懒得抽取了,遇到相似的DOM结构,直接复制黏贴更改不同的地方,这样效率更高,也不用去设计组件属性,浪费时间。

五、公共组件开发

在以前我会把升级为公共组件的相关代码,单独新建一个专门的文件,并为每个组件单独编写样式文件。并使用TypeScript 给组件属性定义,让同事在使用过程中,就知道组件该传什么属性,属性值时候错误直接提醒。然而,为了提升开发效率,我现在选择在一个文件中直接编写所有组件的代码,这样查找变得更快捷,只需使用 Ctrl + F 就能快速定位。

如果其他人需要引用我的组件,只需在文件中 export 相应的组件,并分享文件的相对路径即可。

如果你提到要把这个组件提取到公共组件区域,抱歉,我现在赶工期,没时间处理这个。

如果你想为这个组件添加一些定制化的功能,欢迎直接在我的代码中修改,但请注意,修改后产生的 BUG 需要你自己负责。

六、待续

其实开发业务代码,如果只是为了完成任务,去写代码,速度还是蛮快,不考虑代码的性能和维护性,不去从整个项目去思考代码结构如何设计,就会省下很多很多时间,效率自然提高了,不知各位掘友,还有什么妙招呢?

相关推荐
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1234 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语5 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport5 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg5 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全