写点什么

反面教材:搞砸 Web 开发的 15 种方法

作者 | Fotis Adamakis

  • 2023-11-07
    北京
  • 本文字数:2288 字

    阅读完需:约 8 分钟

大小:720.50K时长:04:05
反面教材:搞砸Web开发的15种方法

现如今,网络上关于怎么构建健壮、可维护 Web 应用的文章随处可见,相信大家早就看烦了。那如果公司里刚好来了个你看着不顺眼的新同事,各位打算给这家伙点颜色瞧瞧,该怎么下手?别担心,坏事就由我来做。只要按照以下 15 条建议实施,绝对能让 Web 开发者在浪费一整天时间之后、陷入深深的沮丧与自我怀疑当中。

 

1. 抽象层


多用抽象层、越多越好,直到:


  • 代码已经难以理解和调试。

  • 代码变更变得极为困难。

  • 代码运行速度变慢、效率降低。

  • 代码失去复用性。

 

2. 用各种方式刁难 PR 变更


一定要拖住 PR 请求,借此维护住你在项目中的主导地位。


下面提几个可行的刁难借口:


  • 要求把变更名延长;

  • 要求把变量名缩短;

  • 要求重新命名变更名;

  • 要求代码更“紧凑”。

 

3. 不写提交信息


高质量的提交信息多费工夫啊,我们时间宝贵、才没精力浪费在编写这种东西上:

 

[JIRA-1234] build: replace vue-cli with vite
复制代码

 

相反,大家可以直接用以下命令来推送不带任何提交信息的代码:

 

git commit --allow-empty-message -m "" && git push --force
复制代码

 

4. 多用“幻数”


多用“幻数”,这样会显得你更专业、更神秘、更清楚自己到底在做什么:

 

window.scrollTo({  top: 89,  left: 12,  behavior: "smooth",});
复制代码

 

5. 掺杂返回语句


在函数里混杂返回语句,这样别人就永远不知道你接下来打算干什么了:

 

function shouldPayTax(income) {  if(income.amount < 20_000) {    return false  }  if(income.amount > 20_000 && income.country == 'USA') {    return true  }  if(income.country == 'Panama') {    return false  }  if(this.totalWorkingHoursPerWeek > 60) {    return true  }  if(income.amount > 20_000 && income.isCelebrity == true) {    return false  }  if(income.amount > 20_000) {    return true  }}
复制代码

 

6. Typescript


如果有人厚颜无耻地把 TypeScript 添加到项目中,大家可以到处使用 any 来绕过类型检查。

 

function add(a:any, b:any):any {  return a + b}
复制代码

 

7. 用双等号来替代三等号


使用 == 来代替 ===,理由是在生产包中节约宝贵的存储空间。

 

8. 注释代码


除了要编写难以理解的代码之外,也别忘了留下毫无意义的误导性注释,否则没准哪个聪明人就看懂了你的开发逻辑。

 

相关参考规则如下:


  • 注释应该与代码重复;

  • 注释的作用是解释代码为什么不够清楚;

  • 对于可以写出清晰注释的部分,什么都别写;

  • 注释的意义在于引起混乱,而非消除混乱;

  • 切勿提供复制代码的原始链接;

  • 切勿提供有帮助的外部参考链接;

  • 在修复 bug 时,切勿添加任何注释(或测试);

  • 切勿使用注释来标记不完整的实现。

 

这里还有更多“妙招”供大家参考:

https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/

 


9. 使用 Props 实现状态共享


使用 props 传递状态,能让大家更好地把组件层次结构耦合起来,从而大大提高重构难度。

 


10. 对组件状态使用状态管理


另一方面,记得把组件状态移动至全局存储,这样每个人都可以修改其内容。

 

11. 让组件文件变长


使用大型整体组件,理由是这样能更好地明确组件用途、改善变量的跨函数可复用性。

 

12. 不做 linter 检查


Linter 能够分析代码并检测出潜在错误、不一致性以及与既定编码标准间的偏差,而这显然跟我们的意图背道而驰。

 

以下两个代码片段之间就存在明显差异:

 

const props=defineProps({elements:Array,counter:{type:Number,default:0,},});const{data,method}=useComposable();const isEmpty=computed(()=>{returnprops.counter===0;});watch(props.counter,()=>{console.log("Countervaluechanged");});const emit=defineEmits(["event-name"]);function emitEvent(){emit("event-name");}function getParam(param){return param;}
复制代码

 

const props = defineProps({  elements: Array,  counter: {    type: Number,    default: 0,  },});const { data, method } = useComposable();const isEmpty = computed(() => {  return props.counter === 0;});watch(props.counter, () => {  console.log("Counter value changed");});const emit = defineEmits(["event-name"]);function emitEvent() {  emit("event-name");}function getParam(param) {  return param;}
复制代码

专业提示:关于 linting 规则,唯一可以接受的用法就是确保文件长度超过特定行数。这里不妨把数字设定为 1000。

 

13. 在翻译中使用 HTML


要想搞砸 Web 开发,对字符串进行硬编码永远是种好办法。有时候,使用包含 html 元素和类的翻译更能够“锦上添花”。

 

translation.key.name = Hello <span class="red">World!</span>
复制代码

 

14. 编写测试


不编写测试当然也挺好,但要想真正把人折磨疯,最好还是要测试、只是提供一套极差的套件。这里向大家分享折磨人测试的一般准则:

  • 慢——测试时间足够我们去泡杯咖啡;

  • 不可靠——常测常新,永远不确定这测试到底靠不靠谱;

  • 耦合——会影响到其他测试;

  • 过度延伸——尽可能跟应用程序中的其他部分扯上关系。

 

悟性高的朋友还可以参考这份单元测试进阶“教程”:

https://fadamakis.com/8-tips-for-writing-better-unit-tests-8c0a8d8cde16

 

15. 永远信任一切


最后,只有懦夫和小白才需要防御性编程。这世上哪有那么多坏人?

 

总结


请大家别把文章当真,因实操而遭解雇的话,本文作者概不负责。😅

 

如果大家有自己的“奇思妙想”,请在评论栏中不吝分享。

 

原文链接:

https://fadamakis.com/15-terrible-advice-for-web-developers-e821e95f5d18


相关阅读:

Web3当下,最佳投资就是投资自己

Web3的反思,不要抱怨

给Web3创业者的28个原则

和我一起学习Web3

2023-11-07 08:004919

评论 2 条评论

发布
用户头像
没理解第 5 点...
2023-11-07 09:22 · 山东
回复
多条件判断不好找出从哪返回的
2023-11-09 09:55 · 陕西
回复
没有更多了
发现更多内容

JS逆向字体反爬,某供应商平台反爬实践

梦想橡皮擦

Python 爬虫 8月月更

leetcode 48. Rotate Image 旋转图像(Medium)

okokabcd

数组 LeetCode 数据结构与算法

【SpringBoot 一】SpringApplication启动类的Args详解

石臻臻的杂货铺

spring-boot 8月月更

信创是什么意思?涉及哪些行业?为什么要发展信创?

行云管家

信息安全 信创

如何通过使用“缓存”相关技术,解决“高并发”的业务场景案例?

冉然学Java

高并发 java; 单线程 redis'

活动报名:如何高效应对当下的实时场景需求?

tapdata

Tapdata 实时数据

手把手教你用 Jenkins 自动部署 SpringBoot

江南一点雨

Java spring jenkins springboot

炫酷又高效的数据可视化大屏,做起来真的没那么难!丨极客星球

MobTech袤博科技

产品设计 数据可视化

分布式链路追踪Jaeger + 微服务Pig在Rainbond上的实践分享

北京好雨科技有限公司

开源 Kubernetes 云原生 SpringCloud Jaeger

AI 助力双碳目标:让每一度电都是我们优化的

阿里技术

人工智能

2022上半年各银行理财子公司深耕差异化发展,净值型产品数量增加

易观分析

银行 子公司 差异化发展 净值型产品

如何在Linux (CentOS7.3) 下安装JDK1.8?【一篇文章教会你】

Bug终结者

java; Linux Kenel 8月月更

TPC藏宝计划IDO自由协议复利模式开发功能分析

开发微hkkf5566

聚焦数据来源、数据质量和模型性能构建小微企业信用画像

易观分析

数据技术 小微企业

未来已来,只是尚未流行

石云升

读书感悟 未来社会 8月月更 未来以来

智能电视可以打开小程序应用,再也不用头痛内存了

Geek_99967b

小程序

全面认识MOS管,一篇文章就够了

矜辰所致

电路设计 8月月更 电子设计基础 MOS管

开发者独立搭建一个跨模态搜索应用有多难?

Jina AI

深度学习 云原生 神经搜索 跨模态应用 多模态数据

Tapdata 开源项目基础教程:功能特性及实操演示

tapdata

Tapdata 开源社区

企业应当实施的5个云安全管理策略

SEAL安全

云计算 容器 DevOps 云原生 DevSecOps

数据中台建设(九):数据中台资产运营机制

Lansonli

数据中台 8月月更

干货丨数学规划视角下的分货优化解题思路

杉数科技

运筹优化 智能分货 供应链计划 仓储优化 门店分货

制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】

JavaPub

【有话耀说】开发小达人们,荣耀开发者服务平台正式入驻InfoQ社区啦~

荣耀开发者服务平台

技术分享| 小程序实现音视频通话

anyRTC开发者

小程序 uni-app 音视频 语音通话 视频通话

【SpringBoot 二】spring.factories加载时机分析

石臻臻的杂货铺

springboot 8月月更

中大型商业银行堡垒机升级改造就用行云管家!必看!

行云管家

信息安全 银行 堡垒机 IT安全

《中国综合算力指数》《中国算力白皮书》《中国存力白皮书》《中国运力白皮书》在首届算力大会上重磅发出

GPU算力

隐私计算与数据流通:关系、作用及功能

Jessica@数牍

隐私保护 隐私计算 数据流通 数据交易 数牍科技

什么是 DevOps?看这一篇就够了!

玩转Devop和研发效能DevStream/DevLake

DevOps

运维:Centos8安装supervisor守护Nginx进程笔记

天使不哭

#开源 8月月更

反面教材:搞砸Web开发的15种方法_性能优化_InfoQ精选文章