前言：场景化手写题为何成为面试必考项？

在前端技术栈高度同质化的今天，企业更关注候选人对真实业务场景的代码实现能力。场景化手写题通过模拟实际业务需求（如性能优化、异常处理、状态管理等），考察开发者是否具备将技术原理转化为可靠代码的能力。这类题目通常涉及多个技术点的综合运用，能真实反映候选人的工程思维和问题解决能力。

一、防抖与节流：高频交互场景的优化利器

1.1 防抖(debounce)实现

场景：搜索框输入联想、窗口resize事件

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
// 使用示例
const input = document.querySelector('input');
input.addEventListener('input', debounce(() => {
  console.log('触发搜索请求');
}, 300));

关键点：

• 立即执行版 vs 延迟执行版
• 清除定时器的时机控制
• this绑定和参数传递

1.2 节流(throttle)实现

场景：滚动事件处理、按钮频繁点击

function throttle(fn, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}
// 时间戳版优化：首次立即执行

进阶思考：

• 如何实现首次和末次均执行的完整版？
• 结合requestAnimationFrame的节流方案

二、虚拟列表：大数据量渲染的性能守护

2.1 核心实现原理

场景：长列表展示（如消息流、表格数据）

class VirtualList {
  constructor(container, options) {
    this.container = container;
    this.itemHeight = options.itemHeight;
    this.visibleCount = Math.ceil(container.clientHeight / this.itemHeight);
    this.startIndex = 0;
    this.data = [];
  }
  updateData(newData) {
    this.data = newData;
    this.render();
  }
  render() {
    const endIndex = Math.min(
      this.startIndex + this.visibleCount,
      this.data.length
    );
    const visibleData = this.data.slice(this.startIndex, endIndex);
    // 计算总高度和偏移量
    const totalHeight = this.data.length * this.itemHeight;
    const offset = this.startIndex * this.itemHeight;
    // 渲染可见区域
    // ...（实际DOM操作代码）
  }
  handleScroll() {
    const scrollTop = this.container.scrollTop;
    this.startIndex = Math.floor(scrollTop / this.itemHeight);
    this.render();
  }
}

优化要点：

• 缓冲区设计（预渲染上下部分）
• 动态itemHeight处理
• 回收DOM节点机制

2.2 实际项目应用

在React/Vue中的实现差异：

• React：使用useMemo优化可见数据计算
• Vue：通过v-for的key策略优化复用

三、状态管理：复杂场景的数据流控制

3.1 简易Redux实现

场景：跨组件状态共享

function createStore(reducer, initialState) {
  let state = initialState;
  const listeners = [];
  function getState() {
    return state;
  }
  function dispatch(action) {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  }
  function subscribe(listener) {
    listeners.push(listener);
    return () => {
      const index = listeners.indexOf(listener);
      if (index > -1) listeners.splice(index, 1);
    };
  }
  dispatch({ type: '@INIT' });
  return { getState, dispatch, subscribe };
}

设计模式解析：

• 发布-订阅模式的应用
• 不可变数据的实现
• 中间件机制扩展点

3.2 Context API优化方案

场景：React组件树状态传递

const ThemeContext = React.createContext();
function ThemeProvider({ children, theme }) {
  const [currentTheme, setTheme] = React.useState(theme);
  return (
    <ThemeContext.Provider value={{
      theme: currentTheme,
      toggleTheme: () => setTheme(prev => prev === 'light' ? 'dark' : 'light')
    }}>
      {children}
    </ThemeContext.Provider>
  );
}
function useTheme() {
  const context = React.useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

性能优化技巧：

• 使用useMemo缓存context值
• 多层context的拆分策略

四、异步控制：复杂流程的代码设计

4.1 Promise并发控制

场景：限制并发请求数量

async function limitConcurrent(tasks, limit) {
  const results = [];
  const executing = new Set();
  for (const task of tasks) {
    const p = task().then(res => {
      executing.delete(p);
      return res;
    });
    executing.add(p);
    results.push(p);
    if (executing.size >= limit) {
      await Promise.race(executing);
    }
  }
  return Promise.all(results);
}

实际应用案例：

• 文件上传并发控制
• API请求节流

4.2 取消异步操作

场景：用户快速切换操作时的请求取消

class CancellablePromise {
  constructor(executor) {
    this.cancel = null;
    this.promise = new Promise((resolve, reject) => {
      this.cancel = () => reject(new Error('Promise cancelled'));
      executor(resolve, reject);
    });
  }
}
// 使用示例
const cp = new CancellablePromise((resolve) => {
  setTimeout(() => resolve('done'), 1000);
});
// 需要取消时调用
// cp.cancel();

AbortController集成方案：

async function fetchWithCancel(url, signal) {
  try {
    const response = await fetch(url, { signal });
    return response.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('请求已取消');
    }
    throw err;
  }
}
// 使用
const controller = new AbortController();
setTimeout(() => controller.abort(), 500);
fetchWithCancel('https://api.example.com', controller.signal);

五、面试应对策略与学习建议

5.1 高效准备方法论

1. 分类练习法：按功能模块（渲染优化、状态管理、异步控制等）分类突破
2. 代码可读性训练：
   • 合理的变量命名
   • 适当的注释说明
   • 模块化的代码结构
3. 边界条件测试：
   • 空数据输入
   • 异常数据类型
   • 并发操作场景

5.2 常见面试官考察点

1. 代码健壮性：错误处理机制是否完善
2. 性能意识：时间复杂度与空间复杂度分析
3. 扩展性设计：是否预留接口扩展点
4. 工程思维：是否考虑实际业务场景的特殊需求

结语：从知识到能力的跨越

场景化手写题的备考过程，本质是技术原理与工程实践的结合训练。建议开发者在掌握基础实现后，进一步思考：

1. 如何与现有框架（React/Vue）集成？
2. 在SSR/CSR不同环境下的表现？
3. 监控和调试工具的接入方案？

通过系统性地练习和总结，不仅能提升面试表现，更能真正提升解决实际业务问题的能力。记住，优秀的代码实现应该像乐高积木——既能独立运作，又能无缝融入更大的系统架构。