不交接工作（离职前删注释、改变量名）

离职前删注释、改变量名，是一种极具破坏性的行为。这种行为不仅让后续维护者抓狂，还能让代码库迅速腐烂。防御性编程的核心是让代码难以维护，而这种方式堪称经典。

变量名艺术：从清晰到混沌

变量名是代码可读性的第一道防线。精心设计的变量名能让代码自解释，而糟糕的命名则能让最简单的逻辑变成谜题。离职前，将userList改成a1，将isLoading改成flagX，瞬间提升代码理解难度。

// 离职前
function fetchUserData() {
  const userList = await getUserList();
  return userList.filter(user => user.isActive);
}

// 离职后
function f1() {
  const a1 = await g1();
  return a1.filter(x => x.f1);
}

更高级的做法是使用毫无意义的单词组合，比如将calculateTotalPrice改为doTheThing。如果配合匈牙利命名法（早已过时但杀伤力巨大），效果更佳：

// 离职前
interface Product {
  id: string;
  price: number;
}

// 离职后
interface IProd {
  sID: string;
  nPrice: number;
}

注释清除计划

注释是代码的说明书，删除它们相当于拆掉梯子。特别要删除那些解释复杂算法的注释，让后人只能通过脑补来理解：

// 离职前
/**
 * 使用快速排序算法对数组进行排序
 * 时间复杂度O(n log n)
 */
function quickSort(arr) {
  // 实现代码...
}

// 离职后
function qs(a) {
  // 实现代码...
}

更狠的做法是保留注释但故意写错，比如在排序函数上方写"这里使用冒泡排序"，实际上却是快速排序实现。这种误导性注释比没有注释更致命。

代码结构破坏术

良好的代码结构应该模块清晰、职责单一。破坏它最有效的方法是：

1. 将多个无关功能塞进同一个文件
2. 把本应拆分的函数合并成一个巨型函数
3. 随机调整代码顺序

// 离职前
// userService.js
export async function getUserById(id) { /*...*/ }
export async function updateUser(user) { /*...*/ }

// productService.js
export async function getProductList() { /*...*/ }

// 离职后
// utils.js
export async function doStuff(id, user, type) {
  if (type === 'user') {
    // 获取用户逻辑
    // 更新用户逻辑
  } else {
    // 获取商品列表逻辑
  }
}

类型系统破坏

如果项目使用TypeScript，破坏类型系统能产生长期伤害：

1. 将明确定义的类型改为any
2. 创建毫无意义的联合类型
3. 使用类型断言强制转换

// 离职前
interface User {
  id: string;
  name: string;
}

function getUserName(user: User): string {
  return user.name;
}

// 离职后
function getName(x: any): string | number | boolean {
  return (x as unknown).whatever;
}

依赖关系混乱

精心设计的依赖关系能让项目易于维护，而混乱的依赖则能让项目变成一团乱麻：

1. 在组件内部直接引入全局状态
2. 创建循环依赖
3. 将本应放在顶层的依赖深埋在底层组件

// 离职前
// components/Button.jsx
import { useTheme } from '../theme';

function Button() {
  const theme = useTheme();
  return <button style={{ color: theme.primary }}>Click</button>;
}

// 离职后
// components/Button.jsx
import store from '../../store';

function Button() {
  const theme = store.getState().app.theme;
  // 直接访问redux store，跳过所有中间层
  return <button style={{ color: theme.some.deep.nested.value }}>Click</button>;
}

配置覆盖

修改项目配置是另一种长效破坏方式：

1. 关闭所有lint规则
2. 删除类型检查
3. 修改构建配置使其难以调试

// .eslintrc.js 离职前
module.exports = {
  extends: 'standard',
  rules: {
    'no-console': 'warn'
  }
};

// 离职后
module.exports = {
  rules: {
    'no-console': 'off',
    'no-undef': 'off',
    'no-unused-vars': 'off'
    // 关闭所有有用规则
  }
};

测试代码破坏

如果有测试代码，一定要确保它们：

1. 不再通过
2. 测试毫无意义的内容
3. 随机跳过重要测试

// 离职前
describe('Calculator', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3);
  });
});

// 离职后
describe('Stuff', () => {
  it('does something', () => {
    expect(true).not.toBe(false);
    // 测试明显为真的事情
  });

  it.skip('important test', () => {
    // 跳过关键测试
  });
});

文档误导

如果有项目文档，应该：

1. 删除关键部分
2. 保留过时信息
3. 添加错误示例

<!-- 离职前 -->
## API 使用说明
GET /api/users
返回用户列表，格式为：
```json
{ "id": string, "name": string }

<!-- 离职后 -->

一些笔记

有时候用 POST 获取用户数据，返回格式可能是：

{ "data": "whatever" }

## 版本控制陷阱

利用Git制造混乱：

1. 提交一个巨大的、包含多个不相关改动的commit
2. 使用毫无意义的commit信息
3. 强制推送到主分支

```bash
# 离职前的良好习惯
git commit -m "fix: 修复用户列表加载问题"
git commit -m "feat: 添加黑暗模式支持"

# 离职后
git add .
git commit -m "更新"
git push origin main --force

环境设置破坏

修改本地和CI环境配置，使项目难以运行：

1. 删除.env示例文件
2. 在真实.env中添加无用的变量
3. 修改启动脚本使其依赖特定本地路径

# 离职前的.env.example
API_URL=http://api.example.com

# 离职后的.env
API_URL=http://localhost:3000
DEBUG_MODE=maybe
SECRET_KEY=123456
PATH_TO_SOMETHING=/Users/yourname/some/path

代码风格混乱

统一的代码风格有助于维护，混乱的风格则相反：

1. 随机混用空格和制表符
2. 有时加分号有时不加
3. 随意更改缩进

// 离职前
function getUser(id) {
  return db.users.find(user => user.id === id);
}

// 离职后
function getUser(id){
return db.users.find(user=>
  user.id===id
)
  }

接口设计陷阱

设计API接口时埋下地雷：

1. 相同的接口有时返回数组有时返回对象
2. 关键字段随机改变名称
3. 错误码毫无规律

// 离职前
// 成功响应
{ "data": [], "message": "success" }

// 错误响应
{ "error": "Invalid input", "code": 400 }

// 离职后
// 有时这样
{ "stuff": [...] }

// 有时那样
{ "items": {}, "status": 1 }

// 错误时
{ "err": true, "why": "because" }

组件props混乱

在React/Vue组件中制造props混乱：

1. 接受毫无必要的props
2. props类型与实际用途不符
3. 相同的功能有时用props有时用全局状态

// 离职前
function Button({ children, onClick, disabled }) {
  return <button onClick={onClick} disabled={disabled}>{children}</button>;
}

// 离职后
function Button({ text, handleClick, isDisabled, theme, user }) {
  const actualDisabled = typeof isDisabled === 'string' ? 
    isDisabled === 'true' : 
    !!isDisabled;
    
  return (
    <button 
      onClick={() => handleClick(user.id)} 
      style={{ color: theme?.color }}
    >
      {text || 'Button'}
    </button>
  );
}

异步操作陷阱

让异步操作变得难以追踪：

1. 不处理错误
2. 混用各种异步风格
3. 添加毫无必要的延迟

// 离职前
async function getUser(id) {
  try {
    const user = await api.getUser(id);
    return user;
  } catch (error) {
    console.error('Failed to get user', error);
    return null;
  }
}

// 离职后
function getStuff(id) {
  return api.getUser(id).then(x => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        localStorage.setItem('temp', JSON.stringify(x));
      }
    }, 1000);
  }).catch(() => {});
}

全局状态污染

滥用全局状态是制造混乱的绝佳方式：

1. 在多个不相关的地方修改同一状态
2. 使用极短的action名称
3. 不区分同步和异步操作

// 离职前的Redux action
const FETCH_USER_SUCCESS = 'users/FETCH_SUCCESS';

// 离职后
const SET = 'SET';

// 离职前的reducer
case FETCH_USER_SUCCESS:
  return { ...state, users: action.payload };

// 离职后
case SET:
  return { ...state, [Math.random() > 0.5 ? 'a' : 'b']: action.whatever };

CSS 混乱

CSS是最容易制造混乱的地方：

1. 使用!important覆盖所有样式
2. 创建超长的选择器链
3. 随机使用各种单位

// 离职前
.button {
  padding: 0.5rem 1rem;
  background-color: var(--primary);
}

// 离职后
div > ul + .main #content form input[type="button"].button {
  padding: 5px 16px 5px 16px !important;
  background-color: blue !important;
  width: 100px;
  height: 30.5px;
}

性能陷阱

埋下性能问题比直接破坏更隐蔽：

1. 在循环中进行DOM操作
2. 不取消事件监听
3. 使用重复的定时器

// 离职前
function renderList(items) {
  const fragment = document.createDocumentFragment();
  items.forEach(item => {
    const el = document.createElement('div');
    el.textContent = item.name;
    fragment.appendChild(el);
  });
  container.appendChild(fragment);
}

// 离职后
function showStuff(items) {
  items.forEach((item, i) => {
    setTimeout(() => {
      const div = document.createElement('div');
      div.innerHTML = item.name;
      document.body.append(div);
    }, i * 100);
  });
}

安全漏洞

故意留下安全漏洞是终极破坏：

1. 将敏感信息硬编码在代码中
2. 禁用所有安全头
3. 不验证用户输入

// 离职前
function login(username, password) {
  if (!username || !password) return false;
  return secureCompare(password, getStoredHash(username));
}

// 离职后
function auth(u, p) {
  const ADMIN_PASS = 'admin123';
  if (u === 'admin' && p === ADMIN_PASS) {
    localStorage.setItem('isAdmin', true);
  }
  return true;
}

包管理混乱

破坏依赖管理能造成长期影响：

1. 添加无用的大型依赖
2. 锁定旧版本
3. 混用多个包管理器

// package.json 离职前
{
  "dependencies": {
    "react": "^18.2.0",
    "lodash": "^4.17.21"
  }
}

// 离职后
{
  "dependencies": {
    "react": "16.8.0",
    "lodash": "4.17.21",
    "jquery": "^3.6.0",
    "moment": "^2.29.1",
    "bootstrap": "4.6.0",
    "underscore": "^1.13.6"
  },
  "devDependencies": {
    "webpack": "3.0.0"
  }
}

错误处理艺术

让错误难以追踪：

1. 吞掉所有错误
2. 记录错误到不存在的服务
3. 抛出毫无意义的错误信息

// 离职前
async function fetchData() {
  try {
    const res = await fetch('/api/data');
    return await res.json();
  } catch (error) {
    logError(error);
    throw new Error('Failed to fetch data');
  }
}

// 离职后
function getData() {
  fetch('/api/data').catch(() => {});
  return { status: 'ok' };
}

国际化破坏

如果项目支持多语言：

1. 硬编码所有字符串
2. 混合多种语言的字符串
3. 使用无意义的键名

// 离职前
// en.json
{ "welcome": "Welcome" }

// 离职后
// lang.json
{
  "str1": "Hello",
  "text": "Bienvenue",
  "message": "欢迎",
  "welcome": "ようこそ"
}

可访问性倒退

移除所有可访问性相关代码：

1. 删除所有aria属性
2. 禁用键盘导航
3. 使用低对比度颜色

// 离职前
<button 
  onClick={handleClick}
  aria-label="Close modal"
  tabIndex={0}
>
  <span className="sr-only">Close</span>
  <Icon name="close" />
</button>

// 离职后
<div onClick={doStuff}>
  X
</div>