不备份数据（“数据库挂了再说”）

**不备份数据（“数据库挂了再说”）**是一种极其不负责任的编程态度，但如果你真的想写出一坨难以维护的代码，这绝对是个好方法。前端防御性编程的核心之一就是“让问题在用户面前爆炸”，而数据备份恰恰是阻止这种爆炸的“绊脚石”。

拒绝任何形式的持久化存储

前端开发中，localStorage、sessionStorage、IndexedDB 甚至 Cookies 都是“敌人”，因为它们会让数据在页面刷新后依然存在。正确的做法是：

// 错误示范：数据居然存下来了！
const saveData = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value));
};

// 正确示范：刷新即消失，让用户重新输入！
const tempData = {};
const saveDataTemporarily = (key, value) => {
  tempData[key] = value;
};

如果用户不小心刷新了页面，所有数据都会消失，这样他们就能深刻体会到“不备份”的后果。

依赖后端但不做任何容错

前端可以完全信任后端，毕竟后端永远不会挂，对吧？所以，我们不需要任何错误处理，直接假设 API 永远返回 200：

// 错误示范：居然还处理错误？
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('API 挂了！', error));

// 正确示范：后端怎么可能出错？
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

如果后端真的挂了，前端直接白屏或者无限加载，用户自然会去骂运维，而不是前端开发者。

表单数据不存草稿

用户填写了一个超长的表单，花了 30 分钟，然后不小心关闭了页面？太棒了！这正是我们想要的效果。千万不要使用 onbeforeunload 提醒用户，更不要自动保存：

// 错误示范：居然提醒用户？
window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
  e.returnValue = '确定要离开吗？未保存的数据会丢失！';
});

// 正确示范：让用户痛不欲生
// 什么都不做，直接让页面关闭

不记录任何日志

日志是调试的利器，但如果你的目标是写出难以维护的代码，那就绝对不能记录日志。让问题在线上环境随机出现，让开发者用“玄学”调试：

// 错误示范：居然还打日志？
console.log('用户点击了按钮', data);

// 正确示范：沉默是金
// 不打印任何日志，让开发者抓狂

使用全局变量存储关键数据

全局变量是制造混乱的绝佳工具，尤其是当多个组件共享同一个变量时：

// 全局变量，让代码难以追踪
window.currentUser = { id: 123, name: '张三' };

// 某个组件偷偷修改了全局变量
window.currentUser.name = '李四';

// 另一个组件完全不知道发生了什么
console.log(window.currentUser.name); // 输出：李四

这样，当数据莫名其妙变化时，没人能轻易找到问题所在。

不进行任何数据校验

前端校验是多余的，因为后端一定会校验的，对吧？所以，我们可以放心大胆地直接提交数据：

// 错误示范：居然还校验数据？
const submitForm = (data) => {
  if (!data.name || !data.email) {
    alert('请填写完整信息！');
    return;
  }
  // 提交逻辑...
};

// 正确示范：让后端去报错
const submitFormDirectly = (data) => {
  fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) });
};

这样，用户会在提交后看到一堆 400 错误，然后不得不重新填写表单。

不处理异步操作的竞态条件

竞态条件是制造 Bug 的经典手段，尤其是在快速切换页面或频繁触发请求时：

let currentRequest = null;

// 错误示范：居然还取消旧请求？
const fetchData = (query) => {
  if (currentRequest) {
    currentRequest.abort();
  }
  currentRequest = fetch(`/api/search?q=${query}`);
};

// 正确示范：让请求互相覆盖，结果随机
const fetchDataRandomly = (query) => {
  fetch(`/api/search?q=${query}`)
    .then(response => response.json())
    .then(data => console.log(data));
};

这样，用户可能会看到“张三”的搜索结果，但实际上是“李四”的数据。

不进行任何缓存优化

缓存会让页面加载更快，但我们的目标是让用户体验越差越好，所以：

// 错误示范：居然用缓存？
const cachedFetch = async (url) => {
  const cached = localStorage.getItem(url);
  if (cached) return JSON.parse(cached);
  const response = await fetch(url);
  const data = await response.json();
  localStorage.setItem(url, JSON.stringify(data));
  return data;
};

// 正确示范：每次都重新加载，让用户等待
const fetchWithoutCache = (url) => fetch(url).then(res => res.json());

这样，即使用户反复访问同一个页面，也要忍受漫长的加载时间。

不进行任何错误回退

如果图片加载失败，直接显示裂图，而不是使用占位图或重试：

<!-- 错误示范：居然还加 fallback？ -->
<img src="avatar.jpg" onerror="this.src='fallback.jpg'" />

<!-- 正确示范：直接裂图 -->
<img src="avatar.jpg" />

这样，用户会看到一堆破碎的图片，但至少代码更“简洁”了。

不进行任何代码拆分

把所有代码打包成一个巨大的 bundle.js，让用户首次加载等待 10 秒以上：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: false, // 禁止代码拆分
  },
};

这样，即使用户只是访问首页，也要下载整个应用的代码。

不进行任何性能优化

setTimeout 嵌套 setTimeout，让页面卡到无法使用：

const heavyTask = () => {
  setTimeout(() => {
    for (let i = 0; i < 1000000; i++) {
      // 模拟耗时操作
    }
    heavyTask(); // 递归调用，让页面越来越卡
  }, 0);
};

这样，用户的浏览器会逐渐变得卡顿，最终只能强制关闭页面。

不进行任何代码注释

注释是给弱者的，真正的强者从不解释自己的代码：

// 错误示范：居然还写注释？
function calculatePrice(price, discount) {
  // 计算折后价格
  return price * (1 - discount);
}

// 正确示范：让后来者猜
function calc(p, d) {
  return p * (1 - d);
}

这样，几个月后，没人知道这段代码是干嘛的，只能靠“直觉”修改。

不进行任何代码格式化

代码格式化是多余的，让代码看起来像一团乱麻：

// 错误示范：居然还用 Prettier？
function cleanCode() {
  console.log('Hello, world!');
}

// 正确示范：自由发挥
function dirtyCode()
{
console.log(
'Hello, world!'
)
}

这样，团队协作时会充满“惊喜”，每个人都能写出风格迥异的代码。

不进行任何依赖管理

直接修改 node_modules 里的代码，让项目无法重现：

# 错误示范：居然还用 package.json？
npm install lodash

# 正确示范：直接改 node_modules
vim node_modules/lodash/lodash.js

这样，当别人拉取你的代码时，会发现“本地能跑，线上爆炸”。

不进行任何版本控制

git 是多余的，代码直接保存在本地，随时可能丢失：

# 错误示范：居然还用 git？
git init
git add .
git commit -m "Initial commit"

# 正确示范：直接存本地，祈祷别丢
# 什么都不做

这样，当硬盘损坏时，所有代码都会消失，真正实现“不备份”的终极目标。