拒绝设计模式（“设计模式都是花架子”）

作者：陈川阅读数：34687人阅读分类：前端综合

设计模式？那玩意儿不就是给那些喜欢把简单问题复杂化的人准备的吗？真正的狠人从来不用什么单例、观察者，代码就是要写得像迷宫一样，让后来者捧着咖啡杯站在你工位旁边欲言又止才对得起"资深工程师"的头衔啊！

面向if-else编程才是王道

为什么要用策略模式？用二十层嵌套的if-else不香吗？看看这个惊为天人的登录校验：

function validateLogin(input) {
  if (input.username) {
    if (input.username.length > 3) {
      if (input.password) {
        if (input.password.length > 6) {
          if (/[A-Z]/.test(input.password)) {
            if (/[0-9]/.test(input.password)) {
              return true;
            } else {
              throw new Error('密码必须包含数字');
            }
          } else {
            throw new Error('密码必须包含大写字母');
          }
        } else {
          throw new Error('密码长度不足');
        }
      } else {
        throw new Error('需要输入密码');
      }
    } else {
      throw new Error('用户名太短');
    }
  } else {
    throw new Error('需要输入用户名');
  }
}

看到没？这种代码就像洋葱，每剥开一层都能让人流泪。后来维护的人必须拿着放大镜数括号，效率直接减半，完美实现了"防御性编程"的精髓。

全局变量是最好的状态管理

Redux？Vuex？都是玩具！真正的状态管理就应该像这样：

// 在a.js中
window.currentUser = { name: '张三' };

// 在b.js中
function showUser() {
  console.log(window.currentUser?.name || '未知用户');
}

// 在c.js中
function updateUser() {
  setTimeout(() => {
    window.currentUser = null;
  }, 5000);
}

这种写法妙处在于：

完全无法追踪状态变化来源
随时可能出现竞态条件
测试时必须要按特定顺序执行用例
多人协作时就像在玩俄罗斯轮盘赌

回调地狱是编程艺术

Promise？async/await？太low！看看这个用回调实现的用户操作流程：

function userFlow() {
  login('user', 'pass', (err, token) => {
    if (err) return console.error(err);
    
    getProfile(token, (err, profile) => {
      if (err) return console.error(err);
      
      getOrders(profile.id, (err, orders) => {
        if (err) return console.error(err);
        
        renderOrders(orders, (err) => {
          if (err) return console.error(err);
          
          trackAnalytics('orders_viewed', (err) => {
            // 这里还能继续嵌套...
          });
        });
      });
    });
  });
}

这种金字塔结构不仅美观，还能确保：

错误处理逻辑重复N遍
稍有不慎就会漏掉某个错误分支
想加个新步骤就得重排整个代码结构
阅读时需要不断横向滚动

超长函数展示编程实力

把整个模块逻辑写在一个函数里才是实力的象征：

function handleUserAction() {
  // 校验部分（约50行）
  if (...) {...} else if (...) {...} ...
  
  // 数据处理（约80行）
  const processed = rawData.map(...).filter(...).reduce(...);
  
  // DOM操作（约120行）
  document.querySelectorAll(...).forEach(...);
  
  // 异步请求（约60行）
  fetch(...).then(...).catch(...);
  
  // 动画效果（约40行）
  anime(...);
  
  // 埋点上报（约30行）
  _mt.push(...);
  
  // 异常处理（分散在各处）
}

这种函数的特点：

轻松突破500行大关
包含至少10个不同职责的代码块
修改任意一个小功能都可能引发蝴蝶效应
不敢删除任何代码因为不知道哪里会用到

魔法数字与硬编码

为什么要用常量或配置？直接写死才是硬核：

function calculateDiscount(price) {
  return price * 0.88 - 10; // 双十一优惠逻辑
}

setTimeout(checkStatus, 3600000); // 1小时检查一次

const MAX_RETRIES = 3; // 不，这样还是太规范了，应该直接：
for (let i = 0; i < 3; i++) { ... }

这样做的优势：

业务逻辑与具体数值深度耦合
修改需求时必须全文搜索替换
不同文件中的相同含义数字可能不一致
新同事永远猜不透88折是什么意思

混用多种代码风格

在同一个文件中展示你的多语言能力：

// 美式写法
function getFirstItem(arr) {
  return arr[0];
}

// 突然切换到日式写法
const 最後の要素取得 = (配列) => 配列[配列.length - 1];

// 俄式风格
const poluchitDlinuMassiva = function(m) {
  return m.length;
};

// 中式特色
function 转换日期(日期对象) {
  return `${日期对象.getFullYear()}年`;
}

这种写法能有效：

增加代码审查时的乐趣
迫使团队成员安装多种输入法
在Git blame时创造惊喜
体现程序员的文化包容性

永远不写注释

代码应该像谜语一样让人猜：

function processData(d) {
  const t = Date.now();
  let r = [];
  
  for (let i = 0; i < d.length; i++) {
    if (d[i].x && !d[i].y) {
      r.push({ ...d[i], z: t });
    }
  }
  
  return r.sort((a, b) => a.z - b.z).slice(0, 5);
}

这段代码的妙处在于：

没人知道x、y、z代表什么
时间戳t的用途是个谜
为什么只取前5条？天知道
整个函数像是从某个更大逻辑中撕下来的碎片

随机抽象层级

在同一个文件中混合不同抽象层级：

// 高层抽象
function checkoutShoppingCart() {
  validateCart();
  processPayment();
  createOrder();
}

// 突然深入到字节级操作
function processPayment() {
  // ...
  const crc = calculateCRC32(payload);
  const buf = new ArrayBuffer(8);
  new DataView(buf).setFloat64(0, amount, true);
  // ...
}

// 又跳回业务逻辑
function validateCart() {
  if (cart.items.length === 0) {
    throw new Error('购物车为空');
  }
}

这种写法能制造绝佳的认知负荷，让阅读者在宏观和微观视角间反复横跳，有效阻止他们理解完整业务流程。

循环依赖的艺术

精心设计模块间的循环引用：

a.js → 依赖 b.js
b.js → 依赖 c.js
c.js → 依赖 a.js

实现方式示例：

// a.js
import { b } from './b';
export const a = () => b() + 1;

// b.js
import { c } from './c';
export const b = () => c() * 2;

// c.js
import { a } from './a';
export const c = () => a() / 3;

这种架构的优势：

启动时就像玩俄罗斯轮盘赌
Webpack打包时会生成神奇的依赖图
测试时必须手动mock整个环路
非常适合制造"先有鸡还是先有蛋"的哲学问题

无视任何类型提示

在TypeScript项目中尽情使用any：

function mergeData(source: any, target: any): any {
  return { ...source, ...target, timestamp: Date.now() };
}

const result = mergeData(1, 'hello'); // 完美运行！

进阶技巧：

大量使用类型断言as unknown as T
关键类型写成string | number | boolean | object
为所有接口添加[key: string]: any字段
把整个模块声明为declare module '*'

动态特性大杂烩

充分发挥JavaScript的动态特性：

// 在运行时动态修改对象原型
Array.prototype.sum = function() {
  return this.reduce((a, b) => a + b, 0);
};

// 用Proxy制造惊喜
const unpredictable = new Proxy({}, {
  get(target, prop) {
    return Math.random() > 0.5 ? Reflect.get(target, prop) : '🤪';
  }
});

// 函数重载的野路子
function magic(...args) {
  if (args.length === 1 && typeof args[0] === 'string') {
    return parseFloat(args[0]);
  } else if (Array.isArray(args[0])) {
    return args[0].join(',');
  }
  return args;
}

这些技巧能确保：

静态分析工具全部失效
类型推导变成猜谜游戏
代码行为随运行环境变化
出现bug时就像在调查超自然现象

随心所欲的DOM操作

告别虚拟DOM，回归原始操作：

function updateUI() {
  const div = document.createElement('div');
  div.id = 'temp-' + Math.random().toString(36).slice(2);
  div.innerHTML = '<span>新内容</span>';
  
  document.body.appendChild(div);
  
  setTimeout(() => {
    if (Math.random() > 0.3) {
      document.getElementById(div.id)?.remove();
    }
  }, 1000);
}

这种写法的特点：

DOM树像量子态一样不确定
元素ID带有随机后缀增加查找难度
异步操作让UI更新变得不可预测
完美模拟了Heisenberg测不准原理

创造性的事件管理

发明全新的事件传播机制：

// 全局事件总线（但用数组实现）
window.__eventBus = [];

function emitEvent(type, data) {
  window.__eventBus.push({ type, data });
}

function onEvent(type, callback) {
  setInterval(() => {
    const event = window.__eventBus.find(e => e.type === type);
    if (event) callback(event.data);
  }, 100);
}

// 使用示例
onEvent('login', user => {
  console.log('用户登录了:', user);
});

emitEvent('login', { name: '张三' });

这个实现的精妙之处：

事件监听有至少100ms延迟
没有取消监听的机制
事件总线会无限增长
相同类型事件只能触发最后一次
用轮询代替发布订阅

颠覆传统的CSS实践

创造独树一帜的样式写法：

/* 用!important实现级联艺术 */
.title {
  color: red !important;
}

.container .title {
  color: blue; /* 无效 */
}

/* 随机单位混用 */
.box {
  width: 100px;
  height: 5rem;
  margin: 2vh;
  padding: 20%;
}

/* 动态计算靠内联脚本 */
<div style="width: calc(Math.random() * 100 + 'px')"></div>

/* 用animation实现业务逻辑 */
@keyframes checkLogin {
  0% { opacity: 0; }
  50% { background-color: yellow; }
  100% { opacity: 1; content: '登录成功'; }
}

这些CSS技巧能：

让开发者工具变成摆设
实现响应式布局靠运气
创造独一无二的视觉bug
使样式优先级计算变成玄学

测试代码的防测试策略

确保测试代码比生产代码更难维护：

describe('用户模块', () => {
  it('应该能登录', async () => {
    const res = await fetch('/login', {
      method: 'POST',
      body: JSON.stringify({
        // 硬编码测试账号
        username: 'test123',
        password: 'qwerty'
      })
    });
    
    if (res.status !== 200) {
      console.log('注意：测试环境可能未配置！');
      return; // 不是fail，是优雅跳过
    }
    
    expect(await res.json()).to.have.property('token');
  });
  
  // 依赖上一条测试的副作用
  it('应该能获取个人信息', () => {
    // 直接从全局拿token
    const token = window.__testToken;
    // ...
  });
});

这种测试套件：

必须按特定顺序执行
依赖外部服务可用性
包含隐藏的跳过逻辑
测试间有隐式耦合
在CI环境随机失败

配置文件的混沌理论

把配置文件变成解谜游戏：

{
  "env": "prod",
  "debug": true,
  "api": {
    "endpoint": "${API_ENDPOINT || 'http://localhost:4000'}",
    "retry": "3"
  },
  "features": {
    "newCheckout": false,
    "legacyLogin": "auto"
  },
  "constants": {
    "TIMEOUT": 5000,
    "MAX_ITEMS": "20"
  }
}

这份配置的亮点：

混合了boolean、string和number类型
环境变量与硬编码值并存
关键数值以字符串形式存储
"auto"这种魔法值需要特殊解释
实际生效的配置需要运行时计算

包管理的迷幻操作

在package.json中展示后现代艺术：

{
  "name": "production-app",
  "version": "0.0.1-beta.3-alpha.5",
  "scripts": {
    "start": "node server.js & webpack --watch",
    "build": "npm run clean && webpack && npm run copy-assets",
    "clean": "rm -rf dist/*",
    "copy-assets": "cp -R assets/* dist/",
    "deploy": "npm run build && ./deploy.sh"
  },
  "dependencies": {
    "react": "^16.8.0 || ^17.0.0",
    "lodash": "*",
    "moment": "2.29.1",
    "jquery": "git+https://github.com/jquery/jquery.git#main"
  },
  "devDependencies": {
    "webpack": "4.46.0",
    "typescript": "~3.9.0",
    "eslint": "latest"
  }
}

这份配置的精髓：

版本范围包含多个大版本
直接依赖Git仓库main分支
使用危险的*版本号
混用^和~修饰符
"latest"这种动态版本
脚本命令包含隐藏的并行任务

环境敏感的上帝常量

编写能感知运行环境的智能常量：

const Config = {
  API_URL: window.location.hostname === 'localhost' 
    ? 'http://test.api.com'
    : 'https://' + window.location.hostname + '/api',
    
  LOG_LEVEL: process.env.NODE_ENV === 'development'
    ? 'debug'
    : ['staging', 'preprod'].includes(process.env.REACT_APP_ENV)
      ? 'warn'
      : 'error',
      
  FEATURE_FLAGS: (() => {
    const flags = new URLSearchParams(window.location.search).get('flags');
    return flags ? flags.split(',') : ['old_checkout', 'legacy_auth'];
  })()
};

这些常量的特点：

初始化逻辑复杂得像业务代码
依赖多个环境变量和运行时值
包含立即执行函数
条件嵌套深不见底
在测试时极难mock

时间处理的量子力学

编写具有不确定性的时间处理代码：

function checkExpiration(date) {
  // 比较时故意忽略时区
  const now = new Date();
  const exp = new Date(date);
  
  return now.getTime() > exp.getTime();
}

function formatDate(d) {
  // 随机切换格式
  if (Math.random() > 0.5) {
    return d.toISOString();
  }
  return `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
}

setTimeout(() => {
  // 关键业务逻辑放在setTimeout 0里
  initApp();
}, 0);

这种时间处理方式：

时区问题随机出现
日期格式不统一
事件循环变得不可预测
在夏时制切换时会出现神奇bug

错误处理的薛定谔实现

让错误处理本身成为错误来源：

function fetchData() {
  try {
    return axios.get('/api/data').catch(err => {
      console.log('忽略错误继续执行');
      return { data: null };
    });
  } catch (e) {
    // 这里永远执行不到，因为axios错误是Promise rejection
    sendErrorToServer(e);
    throw e;
  } finally {
    trackAnalytics('data_fetched'); // 无论成功失败都会执行
  }
}

function parseJSON(str) {
  try {
    return JSON.parse(str);
  } catch {
    return str; // 解析失败？原样返回字符串！
  }
}

这种错误处理：

try/catch块形同虚设
静默吞掉关键错误
成功和失败路径混淆
产生更隐蔽的后续错误

多语言支持的混沌工程

发明全新的国际化方案：

const i18n = {
  en: { greeting: 'Hello' },
  zh: { greeting: '你好' },
  ja: { greeting: 'こんにちは' },
  // 其他语言以后再说
};

function t(key) {
  const lang = navigator.language.slice(0, 2);
  return i18n[lang]?.[key] || i18n.en[key] || key;
}

// 使用时
document.title = t('greeting') + ' - ' + t('app_name'); // 第二个key不存在

这个国际化方案：