前言

虚拟滚动在前端中是一个很常见的解决方案，由于浏览器对于内存的限制，当页面需要展示大量 DOM 节点（如：列表数据超过 10 万）的时候，如果完整渲染整个 DOM 树，当页面数据需要更新重新渲染的时候就会出现滚动卡顿，这个时候就需要虚拟滚动去模拟浏览器原生滚动事件，从而避免这个卡顿情况。

手写难度：⭐️⭐️⭐️

涉及知识点：

• 滚动监听事件 wheel/move
• 事件节流
• 滚动偏移量 offset
• 按需渲染计算方案

前言

前端路由，大家都使用过，那么有没有想过它是怎么实现的吗？如：Vue-Router 或者 React-Router。或许有个大概印象，但是真正要自己去实现还是没有什么思路，那么这篇文章将完整的实现思路去实现一次。

手写难度：⭐️⭐️⭐️

涉及知识点：

• history api 和监听事件
• onhashchange 监听事件
• Web Component 自定义组件

背景

之前有写过专门一篇关于微前端架构的基础知识——《前端架构成长之路——微前端架构理论篇》，但是里面主要讲几个点：

• 微前端是什么，具体能做些什么
• 微前端的一些主流框架
• 微前端拆分项目的一些原则

那么其实对于微前端应用还是有些不太清楚，下面就用微前端架构去对某个古老项目进行框架升级，这其实也是微前端架构主要特性之一，对项目升级的方案之一。

“有时我对 ChatGPT 的理解能力感到惊讶，但是更多时候，我不得不拼命推动它，朝着我想要的方向前进。它有时会产生意料之外的结果，让我感到非常沮丧。”

“它像一个吸收了所有人类知识、但需要别人帮忙才能把这些知识串起来的应届毕业生。”

“看来我今年的工作是安全的。但是，我需要好好学习 ChatGPT，精通它的使用，让我明年也是安全的。”

最适用现在AI技术的一句话 —— AI 与人类不是竞争关系，它未必会减少机会，反而可能带来更多的机会。

前言

深浅拷贝经典前端面试题，不仅仅只是实现逻辑，更加是对整个Javascript语言的实现背后一套理论，从基础数据类型到原型链一整套知识体系的熟悉程度，下面我们就从简单到困难一一实现。

手写难度：⭐️⭐️⭐️

涉及知识点：

• 数据类型在内存空间的存储
• 原型以及原型链（这是实现拷贝一个重要知识点，如何拷贝自定义的类实例对象）
  • 如何拷贝一个原型对象 如： a = {}; clone(a.__proto__)
• 数组的判断
• 日期/正则等其他内置对象的拷贝
• 函数的拷贝

前言

EventBus作为发布订阅设计模式的经典应用场景，很值得我们去学习研究它的实现原理。

手写难度：⭐️⭐️

背景

前端面试100道手写题第二篇《throttle与debounce》，说一下为什么选这两个，其实大家都有在用，我们先来了解一下两个函数的作用：

• debounce 防抖，用于减少函数触发的频率，在一个delay时间内，如果触发delay时间归零，直到delay时间到才会触发函数
• throttle 节流，用于限制函数触发的频率，每个delay时间间隔，最多只能执行函数一次

选这两个手写的原因其实很简单，就是面试频率高，而且项目实战会经常用到，同时里面还会隐藏一些知识点和目前公共库的一些问题（见文章末尾）。

接下来就让我们开始手写撸代码吧！

手写难度：⭐️⭐️⭐️

高效能人士的7个习惯

不管是工作还是学习，有些人做事的效率很高，而有些做事的效率就很低，那么有什么方式可以提高自己的工作效率，这本书主要就是讲如何去培养自己高效能的习惯，改变自己的做事和思考的方式。

原因

今年的金三银四面试，遇到了很多新的面试八股文，其实心里对手写题或者算法题有一定抵触，因为实际工作中基本上就不会用到这些东西，但是正因为这些基础八股文，才能真正验证一个人对技术有多热爱的程度。
也有可能近几年没有对这些基础知识进行巩固，所以干脆一狠心，先立个flag, 准备完成100道手写题。

Promise

chatGPT工具收集

1. chatgpt-i18n: AI自动翻译i18n.json

Github地址： https://github.com/ObservedObserver/chatgpt-i18n