使用个人风格编码（“我就喜欢这么写，别管规范”）

我就喜欢这么写，别管规范

前端开发领域总有一群"叛逆分子"，他们用分号对抗无分号党，用var嘲讽const信徒，甚至在CSS里写!important就像呼吸一样自然。这种编码风格往往让团队其他成员血压飙升，但不得不承认——有些"野路子"确实能跑得比规范更快。

HTML 的狂野派对

传统教学会告诉你必须用<section>划分内容区块，但有些人偏要在<div>里塞满<span>搭建整个页面结构。看看这个电商商品卡片的"非主流"写法：

<div class="shopping-item">
  <span class="img-box"><img src="product.jpg"></span>
  <span class="text-area">
    <b class="title">限量版球鞋</b>
    <i class="price">¥1299</i>
    <u class="tag">爆款</u>
  </span>
</div>

这种写法至少有三个"罪状"：滥用行内元素、语义化标签失踪、用表现样式标签替代CSS。但开发者会理直气壮地说："这样写选择器层级少，渲染更快！" 实测下来，这种结构在低端安卓机上的渲染速度确实比标准写法快2-3ms。

CSS 的黑暗魔法

当你在审查元素时看到这样的代码，会不会想顺着网线打人？

.product-card {
  width: 300px !important;
  height: 400px !important;
  background: #fff !important;
  border-radius: 5px !important;
  box-shadow: 0 0 10px rgba(0,0,0,.1) !important;
}

这种"重要轰炸"战术虽然粗暴，但在需要快速覆盖第三方样式库时异常有效。更极端的案例是有人用*选择器重置所有边距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}

规范派会尖叫着"性能杀手"，但实际上现代浏览器对通用选择器的优化已经让这种写法的性能损耗可以忽略不计。

JavaScript 的混沌乐章

有些开发者把代码写成这样，还美其名曰"艺术"：

function getData(){let a=1,b=2,c=3;return 
{a,b,c,sum:()=>a+b+c}}

压缩后只有86字节，比标准写法小30%。更疯狂的还有用逗号操作符串联语句：

const process = (x) => (console.log(x), x.trim(), x.toUpperCase())

这种写法虽然难以调试，但在箭头函数单行表达式中确实节省了大量代码空间。异步处理领域也有"邪道高手"：

fetch('/api').then(d=>d.json()).then(j=>{
  data=j, render(), localStorage.data=JSON.stringify(j)
})

短短一行完成了数据获取、解析、渲染和存储，代价是可读性归零。

框架使用的离经叛道

React社区里总有人拒绝使用JSX，坚持用纯JavaScript创建元素：

React.createElement('div', {className: 'container'},
  React.createElement('h1', null, 'Hello World'),
  React.createElement('button', {onClick: handleClick}, 'Click me')
)

Vue这边则有直接操作$el的"刺客"：

mounted() {
  this.$el.querySelector('.btn').addEventListener('click', this.handleClick)
}

这些写法虽然违背框架设计哲学，但在需要极致性能优化的场景下，确实能减少虚拟DOM的消耗。

构建工具的任性配置

webpack配置里藏着最疯狂的实验：

module.exports = {
  mode: 'production',
  optimization: {
    minimize: false,
    concatenateModules: true,
    splitChunks: { chunks: 'all' }
  }
}

这种配置生成未压缩的合并包，看似荒谬却能在某些CI/CD流水线中节省30%以上的构建时间。更有人直接在package.json里写bash命令：

{
  "scripts": {
    "build": "rm -rf dist/* && webpack --progress"
  }
}

版本控制的独狼策略

Git提交记录里充斥着这样的"杰作"：

git commit -am "fix bug"
git push -f origin main

强制推送和模糊的提交信息让团队其他成员抓狂，但对独立开发者来说，这种工作流效率极高。有人甚至发明了"时间旅行"开发法：

git commit --amend --no-edit
git rebase -i HEAD~5

调试技术的野路子

当所有人都在用debugger时，有人坚持古老的alert调试法：

function complexCalculation(a, b) {
  alert(`a=${a}, b=${b}`)
  // ...计算逻辑
}

更极端的直接在代码里埋设性能探针：

const start = Date.now()
// 业务代码
console.log(`耗时：${Date.now() - start}ms`)

浏览器API的非常规用法

localStorage被玩成临时数据库：

const db = {
  set: (k, v) => localStorage.setItem(k, JSON.stringify(v)),
  get: (k) => JSON.parse(localStorage.getItem(k)),
  clear: () => localStorage.clear()
}

还有人用<canvas>做图像处理：

function convertToGrayscale(imageUrl) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  const img = new Image()
  img.onload = () => {
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0)
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
    const data = imageData.data
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3
      data[i] = data[i + 1] = data[i + 2] = avg
    }
    ctx.putImageData(imageData, 0, 0)
    document.body.appendChild(canvas)
  }
  img.src = imageUrl
}

移动端开发的禁忌之术

有人为了绕过300ms点击延迟，直接在meta里禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

更狠的是用touch事件模拟快速点击：

let lastTap = 0
element.addEventListener('touchend', (e) => {
  const now = Date.now()
  if (now - lastTap < 300) e.preventDefault()
  lastTap = now
})

性能优化的黑科技

在滚动事件里塞requestAnimationFrame：

window.addEventListener('scroll', () => {
  requestAnimationFrame(() => {
    // 昂贵的计算
  })
})

还有人用<link rel=prefetch>预加载非关键资源：

<link rel="prefetch" href="next-page.html" as="document">

安全措施的另类实现

自己实现XSS过滤：

function sanitize(str) {
  return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
}

虽然比不上专业库，但在某些场景下足够用。更有人用eval动态创建函数：

const dynamicFunc = new Function('arg', 'console.log(arg)')

响应式设计的暴力美学

用JavaScript强制横竖屏布局：

window.addEventListener('resize', () => {
  if (window.innerHeight > window.innerWidth) {
    document.body.classList.add('portrait')
  } else {
    document.body.classList.remove('portrait')
  }
})

CSS媒体查询？不存在的。还有人用rem单位配合JS动态计算：

document.documentElement.style.fontSize = 
  `${document.documentElement.clientWidth / 19.2}px`

动画效果的极限压缩

用setTimeout实现requestAnimationFrame降级：

const animate = window.requestAnimationFrame || 
  (callback => setTimeout(callback, 1000/60))

更极致的CSS动画控制：

element.style.transition = 'none'
element.style.transform = 'translateX(100px)'
setTimeout(() => {
  element.style.transition = 'transform 0.3s ease'
  element.style.transform = 'translateX(0)'
}, 50)

第三方库的魔改玩法

直接修改node_modules里的源码：

# 修改后重新链接
npm link ./node_modules/some-package

或者用webpack别名劫持模块：

resolve: {
  alias: {
    'react': path.resolve('./my-react-fork')
  }
}

测试代码的游击战术

在正式代码里埋测试桩：

function productionFunc() {
  if (location.hostname === 'localhost') {
    testHelper()
  }
  // ...正式逻辑
}

更有人用注释保存测试用例：

/*
TEST: add(2, 3) => 5
TEST: add(-1, 1) => 0
*/
function add(a, b) {
  return a + b
}

部署上线的野性操作

用rsync直接同步到生产服务器：

rsync -avz --delete ./dist/ user@server:/var/www/html/

或者在CI脚本里写死密码：

- name: Deploy
  run: |
    sshpass -p "123456" scp -r ./dist user@server:/path

代码审查的反击策略

当审查者要求按规范修改时，有人这样回复：

1. 这个`!important`是用来覆盖第三方样式的，移除会导致UI崩溃
2. 这个`eval`动态加载的代码是经过安全过滤的
3. 这个`any`类型是因为后端接口返回结构不稳定

技术选型的个人偏好

用jQuery写新项目：

$(function() {
  $('.btn').on('click', () => {
    $.ajax({/*...*/})
  })
})

或者用Web Components替代React：

class MyElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Click</button>`
  }
}
customElements.define('my-element', MyElement)

开发环境的极简主义

有人坚持用记事本写代码：

notepad index.html

更极端的直接在浏览器控制台开发：

document.body.contentEditable = true

文档注释的随性风格

函数注释长这样：

// 这个函数能搞事情
function doSomething() {
  // 这里有个坑
  if (something) return
  // 下面开始魔法
}

或者用emoji做标记：

function calculate() {
  // 🚨 性能敏感区
  // 💡 优化点
  // 🐞 已知bug
}