仰望星空时

Egg.js学习心得一、Egg.js 基本概念1.Egg.js 是什么https://eggjs.org/ Egg.js 是基于 Node.js 和 Koa 的企业级 Web 框架，由阿里团队开源，专注于约定优于配置和可扩展性。 Egg.js 的特点： 基于Koa，支持 async/await，性能优异 强调规范与工程化，框架稳定，测试覆盖率高 适合中大型Web应用和API服务 渐进式开发 提供基于Egg定制上层框架的能力 高度可拓展的插件机制 2.Egg.js 的核心思想Egg.js 采用 MVC 架构，将业务逻辑进行分层管理，提高代码可维护性。 主要分层包括： Controller（控制器） Service（业务逻辑） Model（数据模型） Router（路由） Middleware（中间件） 二、项目结构1.安装&快速启动mkdir egg-example && cd egg-examplenpm init egg --type=simplenpm inpm run devopen http://localhost:7001 2.基本 ...

Jotai学习心得了解和使用Jotai之前，我对跨组件状态管理的主要手段是useState + props、Context，以及在部分场景下用EventBus做组件间通信。但在项目复杂度逐渐上升后，这些方案要么带来明显的prop drilling，要么导致组件订阅范围过大、渲染不可控。 Jotai 采用原子方法进行全局 React 状态管理。 Jotai 给我的一个最直观感受是：它不是在引入一个“更大的状态中心”，而是在把状态拆得足够小。 Atoms are the building blocks of universe and clump together into molecules– 原子是宇宙的构建模块，聚集成分子—— Jotai 原子是小而孤立的状态片段。理想情况下，一个原子包含非常小的数据（虽然这只是个惯例。仍然可以把所有状态放到一个原子里，虽然那样性能会非常慢） import { atom } from 'jotai';// 原始原子可以是任何类型：布尔、数字、字符串、对象、数组、集合、映射等等。const themeAto ...

背景 “传统的五子棋只是把五个子连成一条线，而技能五子棋则是在传统的五子棋中加入了技能。” 几个月前，“技能五子棋”一度在社交平台出圈。 它之所以有趣，并不只是玩法变复杂了，而是规则本身发生了变化： 胜负不再只取决于落子，而是取决于你如何使用能力。 有意思的是，类似的变化，也正在软件工程和AI领域发生。 如果回看近几年的技术演进路径，会发现一个非常清晰的趋势： -2024年：Prompt工程 我们学习如何“把话说清楚”，让模型更好地理解意图。 -2025年：上下文工程（Context Engineering） 我们开始关注如何构建长期、稳定、结构化的上下文，让模型“理解得更全面”。 -2026年：Skills工程 不再只是临时指令，而是把经验、规则、最佳实践沉淀为可复用、可组合的能力单元。 所谓Skills，本质上就是把“人脑里的经验”产品化、模块化。 也正是在这样的背景下，一个由Vercel官方发布的React Best Practices Skill开始进入我的视野。 这个Skill是什么React Best Practices Skill是一个将 React/Ne ...

为什么我在Zoom网页复制不全？原来是被“虚拟滚动”骗了！💭 故事起因：一次复制失败的奇遇主包读这个海硕一直有着录课然后用转文字内容进行总结和复习的习惯，在最近的dl课上忘记了自己录，只能靠着zoom的recording转录文字进行总结了。于是我尝试在zoom上把整份文字复制下来，但发现了一个神奇的事情——CA操作后，肉眼看到确实全蓝选中，可粘贴后——只剩视口展示的几行？！ 我第一反应：“这肯定是zoom处理了复制事件吧？”但是转念一想，如果想要限制我们复制，为啥不直接像一些网站直接禁止复制事件？于是我进行了验证，打开控制台加监听： document.addEventListener('copy', () => console.log('copy event triggered')) 结果果然复制事件照常触发，没有被拦截。 那……问题来了，既然复制事件没被拦截，那剩下的文字去哪了？ 作为一位前端开发者，这样的问题当然值得去思考和解决 🕵️‍♀️ 真相：不是没复制，而是根本没“存在”经过一些探索和思考后，我通过开发者工具往DOM里一看， ...

💡前端提效｜什么是Monorepo？最近在做新项目时再一次采用了Monorepo；于是借此机会便给组员分享了一下什么是Monorepo 用一句话总结就是：Monorepo = 一个仓库，装下多个独立项目。 🔍 一句话解释Monorepo（Monolithic Repository）直译叫“单体仓库”， 它让多个项目（比如一个 React 主应用 + Vue 后台 + UI 组件库 + 工具库）共存在同一个 Git 仓库中， 但每个项目都能独立开发、独立部署、互不干扰 也就是说： 它不是“把所有代码揉成一个”，而是“统一管理、灵活开发”。 和“单体应用（Monolith）”完全不是一回事！ 🚀 为什么越来越多前端团队选择 Monorepo？1. 代码共享无敌丝滑组件库、工具函数、TS 类型…… 不需要发 npm 包，直接本地引入，修改即生效，开发体验极佳 2. 依赖管理更干净一个仓库一个 node_modules。 用 pnpm 管理 workspace，彻底告别“依赖地狱”。 3. 一次提交搞定多个项目需要同时改应用和组件库？ 一次 commit，全都搞定。追溯历史更清 ...

JS异步并发&并行并发是宏观概念，我分别有任务 A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。 并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行 PromisePromise是在ES6中确定的对异步及回调处理的规范实现 一个 Promise 必然处于以下几种状态之一： 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。 已兑现（fulfilled）: 意味着操作成功完成。 已拒绝（rejected）: 意味着操作失败。 使用Promise封装ajax 关键：return new Promise((resolve, reject)=>{...}) 用以返回一个Promise对象。 ajax = (method, url) => { return new Promise((resolve, reject)=>{ //关键，用以返回一个Promise对象 var request ...

JS基于原型的继承理解原型＆原型链JavaScript 只有一种结构：对象。每个对象（object）都有一个私有属性指向另一个名为原型（prototype）的对象。原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。 JavaScript 对象是动态的属性（指其自有属性）“包”。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。 student._proto_ === Student.prototype // 隐式原型 显示原型 class Person{ constructor(name){ this.name = name; } drink(){ console.log('喝水'); ...

V8垃圾回收机制垃圾回收机制目标：清除不再使用的对象，使腾退出所占用的内存 在浏览器的发展历史上有两种解决策略： 标记清除 引用计数 标记清除标记清除分为：标记阶段和清除阶段。 首先它会遍历堆内存上所有的对象，分别给它们打上标记，然后在代码执行过程结束之后，对所使用过的变量取消标记。在清除阶段再把具有标记的内存对象进行整体清除，从而释放内存空间。 使用标记清除策略的最重要的优点在于简单，无非是标记和不标记的差异。通过标记清除之后，剩余的对象内存位置是不变的，也会导致空闲内存空间是不连续的，这就造成出现内存碎片的问题。内存碎片多了后，如果要存储一个新的需要占据较大内存空间的对象，就会造成影响。对于通过标记清除产生的内存碎片，还是需要通过标记整理策略进行解决。 简而言之： 优点：简单 缺点：内存碎片化、分配速度慢 标记整理经过标记清除策略整理后，老生代内存中因此产生了许多内存碎片，如果不进行清理内存碎片，就会对存储造成影响。 标记整理（Mark-Compact）算法 就可以有效地解决标记清除的两个缺点。它的标记阶段和标记清除算法没有什么不同，只是标记结束后，标记整理算法会将活着的对 ...

前端响应式的实现Flex布局flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 一般会用到的属性： flex-direction:设置Flex容器中子元素的排列方向 flex-wrap:设置Flex容器中子元素的换行方式 flex-flow:设置Flex容器中子元素的排列方向和换行方式 justify-content:设置Flex容器中子元素在主轴上的对齐方式 align-items：用于设置Flex容器中子元素在交叉轴上的对齐方式。 align-content：用于设置多行或多列的Flex容器中子元素在交叉轴上的对齐方式 百分比布 ...

JS实现仿京东首页商品轮播图近期做了一个面试题，仿照京东首页商品轮播图实现一个轮播图 1. HTML 结构搭建HTML 部分主要负责构建轮播图的整体结构，包含一个轮播图容器、图片展示区域以及分页器容器： <div class="carousel"> <div class="carousel-images"> <!-- 多个图片项 --> <div class="carousel-image active"><img src="1.jpg" alt="Image 1"></div> <div class="carousel-image"><img src="2.jpg" alt="Image 2"></div> <!-- 更多图片... --> ...