class StateBasedGCounter {
  constructor() {
    this.state = new Map(); // state 是每个副本的内部状态
  }

  // state_zero：内部状态的初始值
  static state_zero() {
    return new Map();
  }

  // ≤：定义了 state 之间的顺序
  static lessThanOrEqual(s1, s2) {
    for (let [key, value] of s1) {
      if ((s2.get(key) || 0) < value) return false;
    }
    return true;
  }

  // update(s, u)：定义 state 的更新方式
  increment(nodeId, value = 1) {
    this.state.set(nodeId, (this.state.get(nodeId) || 0) + value);
  }

  // merge(s, s')：合并两个状态得到新状态
  merge(otherState) {
    for (let [nodeId, count] of otherState) {
      this.state.set(nodeId, Math.max(count, this.state.get(nodeId) || 0));
    }
  }

  // 获取计数器的当前值
  getValue() {
    let total = 0;
    for (let count of this.state.values()) {
      total += count;
    }
    return total;
  }
}

使用示例：

// 示例使用
const counterA = new StateBasedGCounter();
const counterB = new StateBasedGCounter();

counterA.increment("A", 5);
counterB.increment("B", 3);

// 副本之间传递状态，并合并
counterA.merge(counterB.state);
counterB.merge(counterA.state);

console.log("Counter A value:", counterA.getValue()); // 输出 8
console.log("Counter B value:", counterB.getValue()); // 输出 8

基于操作的 CRDT 实现

设计一个基于操作的 CRDT 中需要先定义一个 Op-based Object。当它满足一定的性质时就能成为 Op-based CRDT。Op-based Object 的定义包括：

state 是每个副本的内部状态
state_zero 内部状态的初始值
op 是每个原子操作的类型，副本直接通过传递 op 来达到同步
apply_op(state, op) 是在一个 state 上应用 op 的函数，返回新的状态；op 的交换律指的就是 apply_op(apply_op(state, opA), opB) == apply_op(apply_op(state, opB), opA)
check_state(state, op) 确认一个状态是否满足应用 op 的前置条件
- Op-based CRDT 的每一个操作 op 都有对应的前置状态检查函数 check_state，在应用 op 之前需要检查 check_state 函数是否满足，如果不满足就将阻塞延迟
- check_state 函数的目的是为了保证 op 所依赖的 因果顺序 成立，例如删除 x 节点的操作依赖于 x 节点被创建的操作，否则就无法应用该操作。这也意味着 Op-based CRDT 的使用者有责任证明每个操作的前置状态都是能够得到满足的
副本之间通过传递彼此缺失的 op，并进行 apply_op 来达到最终一致性

基于操作的 CRDT 将每个操作（如添加或删除元素）传播到其他节点，并在节点上按顺序执行这些操作。

class OpBasedORSet {
  constructor() {
    this.state = new Set(); // 内部状态
    this.history = new Set(); // 用于记录已应用的操作，避免重复
  }

  // state_zero：内部状态的初始值
  static state_zero() {
    return new Set();
  }

  // 添加操作的原子操作
  add(element) {
    const op = { type: "add", element };
    if (this.check_state(this.state, op)) {
      this.apply_op(op);
    }
  }

  // 删除操作的原子操作
  remove(element) {
    const op = { type: "remove", element };
    if (this.check_state(this.state, op)) {
      this.apply_op(op);
    }
  }

  // apply_op(state, op)：在 state 上应用 op 的函数
  apply_op(op) {
    const key = JSON.stringify(op);
    if (!this.history.has(key)) {
      if (op.type === "add") {
        this.state.add(op.element);
      } else if (op.type === "remove") {
        this.state.delete(op.element);
      }
      this.history.add(key); // 记录操作历史
    }
  }

  // check_state(state, op)：检查操作的前置条件
  check_state(state, op) {
    if (op.type === "remove") {
      return state.has(op.element); // 只有当元素存在时才允许删除
    }
    return true; // 添加操作始终允许
  }

  // 获取集合当前内容
  getElements() {
    return Array.from(this.state);
  }
}

使用示例：

// 示例使用
const setA = new OpBasedORSet();
const setB = new OpBasedORSet();

// 添加和删除操作
setA.add("apple");
setB.add("apple");
setA.remove("apple");

// 模拟操作传播
setB.apply_op({ type: "remove", element: "apple" });

console.log("Set A elements:", setA.getElements()); // 输出 []
console.log("Set B elements:", setB.getElements()); // 输出 []

CRDT 的实现库：Yjs

Yjs 是一个开源的 JavaScript 库，专门用于处理协同编辑和数据同步。Yjs 使用 CRDT 原理来保证不同客户端之间的数据一致性，支持文本、数组、Map 等多种数据类型的实时协作。

Yjs 的特点

实时性 ：通过 WebSocket 或 WebRTC 等方式进行实时数据同步。
高效性 ：使用差异同步，减少带宽消耗。
兼容性 ：支持多种存储后端和网络传输协议。

Yjs 示例代码

以下是使用 Yjs 的基本示例：

基础操作

import * as Y from 'yjs'

// Yjs documents are collections of
// shared objects that sync automatically.
const ydoc = new Y.Doc()
// Define a shared Y.Map instance
const ymap = ydoc.getMap()
ymap.set('keyA', 'valueA')

// Create another Yjs document (simulating a remote user)
// and create some conflicting changes
const ydocRemote = new Y.Doc()
const ymapRemote = ydocRemote.getMap()
ymapRemote.set('keyB', 'valueB')

// Merge changes from remote
const update = Y.encodeStateAsUpdate(ydocRemote)
Y.applyUpdate(ydoc, update)

// Observe that the changes have merged
console.log(ymap.toJSON()) // => { keyA: 'valueA', keyB: 'valueB' }

Provider 接入

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

const doc = new Y.Doc()
const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', doc)

wsProvider.on('status', event => {
  console.log(event.status) // logs "connected" or "disconnected"
})

【专家级】请你从零架构设计一个 Notion、飞书文档的协同编辑器，请给出协同详细技术方案与核心落地说明

需求说明

协同编辑器的主要功能需求包括：

光标同步 ：不同用户在文档中的光标位置实时同步，便于了解他人的编辑位置。
框选：当用户在编辑器中选中一段文本时，其他用户能看到该选中区域。
输入同步 ：用户的输入内容实时同步到所有协作用户的视图中，实现多人实时编辑。
撤销/重做（Undo/Redo） ：支持用户撤销或重做操作，以恢复或回溯编辑操作。

在这个设计中，我们将使用 Yjs 作为核心协同编辑的框架。

Yjs 提供了高效的数据同步和冲突处理功能，适合构建复杂的协作应用。

核心技术方案

WebSocket 和 Yjs ：Yjs 是一个实现 CRDT（无冲突复制数据类型）的 JavaScript 库，能够实现分布式系统的一致性。 y-websocket 提供 WebSocket 支持，使各个客户端间的数据同步高效。
IndexedDB 本地存储 ：通过 y-indexeddb 实现本地持久化，支持浏览器刷新后数据保持一致。
状态管理和用户标识 ：使用 Yjs 的 awareness 模块实现用户的状态共享（如用户名、光标位置等），在不同用户间广播实时状态。

前端详细代码实现

以下是基于 React 和 Yjs 构建的协同编辑器，包含了光标、框选、输入同步以及基本的撤销/重做功能。

import React, { useState, useEffect, useRef, ChangeEvent, useMemo } from "react";
import * as Y from "yjs";
import { IndexeddbPersistence } from "y-indexeddb";
import { WebsocketProvider } from "y-websocket";

// 创建 Yjs 文档，用于共享状态
const ydoc = new Y.Doc();
const provider = new WebsocketProvider("ws://localhost:1234", "miaoma-doc", ydoc);

// 生成随机用户名称和颜色，用于区分不同协作用户
const randomColor = () => {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  return `rgb(${r},${g},${b})`;
};

const randomName = () => {
  const names = ["Alice", "Bob", "Charlie", "David", "Eve"];
  return names[Math.floor(Math.random() * names.length)] + Math.floor(Math.random() * 100);
};

const userName = randomName();
provider.awareness.setLocalStateField("user", {
  name: userName,
  color: randomColor(),
  userIcon: `https://robohash.org/${userName}?set=set1&size=100x100`,
});

// 防抖函数，用于优化输入同步
const debounce = (fn, delay) => {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

export const CollaborativeInput = () => {
  const [text, setText] = useState("");
  const yTextRef = useRef(null);
  const [currentUser, setCurrentUser] = useState({ name: "", color: "", userIcon: "" });
  const [remoteUsers, setRemoteUsers] = useState(new Map());
  const [remoteCursors, setRemoteCursors] = useState(new Map());
  const persistenceRef = useRef(null);

  useEffect(() => {
    // 初始化共享文本对象，用于多用户实时编辑
    const yText = ydoc.getText("shared-text");
    yTextRef.current = yText;

    // 使用 IndexedDB 存储数据，实现持久化
    persistenceRef.current = new IndexeddbPersistence("collab-input-db", ydoc);

    setCurrentUser(provider.awareness.getLocalState()?.user);

    // 监听用户状态变更，获取在线用户列表和光标位置
    provider.awareness.on("change", () => {
      const status = provider.awareness.getStates();
      const users = new Map();
      const cursors = new Map();

      for (const [key, value] of status) {
        if (key !== provider.awareness.clientID) {
          users.set(key, value.user);
          cursors.set(key, value.cursor);
        }
      }
      setRemoteUsers(users);
      setRemoteCursors(cursors);
    });

    // 初次载入时从本地数据库同步数据
    persistenceRef.current?.whenSynced.then(() => {
      setText(yText.toString());
    });

    // 监听 Yjs 文档更新，实时同步文本内容
    const updateHandler = () => {
      setText(yTextRef.current?.toString() || "");
    };
    ydoc.on("update", updateHandler);

    // 解绑事件和清理资源
    return () => {
      ydoc.off("update", updateHandler);
      provider.disconnect();
    };
  }, []);

  useEffect(() => {
    // 监听鼠标移动事件，实时同步光标位置
    const updateCursor = (e) => {
      provider.awareness.setLocalStateField("cursor", {
        x: e.clientX,
        y: e.clientY,
        windowSize: {
          width: window.innerWidth,
          height: window.innerHeight,
        },
      });
    };
    document.addEventListener("mousemove", updateCursor);
    return () => document.removeEventListener("mousemove", updateCursor);
  }, []);

  const debouncedHandleChange = useMemo(
    () => debounce((event) => {
      const newText = event.target.value;
      const cursorIndex = event.target.selectionStart ?? 0;
      if (yTextRef.current) {
        yTextRef.current.delete(0, yTextRef.current.length);
        yTextRef.current.insert(cursorIndex, newText);
      }
    }, 1000),
    []
  );

  // 处理文本框输入
  const handleChange = (event) => {
    debouncedHandleChange(event);
    setText(event.target.value);
  };

  const getCurrentCursorPosition = (value) => {
    if (!value) return;
    const { x, y, windowSize } = value;
    const cursorX = (x / windowSize.width) * window.innerWidth;
    const cursorY = (y / windowSize.height) * window.innerHeight;
    return { cursorX, cursorY };
  };

  return (
    <div>
      <h3>当前用户：<span style={{ color: currentUser.color }}>{currentUser.name}</span></h3>
      <div>
        其他在线用户：
        {Array.from(remoteUsers).map(([key, user]) => (
          <div key={key} style={{ color: user.color }}>
            <img src={user.userIcon} alt={user.name} style={{ width: 36, height: 36, borderRadius: "50%" }} />
            {user.name}
          </div>
        ))}
      </div>
      <textarea
        rows={10}
        value={text}
        onChange={handleChange}
        placeholder="Start typing..."
        style={{ width: "100%", padding: "8px", fontSize: "16px" }}
      />
      <div>
        {remoteCursors && Array.from(remoteCursors).map(([key, cursor]) => {
          const pos = getCurrentCursorPosition(cursor);
          return (
            <div
              key={key}
              style={{
                position: "absolute",
                width: "36px",
                height: "36px",
                left: `${pos?.cursorX}px`,
                top: `${pos?.cursorY}px`,
                backgroundColor: remoteUsers.get(key)?.color,
                borderRadius: "50%",
                pointerEvents: "none",
                backgroundImage: `url('${remoteUsers.get(key)?.userIcon}')`,
                backgroundSize: "cover",
              }}
            />
          );
        })}
      </div>
    </div>
  );
};

功能实现详解

用户和光标状态管理 ：通过 provider.awareness.setLocalStateField 来设置用户的名称、颜色和光标位置。 provider.awareness.on("change") 监听所有在线用户的状态变化，将状态保存在 remoteUsers 和 remoteCursors 中。
本地存储和同步 ：使用 y-indexeddb 将数据存储在 IndexedDB 中，通过 whenSynced 确保初始数据载入。
实时协同编辑 ：
- 输入同步 ：通过 Y.Text 实例 yTextRef.current 处理用户输入，应用 insert 和 delete 来操作文本内容。
- 光标同步 ：监听 mousemove 事件，实时更新 cursor 的位置并将其广播给其他用户。
撤销/重做（Undo/Redo） ：可以通过 Yjs 提供的 ydoc.undoManager 实现简单的撤销和重做功能（可以在此基础上进一步开发）。

服务端部分

HOST=localhost PORT=1234 npx y-websocket

或：

// server.js
const WebSocket = require("ws");
const { setupWSConnection } = require("y-websocket/bin/utils");
const port = 1234;

const wss = new WebSocket.Server({ port });
wss.on("connection", (ws) => {
  setupWSConnection(ws, wss);
});

console.log(`WebSocket server running on ws://localhost:${port}`);

简历优化（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
协同编辑器（文档类、画板类）wangEditor、CKEditor
团队基建工程（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】

前端前沿技术爱好者

Notion 与飞书文档协同方案精析，字节前端专家传授百万年薪架构师级项目重难点

【 初中级 】看你项目中写了做过文档项目，支持协同编辑吗？

协同编辑的需求

什么是协同编辑？

协同编辑的核心需求

协同编辑的方案实现

常见实现方案概述

操作变换 OT（Operational Transformation）

基于 CRDT （Conflict-free Replicated Data Types）的无冲突复制数据类型

基于锁的同步机制

操作变换（OT 算法）

概述

OT的实现步骤

使用场景

基于CRDT的无冲突复制数据类型

概述

CRDT的实现步骤

使用场景

基于锁的同步机制

概述

实现步骤

使用场景

【 中高级 】协同算法 OT、CRDT 有了解过吗，详细说说原理

OT（Operational Transformation）原理

OT 的基本概念

OT 的核心原理

CRDT（Conflict-free Replicated Data Type）原理

CRDT 的基本概念

CRDT 的业务前置设计

CRDT 的实现：基于状态与基于操作

基于状态的 CRDT 实现

基于操作的 CRDT 实现

CRDT 的实现库：Yjs

Yjs 的特点

Yjs 示例代码

基础操作

Provider 接入

【 专家级 】请你从零架构设计一个 Notion、飞书文档的协同编辑器，请给出协同详细技术方案与核心落地说明

需求说明

核心技术方案

前端详细代码实现

功能实现详解

服务端部分

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

技能描述

项目描述

大家先看这段描述：

深度优化一下

STAR

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

年包 50W+ 薪资长线规划

核心要素

补足短板

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

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

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

1~3年

3~5年

5年以上

职业规划指导

【初中级】看你项目中写了做过文档项目，支持协同编辑吗？

【中高级】协同算法 OT、CRDT 有了解过吗，详细说说原理

【专家级】请你从零架构设计一个 Notion、飞书文档的协同编辑器，请给出协同详细技术方案与核心落地说明