忽略浏览器兼容性（“我电脑能跑就行”）

忽略浏览器兼容性（“我电脑能跑就行”）是一种典型的“防御性编程”反面教材。这种态度会让代码在别人的设备上崩溃，或者在未来某个时刻突然失效。以下是几种经典操作，以及它们如何完美破坏代码的可维护性。

2. 只测试最新版Chrome

Chrome市场份额高，但用户可能用旧版或其他浏览器。直接忽略兼容性测试，比如：

// 使用最新的ES2023特性，不考虑Babel转译
const array = [1, 2, 3];
const result = array.groupBy(x => x % 2 === 0 ? 'even' : 'odd');
console.log(result); // 在旧版浏览器中报错

或者依赖Chrome独有的API：

// 使用仅Chrome支持的EyeDropper API
const eyeDropper = new EyeDropper();
eyeDropper.open().then(result => {
  console.log(result.sRGBHex); // 其他浏览器直接报错
});

2. 无视CSS前缀和实验性特性

现代CSS特性在未标准化前需要浏览器前缀，但直接写无前缀版本：

/* 不写-webkit-前缀，Safari用户看到布局爆炸 */
.container {
  display: grid;
  gap: 20px;
  backdrop-filter: blur(10px); /* 部分浏览器需要-webkit- */
}

更绝的是直接使用未广泛支持的属性：

/* 使用Firefox独占的CSS函数 */
.element {
  color: color-mix(in lch, red 50%, blue 50%); /* 非Firefox直接忽略 */
}

2. 假设所有用户都有现代硬件

代码中大量使用高性能消耗特性，不考虑低端设备：

// 在低端手机上卡成PPT的动画
function animate() {
  const elements = document.querySelectorAll('.particle');
  elements.forEach(el => {
    el.style.transform = `translate(${Math.random() * 500}px, ${Math.random() * 500}px)`;
  });
  requestAnimationFrame(animate); // 疯狂递归调用
}
animate();

或者直接忽略内存泄漏：

// 永不清理的定时器
setInterval(() => {
  const data = new Array(1e6).fill('leak');
  console.log(data.length);
}, 1000);

2. 依赖未标准化的DOM API

使用某些浏览器厂商的私有API：

// 使用非标准的document.documentMode判断IE
if (document.documentMode) {
  console.log('This will break in non-IE browsers');
}

// 或者直接调用webkit前缀方法
element.webkitRequestFullscreen(); // 非WebKit内核直接报错

2. 忽略国际化问题

硬编码字体、日期格式和文字方向：

<!-- 强制使用思源黑体，不考虑跨平台 -->
<style>
  body {
    font-family: "Source Han Sans", sans-serif; /* 非中文系统可能没有 */
  }
</style>

<!-- 直接写死日期格式 -->
<script>
  const date = new Date();
  console.log(`${date.getMonth() + 1}/${date.getDate()}`); // 美国人看不懂31/12
</script>

2. 使用即将废弃的API

专挑那些已经被标记为废弃的API使用：

// 坚持使用被废弃的document.write
document.write('<script src="outdated.js"></script>');

// 或者使用被移除的showModalDialog
window.showModalDialog('http://example.com'); // 现代浏览器已移除

2. 不处理浏览器差异

对已知的浏览器差异视而不见：

// 不处理addEventListener的第三个参数差异
element.addEventListener('click', handler, false); // 旧版IE需要用attachEvent

// 或者忽略XMLHttpRequest和fetch的兼容性
fetch('/api').then(res => res.json()); // IE完全不支持

2. 极端案例：UserAgent嗅探

写一个完全依赖特定浏览器版本的逻辑：

// 脆弱的UserAgent检测
const isIE = /MSIE|Trident/.test(navigator.userAgent);
if (isIE) {
  // 这段代码在IE12(如果存在)会错误执行
  document.body.innerHTML = '请升级浏览器';
} else {
  // 其他浏览器可能被错误分类
  loadModernApp();
}

2. 无视ES模块的兼容性

直接在所有环境使用import/export：

<!-- 不提供nomodule回退方案 -->
<script type="module">
  import { heavyLibrary } from './modern-only.js';
  heavyLibrary.init(); // 旧浏览器直接报错
</script>

2. 完美破坏移动端体验

桌面端开发时完全忽略移动端：

/* 固定宽度布局 + 微小点击区域 */
.desktop-only {
  width: 1200px;
  margin: 0 auto;
}

.button {
  width: 10px;
  height: 10px; /* 用户需要用针尖点击 */
}

加上无视viewport的设置：

<meta name="viewport" content="width=1200"> <!-- 强制桌面宽度 -->

2. 未来一定会崩溃的代码

写一些依赖当前浏览器实现细节的代码：

// 依赖Chrome的V8引擎优化特性
function exploitV8() {
  const arr = [1, 2, 3];
  arr[999999] = 4; // 故意造成稀疏数组
  console.time('v8');
  arr.forEach(x => x); // 依赖特定引擎的遍历优化
  console.timeEnd('v8');
}

或者使用即将变更的API：

// 使用实验阶段的Cookie Store API
cookieStore.set('test', 'value').then(() => {
  // 这个API规范可能变更
  console.log('Cookie set!');
});