做一个有温度和有干货的技术分享作者 —— Qborfy

前言

循环轮播图，基本上大家用的都是现有组件，如果要让你自己设计实现一个，其实最主要的两个点：循环算法和滚动动画

手写难度：⭐️⭐️

涉及知识点：

• 循环播放的思路
• CSS 动画，transtion和 transform
• Web Component 自定义组件

做一个有温度和有干货的技术分享作者 —— Qborfy

背景

最近在开发一个简单的个人记录网站，技术栈是使用 Vite + Vue3，由于使用的单台服务器，有时候服务器会被限制带宽，所以平时都会比较访问比较慢。所以想实现一个离线应用，而 PWA 应用则是目前最佳方案。

本文涉及知识点如下：

• PWA 的概念
• Service Worker使用
• 用构建工具搭建 PWA 应用

背景

其实从今年开始运营这个博客，我一直想增加一些新的交互功能，如：评论，之前一直有些问题没搞定，现在终于通过 Google 搜索解决问题了， 其实也算是每天学习一些新东西。

解决问题：给 Hexo 博客新增 Github评论功能

为什么选择 Github 呢？是因为 Github 对于偏向开发人员基本上属于一个必注册网站，而我博客的内容又偏向于技术，所以才会采取这个。

前言

虚拟滚动在前端中是一个很常见的解决方案，由于浏览器对于内存的限制，当页面需要展示大量 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时间间隔，最多只能执行函数一次

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

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

手写难度：⭐️⭐️⭐️