Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >可否举例说明你在工作中是如何优化前端代码的?

可否举例说明你在工作中是如何优化前端代码的?

作者头像
江一铭
发布于 2022-06-16 10:46:19
发布于 2022-06-16 10:46:19
49800
代码可运行
举报
文章被收录于专栏:技术社区技术社区
运行总次数:0
代码可运行

原则

首先说一个最重要的优化原则:代码优化是每天都要进行的,而不是一两个月做一次大优化,那时做就已经晚了。另外由于优化是每天做的,所以你不需要一次的就过度优化,保持小步快跑即可。

这个原则为什么重要?因为很多程序员会在写代码的时候说「先不优化了,等不忙的时候再优化」,然后……就没有然后了。

基本上「烂代码」就是因为「不忙的时候再优化」造成的。

别给自己写烂代码找理由

如果只要每天优化一点点代码,就能保持你的程序健康,你,能做到吗?

据我观察,90% 的程序员做不到。他们每天都会在心里找出如下理由来写出烂代码,或者对现有的烂代码视而不见:

  1. 这个项目我只维护几个月,没必要把代码写那么好,反正有人接盘。
  2. 这个项目是从别人手里接下的,代码真烂,要怪就怪之前的人,不是我的错,我胡乱加一些代码就行了,能用就行。
  3. 这是一个短期项目,没必要把代码写那么好
  4. 这是一个长期项目,明年再优化代码,现在能用就行

所以你看,不管我告诉他们多少优化代码的技巧,他们根本就不会去用的,这才是问题所在。

很多程序员抱怨公司代码烂,却从来不去尝试解决问题。(就像很多程序员抱怨培训班教出来的人水平差,自己却不写新人教程一样)

过手就变好

如果你不想变成上面那样的程序员,你只坚定一个信念:只要是经过我的手的代码,质量就会比原来好一点。

那么你很快就能把代码写好了。你可能急于听到把代码写好的技巧,但是我告诉你,技巧真的不重要,这个信念才是最重要的。

接下来就是技巧。

第一步:不要写烂代码

方方你是傻了吗,问的是「如何优化代码」,你的答案居然是「不要写烂代码」?!

没错,把代码写好的第一步就是不要写烂代码,也就是你要知道「什么样的代码是烂代码」:

如何写出无法维护的代码 - 酷 壳 - CoolShell​ coolshell.cn/articles/4758.html

上面这篇教程非常好,把市面上的烂代码基本都总结出来了,大概有这么几类:

  1. 烂变量名
  2. 烂注释
  3. 烂设计
  4. 不写测试(所有没有单元测试的代码都是烂代码,快点学习单元测试!)

基本上所有新人天天都在写烂变量名、烂注释和烂设计,而且还不写单元测试。

而且他们还不知道自己代码多烂!

所以第一步就是明白一个真相:你80%的代码都是烂代码。

你只需要把这些代码改得不那么烂,就是优秀的代码了……

再说一次:第一步至关重要,搞清楚什么样的代码是烂代码。

第二步:避免重复

也就是 Don't Repeat Yourself 原则。如果你发现有两行代码重复出现了好几次,你就应该把这两行代码封装成一个函数,放在一个恰当的地方,然后调用这个函数。

第三步:表驱动编程

如果你的代码有很多 if ... else ... 结构,你不知道怎么优化,你就应该使用表驱动编程。

优化前:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
howManyDays(year, month){
    if(month === 1 ||
        month === 3 ||
        month === 5 ||
        month === 7 ||
        month === 8 ||
        month === 10 ||
        month === 12
    ){
        return 31
    }else if(month === 2){
        return isLeapYear(year) ? 29 : 28
    }else{
        return 30
    }
}

优化后:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
howManyDays(year, month){
    const table = {
        1: 31, 3: 31, 5: 31, 7: 31, 8: 31, 10: 31, 12:31,
        4: 30, 6:30, 9: 30, 11: 30,
        2: isLeapYear(year) ? 29 : 28
    }
    return table[month]
}

优化前:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function calculateGrade(score){
    if(score>=90){
        return 'A'
    }else if(score >= 80){
        return 'B'
    }else if(score >= 70){
        return 'C'
    }else if(score >= 60){
        return 'D'
    }else {
        return 'E'
    }
}

优化后:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function calculateGrade(score){
    const table = {
        100: 'A', 
        90: 'A',
        80: 'B',
        70: 'C',
        60: 'D',
        others: 'E'
    }
    return table[Math.floor(score/10)*10] || table['others']
}    

第四步:用套路

设计模式就是一些编程套路,Unix 编程原则也是一些编程套路。

了解所有的套路,然后遇到问题选择正确的套路即可。

比如模块通信一般用事件模式或者命令模式;

比如解耦一般用中间层;

比如生命周期一般都支持钩子或切面;

比如性能优化一般都是加缓存;

比如 API 设计一定要正交;

比如复杂数据系统一般使用命令查询职责分离;

比如拿空间换时间拿时间换空间;

……

这一块还挺复杂的,够你纠结很久了,而且没有通解。唯一的通解就是 tradeoff。

第五步:坚持每天优化

我在课上说过,「每天优化」才叫重构,「每年优化」那叫重写。

优化的重点是「越来越好」,重点不是「一次写好」。

一旦你放松对自己代码的要求,你的代码就会迅速变成烂代码,而且很难恢复。

每当需求变化的时候,你都要重新审视你的整个系统,哪里有问题你就改那里,不允许「先临时改一下以后再优化」,你的代码就可以保持健康和活力。

可惜,大部分人做不到。就算我自己也会在需求太多的时候放松对代码的要求。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-11-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
《代码整洁之道》笔记(1-3章节)
序言:这是一本很多前辈推荐的书,阅读这本书后,我最大的感想就是:特别实在。书中时不时的出现一个句子,戳中你的内心。例如序言中的:
Yuyy
2022/06/28
4470
想提高代码质量?教你用Mock框架编写单元测试
在软件开发的生命周期中,单元测试扮演着至关重要的角色,它犹如汽车制造过程中的部件质量检测,确保每个组件都符合既定标准。显然,单元测试的必要性不容忽视,只有当每个软件元素都经过严格的质量把关,整个系统才能稳定运行。否则,任何潜在的问题都可能导致整个系统出现故障。
写bug的高哈哈
2024/11/02
1960
想提高代码质量?教你用Mock框架编写单元测试
【技术之旅】沧海一粟,星河长明:以代码之匙探寻技术的诗与远方
机缘巧合”是每个技术旅程中的常见主题,正如大多数伟大的发明都是在偶然中产生的。 我也在一次偶然的机会,遇到了CSDN这个广阔的平台。或许每个人的成长都始于某种偶然,但更重要的是,我们是否能够抓住这一机缘,去探索、去积累。这正是技术的魅力所在,它不像纯粹的知识积累,而是一次次偶然的相遇,在不经意间改变我们的未来。
半截诗
2025/01/20
750
【技术之旅】沧海一粟,星河长明:以代码之匙探寻技术的诗与远方
相见恨晚!C语言的驱动法编程详细解析(超多代码案例)
数据压倒一切。如果选择了正确的数据结构并把一切组织的井井有条,正确的算法就不言自明。编程的核心是数据结构,而不是算法。
混说Linux
2023/02/24
9770
相见恨晚!C语言的驱动法编程详细解析(超多代码案例)
如何提高代码品味
写代码虽然大多数时候是个体力活,但不可否认,也需要一点品位。我曾经觉得代码质量很重要,后来写业务写多了,又觉得如果连代码正确都做不到,又谈何代码质量。后来我又醒悟了,这世上很难有 bug free 的代码,当出现 bug 的时候,好代码比烂代码会好改很多。我们今天就讨论下什么是好代码,毕竟一个不知道什么样的代码是好代码的人是不可能如有神助写出好代码的,写代码可以搜索复制黏贴三板斧,写好代码却是必须刻意练习的。
Sheepy
2018/11/09
8540
入行 14 年,我还是觉得编程很难:给大项目写代码没意思还危险
作者 | 朱雷(@piglei) 2020 年,我在公司小组内做了一个分享,当时的 PPT 标题是《编程十年后的十个感触》。将资料分享在内网后,有位同事看到,评论说光看 PPT 不过瘾,希望我能将其扩展成一篇文章,我回复说没问题。如今 3 年过去了,我总算是兑现了自己的承诺。当时的 PPT,最后一页,我用纯白色背景给出了一行黑体大字:“十年很短,编程很难”。如今,第二个十年也已快行至中途,而这句话的后半部分好像对我仍然适用。 很多年前,当我还是一名学生的时候,偶尔也会点开一些“高级工程师”的招聘帖,这
深度学习与Python
2023/02/28
1.5K0
入行 14 年,我还是觉得编程很难:给大项目写代码没意思还危险
程序员们必须在工作中不断的学习成长
IT 行业是一个变化非常快的行业,它需要我们持续去学习新的知识和技能。 但是,工作以后,我们经常会发现自己学习的东西很少了,倒不是没有时间去学习, 而是学习的效率太低了。久而久之,就演变成『一年的工作
程序你好
2018/07/20
4200
关于烂代码的那些事
这是烂代码系列的第二篇,在文章中我会跟大家讨论一下如何尽可能高效和客观的评价代码的优劣。 在发布了关于烂代码的那些事(上)之后,发现这篇文章竟然意外的很受欢迎,很多人也描(tu)述(cao)了各自代码中这样或者那样的问题。 最近部门在组织bootcamp,正好我负责培训代码质量部分,在培训课程中让大家花了不少时间去讨论、改进、完善自己的代码。虽然刚毕业的同学对于代码质量都很用心,但最终呈现出来的质量仍然没能达到“十分优秀”的程度。 究其原因,主要是不了解好的代码“应该”是什么样的。
lyb-geek
2022/03/10
3070
关于烂代码的那些事
如何写出一个好的机器学习工具库
但使用工具只能让人入门,我们有没有可能自己写一个优秀的机器学习工具库,为开源做贡献,同时积累经验呢?
Ai学习的老章
2019/05/09
8500
如何写出一个好的机器学习工具库
探秘 | 写了一百万行代码是什么体验?
搞程序的累计写到一百万行代码到底是什么体验呢? 如果一百万是标量的话,来和大家研究一下这个数据,假设最好的情况,一天100行高质量代码,一年36500,100/3.65=27年多。即便从20岁开始编码
灯塔大数据
2018/04/04
1.7K0
探秘 | 写了一百万行代码是什么体验?
程序员,被代码耽误的段子手
来自:简书,作者:kuntoria 链接:https://www.jianshu.com/p/ab2a1c1e87fa
昱良
2019/11/29
9980
程序员既要写好代码,又要写好文档
程序员既要写好代码,又要写好文档 作为一个长期混迹于CSDN社区的人,我对很多拥有高访问量的博主钦佩不已,特别是在参加了CSDN在举办“2014 CSDN博文大赛”及“2015 CSDN-Markdown博文大赛”活动之后。我看到活动中的一些参赛作品条理清晰、文笔流畅、语言优美,大都出自程序员之手。我不禁想到一个问题:程序员是否应该注重文档的编写? 写文档的重要性 对于软件相关行业,在学校或单位大家也许都已经注意到了,除了要编写的程序、绘制设计图之外,还有一个重要的工作便是写文档。为什么要写文档呢?因为我们
用户1289394
2018/02/27
1.7K0
程序员既要写好代码,又要写好文档
火车残骸和基本类型偏执问题解决方案
坏味道:缺乏封装。封装,将碎片式代码封装成可复用模块。但不同级别程序员对封装理解程度差异大,往往写代码的人认为自己提供了封装,但实际上,我们还是看到许多的代码散落在那里。
JavaEdge
2023/02/13
4030
写与不写:程序员对代码注释之争
🔍在程序员的世界里,注释常常成为了讨论的焦点。据说,程序员最烦的两件事是别人不写注释以及自己要写注释。为何写注释在开发过程中如此关键?本文将探讨此问题,并为你提供实用的注释技巧!
默 语
2024/11/20
1100
写与不写:程序员对代码注释之争
有哪些老鸟程序员知道而新手不知道的小技巧?自我感受
最近在朋友圈看到别人分享的一篇知乎回答:https://www.zhihu.com/question/36426051/answer/76031743
深蓝studyzy
2022/06/16
2320
关于烂代码的那些事(下)
假设你已经读过烂代码系列的前两篇:了解了什么是烂代码,什么是好代码,但是还是不可避免的接触到了烂代码(就像之前说的,几乎没有程序员可以完全避免写出烂代码!)接下来的问题便是:如何应对这些身边的烂代码。
傻狗裆
2023/11/10
2280
关于烂代码的那些事(下)
谈对象第二弹: C++类和对象(中)
默认成员函数是用户不写,编译器会自动生成的成员函数,称为默认成员函数。在一个类中,我们不显示实现,编译器会自动实现的默认成员函数有6个,最重要的是前4个:构造函数、析构函数、拷贝构造函数、赋值运算符重载。后2个取地址运算符重载不重要。C++11还增加了两个默认成员函数:移动构造和移动赋值。
技匠晓晨
2024/11/26
910
谈对象第二弹: C++类和对象(中)
重构:改善饿了么交易系统的设计思路
重构前的交易系统第一版的代码可以追溯到 8 年前,这期间也经历过拆解重构,17 年我来到时,主要系统是这样:
吴延宝
2019/10/09
6530
重构:改善饿了么交易系统的设计思路
扒一扒知乎上的帖子——“为什么有些大公司技术弱爆了?”
知乎上看到一个热帖,我觉得很有意思,叫做 “为什么有些大公司技术弱爆了?”。我刚看到标题的时候,先入为主和刻板偏见了一下,正如同第一个回答一样,我皱了皱眉头,产生了对题主的鄙视之情;但是很快,读完帖子以后,我却立场明确地站到题主一边了。正如同里面有位回答:
四火
2022/07/19
3920
公司最大的内卷,偷偷做单元测试
一位读者在看过我的《理解这八大优势,才算精通单元测试》后,问我:知道单元测试有好处,但实在没空写。看完文章后又想重新落实一下,有没有啥写好单元测试的技巧?
陈哥聊测试
2024/08/23
1250
公司最大的内卷,偷偷做单元测试
推荐阅读
相关推荐
《代码整洁之道》笔记(1-3章节)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验