13.罗意文面试

1、工程化与架构设计（考察项目管理和架构能力）

1.1 你负责的可视化编排项目中，如何设计组件的数据结构来支持"拖拉拽"功能？如何处理组件间的联动关系？

// 组件数据结构示例
{
  components: [
    {
      id: 'comp1',
      type: 'input',
      position: { x: 100, y: 100 },
      props: { /* 组件属性 */ },
      connections: [
        { target: 'comp2', type: 'data' }  // 组件间连接关系
      ]
    }
  ],
  // 使用发布订阅模式处理组件联动
  eventBus: new EventEmitter()
}

1.2 你提到使用 Vue 的 render 函数实现可视化编排，能详细讲讲这个实现思路吗？与使用 template 的方案相比有什么优势？

{
  render(h) {
    return h('div', {
      class: 'editor',
      on: {
        drop: this.handleDrop
      }
    }, this.components.map(comp => {
      return h(comp.type, {
        props: comp.props,
        style: {
          position: 'absolute',
          left: `${comp.position.x}px`,
          top: `${comp.position.y}px`
        },
        on: this.createComponentEvents(comp)
      })
    }))
  }
}

1.3 在3D展厅项目中，你们是如何解决大型3D模型加载性能问题的？如何平衡展示效果和加载性能？

// 1. 模型分级加载
const loadModel = async (url, level) => {
  const loader = new THREE.GLTFLoader();
  // 根据距离加载不同精度模型
  const modelUrl = level === 'high' ? url : url.replace('.glb', '_low.glb');
  return await loader.loadAsync(modelUrl);
};

// 2. 使用 LOD (Level of Detail)
const lod = new THREE.LOD();
lod.addLevel(highDetailModel, 0);    // 近距离
lod.addLevel(mediumDetailModel, 50); // 中等距离
lod.addLevel(lowDetailModel, 100);   // 远距离

2、技术深度（考察核心技术掌握程度）

2.1 Vue 相关

// Vue nextTick
// 请解释这段代码的执行结果，并说明原因
const app = new Vue({
  data: {
    count: 1
  },
  mounted() {
    this.count = 2;
    this.$nextTick(() => {
      console.log(this.$el.textContent);
    });
    this.count = 3;
  }
});

// 输出将是 3
// 原因：
// 1. Vue 的响应式更新是异步的
// 2. 多次更新会被合并
// 3. nextTick 会在 DOM 更新后执行

2.2 性能优化：

// 这段代码有什么性能问题？如何优化？
function handleScroll() {
  const scrollTop = document.documentElement.scrollTop;
  this.items.forEach(item => {
    if (item.offsetTop < scrollTop + window.innerHeight) {
      item.visible = true;
    }
  });
}
window.addEventListener('scroll', handleScroll);

// 优化后的代码
function handleScroll() {
  // 1. 使用防抖
  if (this.scrollTimer) clearTimeout(this.scrollTimer);
  this.scrollTimer = setTimeout(() => {
    // 2. 使用 requestAnimationFrame
    requestAnimationFrame(() => {
      const scrollTop = document.documentElement.scrollTop;
      const viewportHeight = window.innerHeight;
      
      // 3. 使用 getBoundingClientRect 批量获取位置
      this.items.forEach(item => {
        const rect = item.getBoundingClientRect();
        if (rect.top < viewportHeight) {
          item.visible = true;
        }
      });
    });
  }, 16);
}

// 4. 使用 passive 优化滚动性能
window.addEventListener('scroll', handleScroll, { passive: true });

2.3 算法设计

// 实现一个函数，将扁平的部门数据转换为树形结构
// 输入: [{id: 1, name: 'dept1', parentId: 0}, {id: 2, name: 'dept2', parentId: 1}]
// 输出: [{id: 1, name: 'dept1', children: [{id: 2, name: 'dept2'}]}]

function arrayToTree(items) {
  const result = [];   // 存放结果集
  const itemMap = {};  // 存放 map
  
  // 建立 id -> item 的映射关系
  items.forEach(item => {
    itemMap[item.id] = { ...item, children: [] };
  });
  
  // 构建树
  items.forEach(item => {
    const parent = itemMap[item.parentId];
    if (parent) {
      parent.children.push(itemMap[item.id]);
    } else {
      result.push(itemMap[item.id]);
    }
  });
  
  return result;
}

3. 工程实践（考察实际问题解决能力）

3.1 在你的项目中，如何处理前端权限控制？包括路由权限和按钮权限。

// 路由权限
const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      meta: { 
        requiresAuth: true,
        permissions: ['admin']
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const hasPermission = checkPermissions(to.meta.permissions);
    if (!hasPermission) {
      next('/403');
    }
  }
  next();
});

// 按钮权限
Vue.directive('permission', {
  inserted(el, binding) {
    const permission = binding.value;
    if (!hasPermission(permission)) {
      el.parentNode.removeChild(el);
    }
  }
});

3.2 你们的3D项目是如何做异常监控和性能监控的？

// 性能监控
const stats = new Stats();
document.body.appendChild(stats.dom);

// 异常监控
window.addEventListener('error', (event) => {
  if (event.target instanceof HTMLImageElement) {
    // 处理资源加载错误
    handleResourceError(event);
  } else {
    // 处理 JS 运行时错误
    handleRuntimeError(event);
  }
});

// WebGL 上下文丢失处理
canvas.addEventListener('webglcontextlost', handleContextLost);
canvas.addEventListener('webglcontextrestored', handleContextRestored);

3.3 在多人协作的项目中，你们是如何确保代码质量的？具体的工程化措施有哪些？

4. 技术视野（考察技术广度和思维方式）

4.1 Vue2 到 Vue3 的升级中，你认为最重要的变化是什么？这些变化解决了什么问题？

4.2 对比 Webpack 和 Vite，你认为它们各自的优势是什么？在什么场景下选择使用？

4.3 前端微服务架构中，你认为最关键的技术挑战是什么？如何解决？

5.项目管理（考察管理能力）

5.1 作为项目经理，你是如何评估项目风险的？能举个具体的例子吗？

5.2 在带领团队时，你是如何进行技术选型和技术架构决策的？

5.3 如何平衡项目进度和代码质量？

6.实战题目（考察实际编码能力）

6.1 手写题

// 实现一个简单的发布订阅系统
class EventEmitter {
  // 请实现以下方法
  on(event, callback) {}
  emit(event, ...args) {}
  off(event, callback) {}
  once(event, callback) {}
}

class EventEmitter {
  constructor() {
    this.events = new Map();
  }
  
  on(event, callback) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    this.events.get(event).push(callback);
  }
  
  emit(event, ...args) {
    if (this.events.has(event)) {
      this.events.get(event).forEach(callback => {
        callback.apply(this, args);
      });
    }
  }
  
  off(event, callback) {
    if (this.events.has(event)) {
      const callbacks = this.events.get(event);
      const index = callbacks.indexOf(callback);
      if (index !== -1) {
        callbacks.splice(index, 1);
      }
    }
  }
  
  once(event, callback) {
    const wrapper = (...args) => {
      callback.apply(this, args);
      this.off(event, wrapper);
    };
    this.on(event, wrapper);
  }
}

6.2 设计题

// 设计一个通用的前端缓存方案，要求：
// 1. 支持多种存储方式（Memory、LocalStorage、IndexedDB）
// 2. 支持数据过期
// 3. 支持容量限制
// 4. 支持优先级

class Cache {
  constructor(options = {}) {
    this.storage = options.storage || new MemoryStorage();
    this.maxSize = options.maxSize || 1000;
    this.cleanupInterval = options.cleanupInterval || 60000;
    this.startCleanup();
  }

  async set(key, value, options = {}) {
    const item = {
      value,
      priority: options.priority || 0,
      expires: options.expires ? Date.now() + options.expires : null,
      size: this.getSize(value)
    };
    
    await this.ensureSpace(item.size);
    await this.storage.set(key, item);
  }

  async get(key) {
    const item = await this.storage.get(key);
    if (!item) return null;
    
    if (item.expires && item.expires < Date.now()) {
      await this.storage.delete(key);
      return null;
    }
    
    return item.value;
  }

  private async ensureSpace(requiredSize) {
    const currentSize = await this.getCurrentSize();
    if (currentSize + requiredSize <= this.maxSize) return;

    // 按优先级和过期时间清理
    const items = await this.getAllItems();
    items.sort((a, b) => {
      if (a.priority !== b.priority) return a.priority - b.priority;
      return (a.expires || Infinity) - (b.expires || Infinity);
    });

    let freedSpace = 0;
    for (const item of items) {
      if (currentSize - freedSpace + requiredSize <= this.maxSize) break;
      await this.storage.delete(item.key);
      freedSpace += item.size;
    }
  }

  private startCleanup() {
    setInterval(async () => {
      const items = await this.getAllItems();
      const now = Date.now();
      
      for (const item of items) {
        if (item.expires && item.expires < now) {
          await this.storage.delete(item.key);
        }
      }
    }, this.cleanupInterval);
  }
}