如何写出难以理解的 ES5 代码？

2024-01-28 06:57:46







**前言** 

身为一名 ES5 开发人员，您可能会遇到编写难以理解代码的需求。也许您想向同事展示您的智慧，或者只是想让未来的维护人员抓狂。无论您的动机是什么，本文将提供一些宝贵的技巧，帮助您编写出让其他人完全不知所云的代码。

**混乱的变量命名** 

变量命名是编写难以理解代码的关键。以下是一些让您的变量名尽可能难以理解的技巧：

* 使用缩写和首字母缩写词：例如，`usr` 表示用户，`tx` 表示事务。
* 使用模糊的名称：例如，`x`、`y` 和 `z`。
* 避免使用性名称：例如，使用 `foo` 而不是 `username`。
* 使用不同的拼写或拼错单词：例如，`variabul` 而不是 `variable`。

**令人费解的逻辑** 

混乱的逻辑是编写难以理解代码的另一个重要方面。以下是一些让您的代码逻辑尽可能晦涩难懂的技巧：

* 使用嵌套 if-else 语句：越多越好。
* 使用 goto 语句：它们会让您的代码在不同的地方跳来跳去。
* 避免使用清晰的条件：相反，使用复杂的布尔表达式。
* 使用隐藏的副作用：例如，修改函数的全局变量。

**糟糕的注释** 

注释对于理解代码至关重要，但您也可以使用它们来让代码更加混乱。以下是一些编写糟糕注释的技巧：

* 使用技术术语：即使普通开发人员无法理解。
* 提供错误或过时的信息。
* 使用过多的注释：这会分散注意力并使代码更难阅读。

**案例：计算器** 

让我们通过一个计算器的简单示例来说明这些技巧如何应用于实际代码。

**普通人怎么写的：** 

```html
<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="calculate()">计算</button>

function calculate() {
  const num1 = document.getElementById("num1").value;
  const num2 = document.getElementById("num2").value;
  const sum = parseInt(num1) + parseInt(num2);
  alert(sum);
}

解决方案：

<input type="number" id="n1">
<input type="number" id="n2">
<button onclick="eval()">评估</button>

function eval() {
  const n1 = document.getElementById("n1").value;
  const n2 = document.getElementById("n2").value;
  const tmp = window.tmp || {};
  window.tmp = { a: parseInt(n1), b: parseInt(n2) };
  const sum = eval("a + b");
  alert(sum);
}