东田数码科技前端面经

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！！

相关推荐
BillKu10 分钟前
Axios中POST、PUT、PATCH用法区别
前端·vue.js
好奇的菜鸟1 小时前
掌握 npm 核心操作：从安装到管理依赖的完整指南
前端·npm·node.js
肥肠可耐的西西公主2 小时前
前端（小程序）学习笔记（CLASS 2）：WXML模板语法与WXSS模板样式
前端·学习·小程序
m0_689618283 小时前
3D打印仿造+ AI大脑赋能，造出会思考的全景相机
笔记·科技·数码相机·3d
逆袭的菜鸟X3 小时前
RxJS 高阶映射操作符详解：map、mergeMap 和 switchMap
前端
bubiyoushang8883 小时前
HTML5的新语义化标签
前端·html·html5
会飞的鱼先生4 小时前
vue3自定义指令来实现 v-copy 功能
前端·javascript·vue.js
陈天伟教授4 小时前
Web前端开发 - 制作简单的焦点图效果
java·开发语言·前端·前端开发·visual studio
_殊途4 小时前
前端三件套之html详解
前端·html
不思念一个荒废的名字5 小时前
【黑马JavaWeb+AI知识梳理】后端Web基础03 - MySQL概述
前端·数据库·mysql
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06DeepSeek各版本说明与优缺点分析07CCF CSP 认证考试历年真题满分题解（所有前四题）08VMware虚拟机安装Win7专业版保姆级教程（附镜像包）09Coze扣子平台完整体验和实践（附国内和国际版对比）10Android Termux 安装Kali Linux 或 kali Nethunter史诗级详细教程