JavaScript/TypeScript :
- Vitest : 专注于现代开发的快速单元测试工具。
- Jest: 功能丰富、生态完善。
- Mocha + Chai: 可高度自定义的测试框架。
其他语言 ：
- Python: unittest、pytest。
- Java: JUnit。

实践与注意事项

使用 Mock 模拟外部依赖。
避免编写“功能等同于代码逻辑”的无效测试。
示例代码（使用 Vitest ）：

import { describe, it, expect } from 'vitest';

describe('Math Utils', () => {
  it('should add two numbers', () => {
    const add = (a: number, b: number) => a + b;
    expect(add(1, 2)).toBe(3);
  });
});

集成测试（Integration Test）

概念与作用

测试多个模块之间的交互，确保它们协同工作。
覆盖数据库、API等外部依赖。
特点：
- 涉及部分外部资源。
- 覆盖系统重要的逻辑流。

常见工具和框架

Supertest（测试 API）。
Cypress（也支持集成测试）。
JUnit（集成测试支持）。

实践与注意事项

使用 测试数据库 ，避免污染生产数据。
优化测试用例以覆盖关键逻辑而非全部细节。
示例代码（使用 Supertest 测试 API）：

import request from 'supertest';
import app from '../app';

describe('API Integration Test', () => {
  it('should fetch user details', async () => {
    const response = await request(app).get('/api/users/1');
    expect(response.status).toBe(200);
    expect(response.body).toHaveProperty('name');
  });
});

端到端测试（End-to-End Test）

概念与作用

测试整个应用，从用户界面到后端服务。
模拟真实用户操作场景。
特点：
- 完整性高。
- 通常耗时较长。

常见工具和框架

Playwright: 支持多浏览器自动化测试。
Cypress: 易用性高，具有直观的调试工具。
Selenium: 历史悠久，跨语言支持广泛。

实践与注意事项

减少依赖的环境数量，使用容器或 Mock 服务。
将重点放在关键路径和高风险场景。
示例代码（使用 Playwright ）：

const { test, expect } = require('@playwright/test');

test('User can login', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('https://example.com/dashboard');
});

过往项目最佳实践

我的推荐：

单测、集成测试：Vitest

端到端测试：Playwright

名称	特点	适用场景	优势	示例代码
Vitest	专为现代开发环境设计。与 Vite 完美集成，支持 TypeScript。快速的热重载体验。	单元测试、轻量级集成测试。	快速执行。丰富的插件支持。	`import { test, expect } from 'vitest'; test('simple math', () => { expect(2 + 2).toBe(4); });`
Playwright	支持多浏览器（Chromium、Webkit、Firefox）。集成性能监控和网络拦截。	端到端测试。浏览器兼容性验证。	强大的自动化能力。简洁的 API。	`const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); await page.screenshot({ path: 'example.png' }); await browser.close(); })();`

【中高级】你了解过 Vitest 和 Playwright 吗，详细说说单测、端到端测试体系搭建与测试用例设计编写最佳实践

Vitest 对于 ts node 项目的测试环境搭建与用例

环境搭建

安装依赖

在 TypeScript Node 项目中使用 Vitest，可以通过以下命令安装必要的依赖：

npm install vitest @vitest/coverage @types/node -D

配置 Vitest

在 package.json 中添加以下脚本：

"scripts": {
  "test": "vitest --run"
}

创建 vitest.config.ts 文件：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
    coverage: {
      reporter: ['text', 'json', 'html'],
    },
  },
});

测试用例设计

单元测试示例

假设我们有一个简单的加法函数：

// src/utils/math.ts
export function add(a: number, b: number): number {
  return a + b;
}

编写测试用例：

// tests/math.test.ts
import { describe, it, expect } from 'vitest';
import { add } from '../src/utils/math';

describe('add function', () => {
  it('should add two numbers correctly', () => {
    expect(add(1, 2)).toBe(3);
  });

  it('should handle negative numbers', () => {
    expect(add(-1, -1)).toBe(-2);
  });
});

运行测试与生成覆盖率

运行测试命令：

npm run test

生成覆盖率报告：

npm run test -- --coverage

Vitest 对于 ts react 项目的测试环境搭建与用例

环境搭建

安装依赖

安装 Vitest 和相关依赖：

npm install vitest @vitest/coverage @testing-library/react @testing-library/jest-dom -D

配置 Vitest

在 vitest.config.ts 中添加以下内容：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './tests/setup.ts',
  },
});

在 tests/setup.ts 中添加以下内容：

import '@testing-library/jest-dom';

测试用例设计

组件示例

创建一个简单的 React 组件：

// src/components/Hello.tsx
import React from 'react';

export const Hello: React.FC<{ name: string }> = ({ name }) => (
  <div>Hello, {name}!</div>
);

测试用例

编写测试用例：

// tests/Hello.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Hello } from '../src/components/Hello';

describe('Hello component', () => {
  it('renders correctly with name', () => {
    render(<Hello name="World" />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

运行测试

运行测试命令：

npm run test

Playwright 对于 ts vue3 项目的测试环境搭建与用例编写

简单可以使用脚手架初始化

npm init playwright@latest

环境搭建

安装依赖

安装 Playwright 和 Vue3 项目相关依赖：

npm install playwright @playwright/test -D

初始化 Playwright

运行以下命令初始化 Playwright：

npx playwright install

配置 Playwright

创建 playwright.config.ts 文件：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  timeout: 30000,
  retries: 2,
  use: {
    headless: true,
    baseURL: 'http://localhost:3000',
  },
  projects: [
    {
      name: 'Desktop Chrome',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

配置开发服务器

在 package.json 中添加脚本：

"scripts": {
  "test:e2e": "playwright test",
  "serve": "vite"
}

测试用例设计

测试场景示例

假设有一个登录页面：

<!-- src/components/Login.vue -->
<template>
  <form @submit.prevent="login">
    <input v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      if (this.username && this.password) {
        alert('Login successful');
      } else {
        alert('Login failed');
      }
    },
  },
});
</script>

测试用例

编写端到端测试：

// tests/e2e/login.test.ts
import { test, expect } from '@playwright/test';

test('successful login', async ({ page }) => {
  await page.goto('/');
  await page.fill('input[placeholder="Username"]', 'admin');
  await page.fill('input[placeholder="Password"]', '1234');
  await page.click('button[type="submit"]');
  await expect(page.locator('text=Login successful')).toBeVisible();
});

运行测试

运行开发服务器：

npm run serve

运行端到端测试：

npm run test:e2e

【专家级】假如你是 Vitest、Playwright 作者，详细说明单测、端到端测试库的架构设计与实现

Vitest 架构设计与实践

Vitest 是一个基于 Vite 构建的现代化测试框架，专注于速度和开发体验，主要用于前端项目的单元测试和集成测试。

Vitest 的核心特性

基于 Vite 的速度优势 ：利用 Vite 的依赖缓存和模块优化功能。
热更新测试 ：修改代码时自动触发相关测试。
强大的 Mock 功能 ：支持函数、模块的全面模拟。
多种测试环境 ：支持 Node.js 和 Jsdom 环境。
扩展性 ：通过插件支持自定义的断言库、报告器和工具。

核心模块与流程

⚠️ 暂不支持的文档区域，【文档小组件】

核心架构

Vitest 基于 Vite，充分利用其高效的构建速度和模块热更新能力。其架构主要分为以下几个模块：

CLI 层 ：处理命令行输入，解析配置并启动测试。
Test Runner ：核心模块，负责加载测试文件、运行测试用例。
Transform 层 ：通过 Vite 的插件机制对文件进行编译和转化（如支持 TypeScript、ESM）。
Mocking 层 ：提供模拟依赖（mock）和全局对象的功能。
Assertion 层 ：使用 Chai 等库提供断言能力。
Report 层 ：生成和输出测试结果。

核心源码流程

Vitest 的核心流程可以分为以下几步：

CLI 初始化

使用 commander 解析命令行参数。
加载用户的配置文件（ vitest.config.ts ）。
创建 Vitest 的配置对象，包含 Vite 配置和测试相关的扩展配置。

配置解析与合并

Vitest 会读取 vite.config.js 和 vitest.config.ts ，并合并配置。主要的配置字段包括：

test ：测试相关配置（如 include 、 exclude 、 globals 等）。
resolve ：模块解析规则（与 Vite 配置一致）。
transform ：文件的编译和转换规则。

Vitest 通过 Vite 的 createServer 方法创建开发服务器，复用 Vite 的解析和加载能力。

测试文件的发现

Vitest 使用 Glob 模式（通过 fast-glob 库）查找测试文件。默认会扫描项目中的 *.test.* 和 *.spec.* 文件。

测试文件的加载和编译

Vitest 利用 Vite 的插件机制处理测试文件：

解析依赖 ：通过 Vite 的模块解析逻辑找到依赖文件。
编译代码 ：支持 TypeScript、ESM 等现代语法，转换为支持运行时的 JavaScript。
注入环境 ：为每个测试文件注入全局的测试函数（如 describe 、 it 、 expect ）和模拟功能。

执行测试

测试文件加载完成后，Vitest 使用一个 Test Runner 执行测试用例：

解析测试文件，生成测试用例树。
遍历测试用例树，根据 describe 和 it 的结构，依次执行测试。
在执行每个测试用例时，捕获其执行结果（通过 try-catch 捕获错误）。

Mock 功能

Vitest 提供 Mock 功能，通过 vi.mock 实现对模块和依赖的模拟：

依赖拦截 ：在模块加载时拦截目标模块并返回模拟内容。
函数 Mock ：通过 vi.fn 提供函数调用的计数、参数捕获和返回值控制。

断言和错误捕获

Vitest 内置了 Chai 作为断言库，用户可以使用 expect 或其他断言风格（如 assert ）。

捕获断言失败和未捕获的异常。
提供详细的错误信息（包括堆栈跟踪和代码位置）。

报告生成

Vitest 提供多种报告方式：

实时控制台输出 ：在 CLI 中打印测试结果和错误信息。
JSON 文件输出 ：可以生成机器可读的测试结果文件。
HTML 报告 ：通过插件生成静态的测试报告页面。

热更新与开发体验

Vitest 的一大特色是与 Vite 的无缝集成：

利用 Vite 的热模块替换（HMR）功能，在修改测试文件时自动重新运行测试。
缓存测试结果，只重新运行受影响的测试用例。

关键模块源码解读

配置管理

// vitest/src/config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node', // or 'jsdom'
    include: ['**/*.test.ts'],
  }
})

Vitest 会解析上述配置并与默认配置合并，最终生成运行时配置。

测试执行

// vitest/src/runner.ts
async function runTests() {
  const files = await findTestFiles(config.include)
  for (const file of files) {
    await executeFile(file)
  }
}

async function executeFile(file) {
  const testModule = await import(file)
  runTestSuite(testModule)
}

Mock 实现

// vitest/src/mocks.ts
function mock(module, implementation) {
  const original = require(module)
  mockedModules[module] = { ...original, ...implementation }
}

报告生成

Vitest 提供插件机制，允许自定义报告器：

// vitest-report-json.js
import { createReport } from 'vitest'

createReport('json', {
  outputFile: './report.json',
})

Playwright 架构设计与实践

Playwright 是一个强大的自动化测试框架，专注于跨浏览器的 Web 测试。核心是通过 WebSocket 与浏览器进行通信，充分利用现代浏览器的调试协议（如 CDP）实现高效的自动化操作。

Playwright 的核心特性

跨浏览器支持 ：同时支持 Chromium、Firefox 和 WebKit。
多会话隔离 ：通过 BrowserContext 实现独立的测试环境。
网络拦截与模拟 ：支持请求拦截和返回模拟数据。
高效的并行执行 ：内置 Test Runner 支持并行测试。
强大的选择器支持 ：包括 CSS、XPath 和自定义选择器

核心模块与流程

⚠️ 暂不支持的文档区域，【文档小组件】

核心架构

Playwright 的架构基于客户端-服务端模型，主要组件包括：

Client : 用户的测试脚本运行在这里，调用 Playwright 提供的 API。
Server : 负责管理浏览器实例及与浏览器通信。
Browser Driver : 通过特定协议（如 CDP、WebSocket）与浏览器通信。

核心模块

Browser Context : 支持独立的浏览器环境，用于隔离不同的测试。
Selectors : 定义和解析复杂的元素选择器。
Network Interception : 提供请求和响应的拦截、修改能力。
Test Runner : 负责运行测试用例，并与报告器集成。

核心源码流程

初始化流程

Playwright 的入口是通过 playwright 对象创建浏览器实例。

const { chromium } = require('playwright');
const browser = await chromium.launch();

初始化的主要流程：

加载配置并解析测试用例。
启动指定浏览器类型（Chromium、Firefox 或 WebKit）。
创建独立的 BrowserContext，用于隔离测试环境。
初始化 Test Runner，加载并执行测试。

配置管理

Playwright 支持通过 playwright.config.js 管理配置：

module.exports = {
  use: {
    headless: false,
    viewport: { width: 1280, height: 720 },
    baseURL: 'http://localhost:3000',
  },
};

配置解析流程：

合并默认配置和用户配置。
验证配置是否合法（如检查浏览器路径、网络代理设置）。
将配置传递到 Browser Context。

浏览器启动

通过 BrowserType.launch() 启动浏览器，内部逻辑：

根据配置检查浏览器可执行文件路径。
通过子进程启动浏览器实例。
建立与浏览器的 WebSocket 连接。
初始化调试协议（如 Chrome DevTools Protocol，CDP）。

源码示例：

// packages/playwright-core/src/browserType.ts
async launch(options) {
  const process = await this._launchProcess(options);
  return new Browser(process);
}

Browser Context 管理

Playwright 使用 BrowserContext 实现多会话隔离。每个 Context 相当于一个独立的浏览器实例。

默认会创建一个 Context，测试脚本中可以手动创建多个：

const context = await browser.newContext();
const page = await context.newPage();

BrowserContext 内部负责：
1. 管理 Cookie 和本地存储。
2. 处理网络代理、设备模拟等配置。
3. 提供独立的 Page 对象。

页面操作和元素交互

Page 是测试的核心对象，所有页面操作通过它完成：

导航 : page.goto(url) 发送导航命令。
交互 : page.click(selector) 通过解析选择器，触发点击事件。
等待 : page.waitForSelector(selector) 等待元素出现。

核心流程：

Page 调用对应的方法（如 goto ）。
将命令封装为消息，通过 WebSocket 发送到服务端。
服务端解析消息并调用浏览器原生接口（如 CDP 的 Page.navigate ）。
浏览器返回结果，客户端处理并返回给用户。

源码示例：

// packages/playwright-core/src/page.ts
async goto(url, options) {
  const result = await this._channel.goto({ url, ...options });
  return result;
}

选择器引擎

Playwright 内置了多种选择器引擎（如 CSS、XPath），也支持自定义选择器：

核心模块解析选择器并绑定到 DOM 节点。
通过 evaluate 将脚本注入到页面执行选择器逻辑。

await page.locator('text=Submit').click();

自定义选择器源码：

// packages/playwright-core/src/selectors.ts
register(name, script) {
  this._customSelectors[name] = script;
}

网络拦截与模拟

Playwright 提供强大的网络拦截功能，通过 route 拦截请求：

page.route 注册拦截规则。
在请求发送前触发拦截回调。
用户可以修改请求或返回模拟响应。

源码逻辑：

await page.route('**/api/*', route => {
  route.fulfill({ status: 200, body: 'mocked response' });
});

内部实现：

拦截规则存储在内存中。
每个请求发送时匹配规则并执行拦截回调。

测试运行与报告

Playwright 提供内置的 Test Runner，流程如下：

加载测试文件 ：通过 Node.js 动态加载测试文件。
运行测试用例 ：依次执行文件中的 test 方法。
生成报告 ：通过内置或自定义的报告器输出结果。

测试用例示例：

test('basic test', async ({ page }) => {
  await page.goto('https://example.com');
  const title = await page.title();
  expect(title).toBe('Example Domain');
});

源码关键模块解读

Launch 模块

// playwright-core/src/server/browserServer.ts
_launchServer() {
  const childProcess = spawn(browserExecutablePath, args, options);
  this._process = childProcess;
}

WebSocket 通信

通过 WebSocket 管理与浏览器的通信：

// playwright-core/src/transport/webSocket.ts
class WebSocketTransport {
  send(message) {
    this._ws.send(JSON.stringify(message));
  }
}

Test Runner

// playwright-test/src/runner.ts
async function runTest(test) {
  try {
    await test.run();
  } catch (error) {
    console.error('Test failed:', error);
  }
}

简历优化（35K+ 简历模板）

技能描述

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

STAR

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

全面的技术储备
1. 框架基础
  - Vue 和 React 经验：包括 Vue3 + Typescript 和 React18（Hooks、Concurrent）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

补足短板

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】

前端前沿技术爱好者

前端单测、集成测试与端到端测试方案全面解析，字节大佬分享字节系产品分场景测试最佳实践

【 初中级 】在你过往项目中有做过测试吗，请说说单测、集成测试、端到端测试的方案与实践

测试的基本概念与意义

测试方案设计与选择

什么时候使用哪种测试？

测试金字塔模型

单元测试（Unit Test）

概念与作用

常见工具和框架

实践与注意事项

集成测试（Integration Test）

概念与作用

常见工具和框架

实践与注意事项

端到端测试（End-to-End Test）

概念与作用

常见工具和框架

实践与注意事项

过往项目最佳实践

【 中高级 】你了解过 Vitest 和 Playwright 吗，详细说说单测、端到端测试体系搭建与测试用例设计编写最佳实践

Vitest 对于 ts node 项目的测试环境搭建与用例

环境搭建

安装依赖

配置 Vitest

测试用例设计

单元测试示例

运行测试与生成覆盖率

Vitest 对于 ts react 项目的测试环境搭建与用例

环境搭建

安装依赖

配置 Vitest

测试用例设计

组件示例

测试用例

运行测试

Playwright 对于 ts vue3 项目的测试环境搭建与用例编写

环境搭建

安装依赖

初始化 Playwright

配置 Playwright

配置开发服务器

测试用例设计

测试场景示例

测试用例

运行测试

【 专家级 】假如你是 Vitest、Playwright 作者，详细说明单测、端到端测试库的架构设计与实现

Vitest 架构设计与实践

Vitest 的核心特性

核心模块与流程

核心架构

核心源码流程

CLI 初始化

配置解析与合并

测试文件的发现

测试文件的加载和编译

执行测试

Mock 功能

断言和错误捕获

报告生成

热更新与开发体验

关键模块源码解读

配置管理

测试执行

Mock 实现

报告生成

Playwright 架构设计与实践

Playwright 的核心特性

核心模块与流程

核心架构

核心模块

核心源码流程

初始化流程

配置管理

浏览器启动

Browser Context 管理

页面操作和元素交互

选择器引擎

网络拦截与模拟

测试运行与报告

【初中级】在你过往项目中有做过测试吗，请说说单测、集成测试、端到端测试的方案与实践

【中高级】你了解过 Vitest 和 Playwright 吗，详细说说单测、端到端测试体系搭建与测试用例设计编写最佳实践

【专家级】假如你是 Vitest、Playwright 作者，详细说明单测、端到端测试库的架构设计与实现