大家好，我是前端西瓜哥。vscode 在之前的某个版本更新后，默认情况下，假设有个目录 a ，其下只有唯一一个目录 b，vscode 的目录树就会将 a 和 b 作合并，变成a/b，就像下面这样：对于 Java 项目的包结构来说，这种展示方式很有用。但我不是 Java 仔，我无法接受。为解决这个问题，我们需要去设置里找到 vscode 的目录紧凑模式（Compact Folders）选项。就能看到

大家好，我是前端西瓜哥，今天来看看简历中阐述项目经历的 STAR 法则是什么。

大家好，我是前端西瓜哥。本文将讲解 Web 页面如何实现自定义菜单功能。线上 demo：https://codepen.io/F-star/pen/WNOvQVQ思路核心思路是：注册 contextmenu 事件，取消该事件的默认行为，然后通过 event 对象拿到光标相对视口的坐标位置（event.clientX 和 event.clientY），通过绝对定位的方式，将自己自定义的初始化时不可见

大家好，我是前端西瓜哥。本文为动态规划模型中，0-1背包问题的套路总结。将 n 个物品（重量用 weight 数组表示）装入背包，在不超出背包总重量 w 的情况下，……0-1 背包问题，就是依次决策是否将一个个物品装入背包中，将 n 个物品（重量用 weight 数组表示）装入背包，在不超出背包总重量 w 的情况下，求能装入的最大重量。最值问题需要定义一个 boolean 类型的二维数组 。i表示

大家好，我是前端西瓜哥。最近做需求，需要将数据保存到 localStorage 里，在组件初始化的时候获取，然后修改该值的时候，要保存到本地的 localStorage 中。倒是并不难。function App() {  const STORAGE_NAME = 'app_theme';  const&nbs

大家好，我是前端西瓜哥。今天来讲讲几何算法中，比较经典的算法：矩形碰撞和包含检测算法。矩形碰撞检测是被广泛使用的算法。比如在游戏中，为了优化图形碰撞判断效率（复杂不规则图形之间的碰撞算法很复杂），经常会使用到包围盒。所谓包围盒子是一个矩形，通常正好包围住一个规则或不规则的图形。如果两个图形的包围盒没有发生碰撞，那这两个图形一定不会发生碰撞，因为矩形的碰撞算法很简单，所以能够很好地优化性能。

大家好，我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意，并用 React 来实现两种虚拟列表组件。虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。虚拟列表解决的长列表渲染大量节点导致的性能问题：一次性渲染大量节点，会占用大量 GPU 资源，导致卡顿；即使渲染好了，大量的节点也持续占用内存。列表项下的节点越多，就

大家好，我是前端西瓜哥，今天我们用 WebSocket 来实现一个简单的聊天室。WebSocket 是一个应用层协议，有点类似 HTTP。但和 HTTP 不一样的是，它支持真正的全双工，即不仅客户端可以主动发消息给服务端，服务端也可以主动发消息给客户端。尤其是后者，让我们不用再基于 HTTP 长轮询或短轮询的低效方式来实现服务端通知。相比 HTTP，WebSocket 的服务端推送更轻量，并能减少

大家好，我是前端西瓜哥。今天来学习 BFC。BFC，为 Block Formatting Context 的缩写，中文翻译为 块格式上下文。BFC 是 Web 页面 CSS 渲染的一个机制，是块级盒子布局中产生的区域。你可以将一个 BFC 可以理解为一个容器，里面的元素不会影响到容器外的布局。怎样的元素属于 BFC？根元素，也就是 HTML 元素浮动元素，即使用了 float 属性且值不为 non

大家好，我是前端西瓜哥。今天我们看看React 中使用 Redux 的 4 种写法。Redux 是一种状态容器 JS 库，提供可预测的状态管理，经常和 React 配合来管理应用的全局状态，进行响应式组件更新。Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态。对于这种情况，如果通过 props 层层传递，代码会变得不可维护，这时候我们可以考虑使