东田数码科技前端面经

Deepsleep.2025-05-03 1:31

东田数码科技有限公司前端面经

一个月三次面试，也是逐渐积攒了许多经验，也有遇到面试官问到的重复的问题，也有一些我不懂的问题，以下是4.27东田前端面经，希望给大家做参考。

1-自我介绍

我是ac鸽，就读与XXX，巴拉巴拉。建议说一下自己熟悉的技术栈，还有对前端有浓厚的兴趣，让面试官有问题可问。

2-笔试

一来就让我先填一些基本信息，然后就先让我填一下笔试内容。内容如下，波珠还是有准备的，也是完成了80%多。

3-less/css实现水平垂直居中的div（两张方法以上）

这里波珠在上一次面试的时候已经被问过一次了，所以这道题也是毫无例外的拿下了。

css 复制代码 
/* 方法1：Flex布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 方法2：Grid布局 */
.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

/* 方法3：绝对定位 + Transform */
.container {
  position: relative;
  height: 100vh;
}
.inner-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 方法4：绝对定位 + margin auto */
.container {
  position: relative;
  height: 100vh;
}
.inner-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

4. 移动端适配方案

这个波珠在面试的路上刚好刷到了，恰巧就拿下了嘻嘻。

  1. rem方案（推荐）：

    • 通过JS动态设置document.documentElement.style.fontSize
    • 结合postcss-pxtorem自动转换px为rem
    • 基准值通常设置为设计稿宽度/10（如375px设计稿 → 37.5px）

  2. viewport方案（vw/vh）：

    css 复制代码 
    /* 设计稿750px时，1vw = 7.5px */
.element {
  width: (100vw / 7.5); /* 100px → 13.333vw */
}
    • 使用postcss-px-to-viewport插件自动转换

  3. 媒体查询：

    css 复制代码 
    @media screen and (max-width: 375px) {
  .element { font-size: 14px; }
}

  4. Flexible方案（阿里方案）：

    • 通过JS检测dpr动态调整viewport和font-size
    • 已逐步被vw方案取代

  5. 响应式图片：

    html 复制代码 
    <img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1024w">

5. Vue中v-if和v-show的区别

优化后答案：

v-if v-show
编译方式 动态添加/移除DOM 始终保留DOM，切换display属性
性能开销 较高的切换开销 较高的初始渲染开销
适用场景 运行时条件很少改变 需要频繁切换显示状态
生命周期 触发创建/销毁生命周期 不触发生命周期

使用建议：

  • 需要权限控制/数据加载时用v-if
  • 选项卡切换等高频操作用v-show

6. PC端与移动端事件对应关系

这个波珠没有准备，被宰了一道呜呜呜。只会个click，pc端还有对应的键盘事件。

PC端事件 移动端事件 特殊处理
click touchstart/touchend 移动端有300ms延迟，可用fastclick库解决
mouseover touchmove 需要阻止默认行为：e.preventDefault()
mousedown touchstart 注意多点触控：通过e.touches数组获取触点
mouseup touchend 注意触点离开时的坐标判断
mousemove touchmove 需要处理坐标计算：e.changedTouches[0].clientX
dblclick 无直接对应 可通过自定义手势识别实现

7. 防抖与节流

javascript 复制代码 
// 防抖：最后一次操作后执行
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流：固定时间间隔执行
function throttle(fn, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

应用场景：

  • 防抖：搜索框输入、窗口resize结束判断
  • 节流：滚动加载、鼠标移动事件、游戏角色移动
  • 回答计时器定时器差不多就OK了，但是也要会手写

8.前端三化深度解析（模块化/组件化/工程化）

一、模块化 (Modularization)

1.1 演进历程

javascript 复制代码 
// IIFE阶段（2015年前）
(function(window) {
  function fn1() {...}
  window.moduleA = { fn1 };
})(window);

// CommonJS阶段（Node.js）
const moduleB = require('./moduleB');
module.exports = { ... };

// ES Modules阶段（现代标准）
import moduleC from './moduleC.js';
export const func = () => {...};

1.2 核心价值

  • 依赖管理 ：通过import/require明确定义依赖关系

  • 作用域隔离：每个模块拥有独立词法作用域

  • 按需加载：动态加载模块（Dynamic Import）

    javascript 复制代码 
    import('./module.js').then(module => {...});

1.3 进阶实践

  • Tree Shaking：通过静态分析消除死代码

  • 循环引用 ：使用import() + await解决

  • 模块联邦（Webpack 5）：实现跨应用共享模块

    javascript 复制代码 
    // 模块提供方
new ModuleFederationPlugin({
  name: 'app1',
  exposes: { './Button': './src/Button' }
})

二、组件化 (Componentization)

2.1 设计原则

原则 实现示例
单一职责 按钮组件只处理点击交互
受控/非受控 <Input value={value} onChange={...}/>
组合优于继承 使用<Slot>或children进行组合

2.2 高级模式

javascript 复制代码 
// 高阶组件（HOC）
const withLogger = WrappedComponent => {
  return props => {
    useEffect(() => {
      console.log('Component mounted');
    }, []);
    return <WrappedComponent {...props} />;
  };
};

// 渲染属性模式
<DataProvider render={data => (
  <Component data={data} />
)}/>

2.3 跨框架方案

html 复制代码 
<!-- Web Components -->
<template id="my-component">
  <style>...</style>
  <div class="container">
    <slot name="content"></slot>
  </div>
</template>

<script>
  customElements.define('my-component', class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('my-component');
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(template.content.cloneNode(true));
    }
  });
</script>

三、工程化 (Engineering)

3.1 完整工具链

代码管理 Git Git Hooks Monorepo 开发环境 Vite/Webpack HMR热更新 质量保障 Jest单元测试 Cypress E2E测试 ESLint/Prettier 构建部署 Docker CI/CD流水线 性能监控

3.2 关键实践

  • 自动化构建：

    bash 复制代码 
    # 现代构建流程示例
npm run lint # 代码检查
npm run test:unit # 单元测试
npm run build # 生产构建
npm run deploy # 自动部署

  • 微前端架构：

    javascript 复制代码 
    // 乾坤框架配置
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/app1',
  }
]);

  • 性能优化：

    javascript 复制代码 
    // 代码分割示例（React）
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

四、三化协同关系

4.1 开发流程映射

模块化 组件化 工程化 提供可复用的功能单元 构建可视化界面系统 通过工具链管理模块依赖 实现自动化组件测试/发布 模块化 组件化 工程化

4.2 项目演进示例

  1. 初创阶段 ：使用create-react-app快速搭建基础工程
  2. 成长阶段 ：
    • 拆分业务模块为独立npm包
    • 建立UI组件库
  3. 成熟阶段 ：
    • 实现微前端架构
    • 搭建私有镜像仓库
    • 实施灰度发布策略

五、面试延伸问题准备

5.1 常见追问

  1. "如何设计一个可维护的React组件？"

    • 参考答案要素：
      • PropTypes/TS类型定义
      • 清晰的目录结构（index.js + style.module.css）
      • 单元测试覆盖率要求

  2. "Webpack和Vite的核心差异是什么？"

    • 关键点对比：

      Webpack Vite
      构建机制 Bundle-based ESM-based
      冷启动时间 较慢（全量打包） 极快（按需编译）
      适用场景 复杂项目 现代浏览器项目

  3. "如何实现跨团队组件共享？"

    • 解决方案：
      • 搭建私有npm仓库（Verdaccio）
      • 使用Storybook建设组件文档站
      • 制定版本管理规范（Semver）

5.2 项目经验包装建议

  • 模块化案例 ：

    "在XX项目中，我将用户认证模块解耦为独立SDK，使多个子项目复用率提升70%"

  • 组件化案例 ：

    "主导开发可视化图表组件库，通过参数化配置支持10+业务场景，减少重复代码量约3万行"

  • 工程化案例 ：

    "引入GitLab CI流水线后，构建部署时间从15分钟缩短至2分钟，并实现自动化回归测试"

前端三化「说人话」总结：

1. 模块化 → 代码分块，像拼乐高

  • 干啥用？ 把代码拆成一个个独立小文件，避免所有代码堆一起
  • 举个栗子🌰 ：
    • 用户登录功能 → 单独写个login.js
    • 支付功能 → 单独写个pay.js
  • 好处：改一个功能不会影响其他，还能重复使用

2. 组件化 → 造可复用的零件

  • 干啥用？ 把界面拆成可复用的零件（按钮/表格/弹窗）

  • 现实类比：就像手机零件，换个摄像头不影响屏幕

  • 开发日常 ：

    vue 复制代码 
    <!-- 直接复用别人写好的组件 -->
<SearchBar @search="handleSearch"/>
<DatePicker v-model="date"/>

  • 好处：不用重复造轮子，团队协作更高效

3. 工程化 → 搞自动化生产线

  • 核心目标：让开发→测试→上线像流水线一样自动运行
  • 标配工具 ：
    • 代码质检员：ESLint（检查代码格式错误）
    • 自动打包机：Webpack（把代码压缩打包）
    • 自动测试机：Jest（自动跑测试用例）
    • 一键部署：CI/CD（代码提交后自动发布）
  • 好处：减少人工操作，避免低级错误

三化关系一句话总结：

  • 模块化：把代码写成独立积木块
  • 组件化：把积木块拼成标准零件
  • 工程化：建个自动化工厂批量生产

面试加分金句：

"我们项目用模块化解耦业务逻辑，通过组件库统一UI规范，最后用工程化工具实现从代码提交到自动部署的全流程------就像先造零件、再组装汽车、最后建自动化工厂"

通俗版理解检测✅

下次被问到时，试着用「拼乐高→造零件→建工厂」的比喻串起来讲，面试官听完绝对眼前一亮！ ✨

面试

面试的时候面试官没问什么问题，他看了我简历发现我用的技术栈跟他们公司的业务比较契合，也是使用动画跟3D结合，问了我的项目都是一个人开发吗？是都上线了是吗？我说都是的，上面都有部署链接。

后面面试官问我要什么问题想问的，我就问了一些常见的问题。

1-公司的具体业务是？

2-有加班吗？加班有调休还是有加班费？

3-一周上几天班？

4-在贵公司能学到什么东西？

5-进了公司，是使用公司的电脑还是自带笔记本？（因为涉及到公司的保密，一般都是公司的电脑）

6-薪资大概能开到什么水平？由于波珠只是的憋佬仔实习生，也不敢要太多哈哈，反正希望越多越好。

祝大家都能拿到满意的offer！！

相关推荐
恋猫de小郭1 小时前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅9 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示