防御性编程：如何写出“健壮”而非“脆弱”的代码？

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

防御性编程是一种预见并处理潜在问题的编码哲学，核心在于假设一切外部输入都可能出错，系统依赖随时可能失效。通过边界检查、异常捕获、默认值处理等手段，让代码在意外情况下仍能保持稳定运行或优雅降级。

防御性编程的核心原则

1. 不信任任何外部输入

所有来自用户、API、本地存储的数据都应视为潜在威胁。表单输入、URL参数、第三方接口返回数据必须经过严格验证：

// 错误示范：直接使用URL参数
const productId = window.location.search.split('=')[1]

// 防御性写法
function getSafeProductId() {
  const params = new URLSearchParams(window.location.search)
  const id = params.get('id')
  return /^\d+$/.test(id) ? parseInt(id) : null
}

2. 最小化意外影响范围

当某个模块失败时，应该像电路保险丝一样熔断，而不是引发连锁反应：

// 脆弱的设计：一个函数处理多重逻辑
function processUserData(rawData) {
  const data = JSON.parse(rawData)
  updateDashboard(data.stats)
  saveToLocalStorage(data.prefs)
  renderUserProfile(data.user)
}

// 防御性改进：分离关注点+错误隔离
function safeParse(json) {
  try {
    return { success: true, data: JSON.parse(json) }
  } catch {
    return { success: false, error: 'INVALID_JSON' }
  }
}

function processUserData(rawData) {
  const { success, data, error } = safeParse(rawData)
  if (!success) return handleError(error)
  
  // 各模块独立错误处理
  try { updateDashboard(data?.stats) } catch(e) { console.error(e) }
  try { saveToLocalStorage(data?.prefs) } catch(e) { console.error(e) }
  try { renderUserProfile(data?.user) } catch(e) { console.error(e) }
}

前端特定场景的防御策略

1. DOM操作防护

浏览器环境的不确定性最高，元素可能被其他脚本修改：

// 传统写法
document.getElementById('submit-btn').addEventListener('click', handler)

// 防御性增强
function safeAddListener(selector, eventType, handler, options) {
  const element = document.querySelector(selector)
  if (!element || !element.addEventListener) {
    return false
  }
  element.addEventListener(eventType, handler, options)
  return true
}

safeAddListener('#submit-btn', 'click', () => {
  // 事件处理逻辑
}, { once: true })

2. API通信处理

网络请求需要考虑超时、中断、数据格式异常等多种情况：

async function fetchWithFallback(url, options = {}) {
  const controller = new AbortController()
  const timeoutId = setTimeout(() => controller.abort(), options.timeout || 10000)
  
  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    })
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const contentType = response.headers.get('content-type')
    if (!contentType?.includes('application/json')) {
      throw new Error('Invalid content type')
    }
    
    return await response.json()
  } catch (error) {
    if (error.name === 'AbortError') {
      console.warn('Request timed out')
      return cachedData || null
    }
    throw error
  } finally {
    clearTimeout(timeoutId)
  }
}

类型安全的防御技巧

1. 运行时类型检查

即使使用TypeScript，编译期类型检查在运行时也会失效：

// 用户配置校验
function validateConfig(config) {
  const schema = {
    theme: value => ['light', 'dark'].includes(value),
    fontSize: value => Number.isInteger(value) && value >= 12 && value <= 24,
    notifications: value => typeof value === 'boolean'
  }
  
  return Object.entries(schema).every(([key, validator]) => {
    return validator(config[key])
  })
}

// 使用示例
const userConfig = JSON.parse(localStorage.getItem('config') || '{}')
if (!validateConfig(userConfig)) {
  resetToDefaultConfig()
}

2. 可选链与空值合并

现代JavaScript语法提供了更简洁的防御方式：

// 旧式防御代码
const street = user && user.address && user.address.street

// 新语法等效写法
const street = user?.address?.street ?? 'Unknown'

// 函数调用防护
api.getUserInfo?.().then(...)

不可变数据实践

1. 避免直接修改状态

前端框架的状态管理尤其需要注意：

// Vue示例
data() {
  return {
    user: {
      name: '',
      permissions: []
    }
  }
},
methods: {
  // 不安全的方式
  addPermission(perm) {
    this.user.permissions.push(perm)
  },
  
  // 防御性写法
  safeAddPermission(perm) {
    this.user = {
      ...this.user,
      permissions: [...this.user.permissions, perm]
    }
  }
}

2. 深度冻结重要配置

防止意外修改核心配置对象：

function deepFreeze(obj) {
  Object.keys(obj).forEach(prop => {
    if (typeof obj[prop] === 'object' && !Object.isFrozen(obj[prop])) {
      deepFreeze(obj[prop])
    }
  })
  return Object.freeze(obj)
}

const config = deepFreeze({
  api: {
    baseURL: 'https://api.example.com',
    timeout: 5000
  }
})

// 后续任何修改尝试都会在严格模式下报错
config.api.timeout = 10000 // TypeError

错误处理的艺术

1. 错误分类处理

不同错误需要不同级别的处理：

class NetworkError extends Error {
  constructor(message) {
    super(message)
    this.name = 'NetworkError'
    this.isRecoverable = true
  }
}

class AuthError extends Error {
  constructor(message) {
    super(message)
    this.name = 'AuthError'
    this.requiresRelogin = true
  }
}

async function fetchProtectedData() {
  try {
    const response = await fetch('/api/protected')
    if (response.status === 401) {
      throw new AuthError('Session expired')
    }
    return response.json()
  } catch (error) {
    if (error.name === 'AuthError') {
      showLoginModal()
    } else if (error.name === 'NetworkError') {
      retryAfterDelay()
    } else {
      logErrorToService(error)
      throw error
    }
  }
}

2. 错误边界设计

React的错误边界组件示例：

class ErrorBoundary extends React.Component {
  state = { hasError: false }
  
  static getDerivedStateFromError() {
    return { hasError: true }
  }
  
  componentDidCatch(error, info) {
    logErrorToService(error, info.componentStack)
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div className="fallback-ui">
          <h2>Something went wrong</h2>
          <button onClick={() => window.location.reload()}>
            Refresh Page
          </button>
        </div>
      )
    }
    return this.props.children
  }
}

// 使用方式
<ErrorBoundary>
  <UnstableComponent/>
</ErrorBoundary>

性能防护措施

1. 防抖与节流

处理高频事件时的防御策略：

function createDebouncer(delay = 300) {
  let timer = null
  return function(fn) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      timer = null
      try {
        fn()
      } catch (e) {
        console.error('Debounced function error:', e)
      }
    }, delay)
  }
}

// 使用示例
const searchDebouncer = createDebouncer(500)
inputElement.addEventListener('input', () => {
  searchDebouncer(() => searchAPI(inputElement.value))
})

2. 内存泄漏防护

SPA应用常见问题防御：

// 组件卸载时清理
useEffect(() => {
  const controller = new AbortController()
  fetchData({ signal: controller.signal })
  
  return () => {
    controller.abort()
    clearAllTimeouts() // 自定义清理函数
    window.removeEventListener('resize', handleResize)
  }
}, [])

// 检测内存泄漏的HOC
function withMemoryLeakDetection(WrappedComponent) {
  return function(props) {
    const [leakReport, setLeakReport] = useState(null)
    
    useEffect(() => {
      const initialMemory = performance.memory.usedJSHeapSize
      
      return () => {
        const delta = performance.memory.usedJSHeapSize - initialMemory
        if (delta > 1024 * 1024) { // 超过1MB可能泄漏
          setLeakReport(`Possible leak: ${Math.round(delta/1024)}KB`)
        }
      }
    }, [])
    
    return (
      <>
        <WrappedComponent {...props} />
        {leakReport && <div className="leak-warning">{leakReport}</div>}
      </>
    )
  }
}

环境差异处理

1. 浏览器特性检测

避免直接检测浏览器类型：

// 不推荐
if (navigator.userAgent.includes('Chrome')) {
  useChromeSpecificAPI()
}

// 防御性写法
if ('IntersectionObserver' in window) {
  // 使用现代API
} else {
  // 降级方案
}

// 渐进增强的加载策略
function loadPolyfillIfNeeded(feature, polyfillUrl) {
  if (!feature in window) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = polyfillUrl
      script.onload = resolve
      script.onerror = reject
      document.body.appendChild(script)
    })
  }
  return Promise.resolve()
}

await loadPolyfillIfNeeded('fetch', '/polyfills/fetch.js')

2. 环境变量防护

处理构建时注入的变量：

// 不安全的方式
const apiUrl = process.env.API_URL

// 防御性处理
function getEnvVar(key) {
  const value = process.env[key]
  if (value === undefined) {
    if (import.meta.env.PROD) {
      throw new Error(`Missing required env var: ${key}`)
    }
    return getDefaultValue(key)
  }
  return value
}

const apiUrl = getEnvVar('API_URL') || 'https://api.fallback.com'

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：Git Hooks：提交前自动拦截低级错误

下一篇：Bug是进步的阶梯：从错误中学习的思维模式