⚠️温馨提示： 文档中包含【1个】暂不支持的区域，请通过搜索关键字【暂不支持的文档区域】进行后续处理

手写 Promise，并通过 Promise A+ 规范所有测试用例

Promise A+ 规范的细节

Promise A+ 规范详细描述了 JavaScript 中 Promise 的行为标准，确保不同的 Promise 实现可以相互兼容。以下是 Promise A+ 规范的所有细节：

术语

  • promise ：一个对象或函数，其具有 then 方法，其行为符合本规范。
  • thenable ：一个具有 then 方法的对象或函数。
  • value ：任何合法的 JavaScript 值（包括 undefined，一个 thenable，或一个 promise）。
  • exception ：一个使用 throw 语句抛出的值。
  • reason ：一个表示 promise 被拒绝的原因。

要求

Promise 状态

一个 promi se 必须处于以下三种状态之一：pending（等待态），fulfilled（执行态），或 rejected（拒绝态）。

  • pending : 可以迁移到 fulfilled 或 rejected 状态。
  • fulfilled : 不可迁移到其他状态，必须有一个 value。
  • rejected : 不可迁移到其他状态，必须有一个 reason。
then 方法

一个 promise 必须提供一个 then 方法来访问其当前或最终的 value 或 reason。

promise.then(onFulfilled, onRejected)

  • onFulfilled 和 onRejected 都是可选参数。
  • 如果 onFulfilled 不是函数，必须忽略它。
  • 如果 onRejected 不是函数，必须忽略它。
onFulfilled 的执行
  • onFulfilled 必须在 promise 完成后被调用，且 promise 的 value 作为其第一个参数。
  • onFulfilled 不得在 promise 完成前被调用。
  • onFulfilled 必须只被调用一次。
onRejected 的执行
  • onRejected 必须在 promise 被拒绝后被调用，且 promise 的 reason 作为其第一个参数。
  • onRejected 不得在 promise 被拒绝前被调用。
  • onRejected 必须只被调用一次。
then 方法必须返回一个 promise
promise2 = promise1.then(onFulfilled, onRejected);
  • promise2 必须是一个新的 promise。
处理返回的值
  • 如果 onFulfilled 或 onRejected 返回一个值 x ，则运行 Promise 解决程序 [[Resolve]](promise2, x) 。
  • 如果 onFulfilled 或 onRejected 抛出一个异常 e ，则 promise2 必须以 e 作为拒绝原因。
  • 如果 onFulfilled 不是一个函数且 promise1 完成， promise2 必须以 promise1 的 value 作为其 value。
  • 如果 onRejected 不是一个函数且 promise1 被拒绝， promise2 必须以 promise1 的 reason 作为其 reason。
Promise 解决程序 [[Resolve]]
[[Resolve]](promise, x)

  • 如果 promise 和 x 指向同一对象，则以 TypeError 作为拒绝原因。

  • 如果 x 是一个 promise，采用 x 的状态。

  • 如果 x 是一个对象或函数：

    • 取出 x.then 。
    • 如果取 then 时抛出异常，以该异常作为拒绝原因。
    • 如果 then 是一个函数，将 x 作为 this 调用 then ，第一个参数是 resolvePromise ，第二个参数是 rejectPromise 。
    • 如果 then 不是一个函数，以 x 为值完成 promise 。

  • 如果 x 不是对象或函数，以 x 为值完成 promise 。

通过这些详细规范，Promise A+ 确保了 Promise 的行为一致性和互操作性。

V8 关于 Promise 实现细节概览

https://chromium.googlesource.com/v8/v8/+/refs/tags/12.6.228.7/src/builtins/promise-constructor.tq

chromium.googlesource.com

核心实现

Promise 的实现，离不开以下几个关键思路：

  1. 面向对象编程
  2. 发布订阅模式
  3. 链式调用

设计一个计算执行器

描述

请实现一个计算器简单功能，给定表达式，例如： 1+2*3 ，计算出对应结果，要求：

  1. 运算规则易拓展

  2. 轻松为计算器的输入输出值进行处理

  3. 加分项：拓展到自定义表达式的执行

  4. 微内核设计 plugin，可参照 babel plugin、vue plugin 等

  5. AOP 面向切面编程设计思想，可参照 axios.request.interceptors.use

  6. 编译原理

    1. compiler
    2. tokenizer
    3. interpretor

计算器可以实现加减乘除等运算，并且特别容易拓展运算规则，且能够轻松为计算输入与输出拓展加强规则

面试前准备

技能描述

  • 熟练掌握 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 开发脚手架、打包构建优化工具及中间件服务
  • 掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
  • 团队管理经验，并在项目架构设计与性能优化方面具有丰富经验

  1. 丰富的可视化经验，主导可视化大屏低代码平台设计

  2. 3D 数字孪生平台你做了成果

    1. webGL、webassembly
    2. 正射影像、倾斜摄影
    3. Tile
    4. 模型，白膜（blender）、精模
    5. 材质
    6. 光效
    7. 粒子系统

  3. 全面性能优化

    1. 打包构建

      1. webpack，chunk、treeshaking、happypack、cache-loader 等等
      2. Webpack Module Federation

    2. 资源

      1. 图片、字体压缩
      2. 请求队列
      3. oss
      4. cdn

    3. 应用

      1. 数据结构优化
      2. 应用模块更新

    4. 缓存

      1. 强缓存（Expiration、Cache-Control）
      2. 协商缓存（Etag）
      3. 策略缓存（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 打通 】...
其实还不够，这些项目是求职香饽饽

  • 大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)

  • 大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)

  • 企业级脚手架工具开发实践

  • 企业级文档编辑器飞书文档开发实践

  • 前端性能、异常与行为监控

  • 3D 可视化数字孪生低代码实战 💥

    • 基于 cesium（arcGis、超图） 方案的 WebGIS 开发实践
    • 基于 openlayer、mapbox 开发
    • 基于 WebGL 3D 可视化开发实践

那么，如何冲击高薪？

拿高薪，就以下几个核心要素

  1. 全面的技术储备

    1. Vue 经验、React 经验，Vue3 + Typescript，React18（Hooks、Concurrent）【框架基础】
    2. 框架原理，React 生态库原理（React-Router、Redux）、Vue 生态库原理
    3. 工程化（构建工具：Webpack、Vite、Rspack、ESBuild、swc）
    4. CI/CD 自动化，自动化构建、自动化部署
    5. 基建能力（Node、命令行工具开发 Cli），UI 库、图表库、工具库
    6. 业务方面（管理系统、图表类），衍生 -> 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  2. 至少参加过两个以上大型项目，并主导过一个复杂项目

    1. 管理系统，（项目搭建、方案、技术栈、CI/CD 等等）
    2. 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  3. 面试表现好

    1. 个人介绍【 打个草稿 】，基本信息、技术栈、项目重难点

    2. STAR：

      • 遇到了什么问题 question，需求
      • 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
      • 方案落地
      • 反思，优化
    • 面试过程中，重点去复习只是重难点（v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型）
    • 技术储备，由你的项目经验体验，技术怎样在你的项目中落地的

  4. 学历还行

    1. 大专，尽快考一个本科证（年限去掉）
    2. 民办
    3. 内推，学历问题、工作经历的问题

为什么薪资总上不去的，是你？

  • 项目简单，管理后台一做就是大半年，天天 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 可视化开发实践

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

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

1~3年

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

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

3~5年

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

  • 关注社区中关于进阶的资料和路线，强化基础知识；

  • 深入掌握常用框架的高级用法，探索其原理；

  • 在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；

  • 思考提高团队效率的方法，例如：

    • 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
    • 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
    • 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
    • 尝试搭建CI/CD平台，维护公司内部的通用npm包；
    • 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

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

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

职业规划指导

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

【未知组件reminder】