nextjs初体验
Next.js 初体验总结项目背景最近在学习 Next.js 框架进行项目开发，这是一个非常强大的 React 全栈框架，它提供了服务端渲染（SSR）、静态站点生成（SSG）等现代 Web 开发所需的关键特性。 遇到的问题：数据库连接实例丢失在开发环境（dev）中，我遇到了一个有趣的问题。具体表现为： 使用 MySQL 作为后端数据库 采用单例模式创建数据库连接 当应用发生热重载（Hot Reload）时，偶尔会出现数据库实例丢失的现象 问题分析起初，我认为这可能是单例模式实现的问题。但在对比测试其他框架（如 NestJS）后发现，这个问题似乎是 Next.js 特有的。这让我开始思考框架本身的特性： Next.js 是一个全栈框架，同时处理前端和后端逻辑 开发模式下的热重载机制可能会影响到后端状态的维护 传统的 Node.js 单例模式在这种环境下可能不够稳定 解决方案通过深入研究，发现可以使用 globalThis 来解决这个单例重复加载的问题。示例代码如下： 1234567891011121314151617// lib/db.tsimport mysql...
前端图片缓存，页面闪烁问题
问题描述1. 图片闪烁问题在 React 应用开发中，当我们将 img 标签封装到组件中并在页面间切换时，经常会遇到图片闪烁的问题。这种闪烁现象严重影响了用户体验，使界面切换显得不够流畅。 2. 复杂状态管理问题在处理复杂状态时，特别是涉及以下场景： 表单创建后的页面刷新 全局状态的调整 组件间数据共享 虽然使用常规的 React hooks 可以处理这些情况，但当业务逻辑变得复杂时，会导致频繁的 setState 调用。虽然可以通过自定义 hook 来优化代码结构，但仍然存在一些挑战。 例如，在一个电商应用中： 侧边栏需要显示商品总量 主页面展示商品列表 两个独立组件都需要调用相同的商品列表接口 这种情况下常见的解决方案是重复调用接口，虽然实现简单，但会造成不必要的性能开销。之前我主要通过 MobX 这类状态管理工具来减少重复请求。 解决方案1. 图片加载优化为了解决图片闪烁问题，采用了以下方案： 使用 CSS background-image 替代 img 标签 利用浏览器对背景图片的预加载和缓存机制 尽管尝试过 img 标签的 lazy...
elasticSearch使用笔记
ElasticSearch 简介 核心特性和优势 数据统计快，查询快 算法优秀，倒排索引，列存储机制，对于聚合分析有较大优势 Docker 部署 ElasticSearch单容器部署ElasticSearch 可以通过 Docker 快速部署，这是开发环境或小规模应用的理想选择。 docker-compose 配置示例对于更复杂的配置，推荐使用 docker-compose： 我这里因为是内部日志分析需求，所以就是单节点部署，实测下来，每月大概 50g 左右的存储量，日志根据不同的日志 ID 分类存储，查询分析性能符合要求，基本都是秒级返回 这里比较关键的就是配置密码登陆了，我这里没有使用 ssl。经验之谈就是要切记能使用密码就使用密码，不能偷懒，不使用默认端口部署，之前使用 kafka 的默认端口部署，就莫名出现异常的数据，互联网环境复杂，各种爬虫，扫描。必须要小心 就是这个 jvm 内存了，我用的 1g，如果是大型集群，可以提高，根据设备的内存大小决定，不过实际使用下来，1g...
pokemonInterview
JavaScript 算法面试题精选本文整理了常见的 JavaScript 编程面试题型，包含详细的代码示例与解析，帮助你应对技术面试中的编程挑战。 1. 字符串处理1.1 判断回文字符串判断一个字符串是否为回文字符串（正读和反读都一样）。 1234567891011121314151617181920212223242526/** * 判断字符串是否为回文 * @param {string} s - 输入字符串 * @return {boolean} - 是否为回文 */function isPalindrome(s) { // 1. 预处理：转小写并移除非字母数字字符 const cleanStr = s.toLowerCase().replace(/[^a-z0-9]/g, ""); // 2. 双指针法判断是否回文 let left = 0, right = cleanStr.length - 1; while (left < right) { if...
Tailwind CSS 学习笔记
前言最近准备学习 Tailwind CSS，之前的前端知识除了最基础的语法外，在实际的项目中，发现如何使用标准化样式是比较难的。也就是说，如何让样式标准化，这让我了解了 Tailwind CSS。 通过浅层次的封装，Tailwind CSS 可以让页面的 CSS 效果尽可能地达到统一，并且是基于原生的标签。很多框架组件的封装其实层次高了点，也就是把样式和功能都封装了，对于一些定制化需求，难以满足样式的调整。 比如提供的 Antd 的 Input 组件，它本身就封装了众多样式调整，并且还需要配合全局的样式，有时候调整单个样式会影响到其他的组件样式。在我看来，这个封装层级还是高了点。 感觉 Tailwind CSS 的层次就挺好，能够充分满足定制化需求。当然，缺点也很明显，那就是有学习曲线，它是对于样式的再定义，增加了很多 Tailwind 自己的定义。 幸好官网有详细的文档，介绍如何使用，还有代码例子，只是需要学习和记忆，但发现很有用。刚好可以补全对于常用 HTML 标签的使用，还有一些常见组件，比如卡片，列表，人物头像，输入框的样式定义，获益良多。 之后会慢慢把下面这些 AI...
nginx配置之CDN回源
CDN 回源配置要点 cdn 回源是生产环境配置不可缺少的一部分，但是这其中又有一些细节，需要我们注意。 首先，cdn 回源就是当用户请求资源时，cdn 节点没有命中，就会回源到源站获取资源。此时一般两种做法： 直接 nginx 导向文件夹，也就是打包好的静态文件 此时需要注意的是压缩方法。切记，线上环境打包时候可以同时提供 gz，br 这些压缩文件，当请求的 url 头部带有 accept-encoding: gzip, br 时，就可以优先返回压缩文件了，这样可以减少带宽的消耗，加快页面加载速度，此时静态文件夹中是可以只有 gz 或者 br 后缀的文件的，nginx 或者 http-server 会自动去匹配，然后返回给用户。 此时就需要关注压缩方式了，gz 还比较好处理，但是 br 就需要我们注意了： br 是 brotli 压缩，需要 nginx 安装 brotli 模块 需要配置 brotli 的压缩参数，否则会导致压缩失败 据说 nginx 高版本会提供 br，但是我的 nginx 是低版本，并没有提供 br 我这边是 nginx 那边做...
Gateway服务
在现代分布式系统架构中，Gateway（网关）服务扮演着至关重要的角色。本文将探讨 Gateway 服务的核心价值和主要应用场景。 服务路由与负载均衡在大型项目中，Gateway 服务几乎是不可或缺的组件。虽然在简单的开发环境中可能并不必要，但在实际项目中，我们经常需要处理多服务的场景。例如： 支付系统需要对接多个支付服务 推送系统需要集成多个推送渠道 这种多服务架构能够提升系统的健壮性和负载均衡能力。Gateway 的核心职责之一就是解决服务路由问题：当客户端发起连接时，如何将请求精确地分发到相应的后端服务。 后端服务封装Gateway 的另一个重要价值是实现后端服务的封装。通过 Gateway： 客户端只需要知道单一的 Gateway 服务地址 后端的支付服务、推送服务等实现细节都被很好地隐藏 在分布式架构中，可以通过增加后端服务实例并更新 Gateway 的服务列表来实现服务扩展和分流 通用功能集中化Gateway 还可以集中处理多个关键的横切关注点，包括： 统一鉴权 日志记录 系统监控 限流控制 熔断机制 将这些基础功能集中在 Gateway...
A*寻路算法的JavaScript实现
A*算法简介A*（A-Star）算法是一种启发式搜索算法，广泛应用于游戏开发中的寻路系统。 核心概念A*算法的核心在于其评估函数:f(n) = g(n) + h(n),其中： g(n)：从起点到当前节点的实际代价，g(b)+(b,c) h(n)：从当前节点到目标节点的估计代价（启发函数） f(n)：总估计代价 算法通过维护一个开放列表（openList）来存储待评估的节点，每次从中选择 f 值最小的节点进行扩展。这种方式既能避免遍历大量远离目标的节点，又能有效规避障碍物，从而找到最优路径。 记住 f(n) = g(n) + h(n) 每次轮询 openList，都是找 f 值最小的节点 将当前节点从 openList 移到 closedList 评估所有相邻节点，此时会更新各个相邻节点的 f 值，g 值 如果是新节点，添加到 openList 如果找到更优路径，更新节点信息 直到找到目标节点，返回路径 代码实现下面是一个完整的 JavaScript...
跨域和OAuth详解
跨域（CORS）详解什么是跨域？跨域（Cross-Origin Resource Sharing，CORS）是一种浏览器的安全机制，用于限制网页中的脚本只能访问同源（相同协议、域名和端口）的资源。当网页需要请求不同源的资源时，就需要进行跨域处理。 CORS 关键响应头跨域主要通过以下HTTP响应头来控制： Access-Control-Allow-Origin：指定允许跨域访问的域名 可以设置具体域名：http://example.com 使用*允许所有域名（不推荐用于生产环境） Access-Control-Allow-Methods：允许的HTTP方法 常见值：GET, POST, PUT, DELETE, OPTIONS等 Access-Control-Allow-Headers：允许的请求头 可以指定自定义请求头 常见值：Content-Type,...
AI系统：行为树vs状态机
游戏AI系统1. 行为树核心系统1.1 基础节点类型123456789101112131415161718192021222324252627282930313233343536// 节点状态枚举enum NodeStatus { SUCCESS, // 执行成功 FAILURE, // 执行失败 RUNNING // 正在执行}// 抽象节点基类abstract class BTNode { protected blackboard: Blackboard; // 共享数据 constructor(blackboard: Blackboard) { this.blackboard = blackboard; } abstract tick(): NodeStatus;}// 组合节点基类abstract class CompositeNode extends BTNode { protected children:...