仰望星空时

💡前端提效｜什么是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> <!-- 更多图片... --> ...

Vue2.7.14下的单元测试环境搭建依赖 vue”: “^2.7.14”, “@babel/preset-env”: “~7.24.5”, “babel-core”: “~6.26.3”, “@vue/compiler-dom”: “~3.4.26”, “@vue/compiler-dom”: “~3.4.26”, “@vue/test-utils”: “~1.3.6”, “babel-jest”: “~29.7.0”, “babel-preset-env”: “~1.7.0”, “jest”: “~29.7.0”, “jest-environment-jsdom”: “~29.7.0”, “jest-serializer-vue”: “~3.1.0”, “jest-transform-stub”: “~2.0.0”, “jsdom”: “16.7.0”, “vue-jest”: “~3.0.7”, “vue-server-renderer”: “2.7.16”, 安装依赖： npm install @babel/preset-env bab ...

从SSR到ESR的前端渲染方式探索背景对于 web 页面来说，首跳场景（例如 SEO、付费引流）的性能普遍比二跳场景下要差。原因有多种，主要是首跳用户在连接复用，和本地资源缓存利用方面，有很大的劣势。首跳场景下，很多在端上的优化手段（预加载，预执行，预渲染等）无法实施。 在客户端缓存能力无法利用的情况下，利用 cdn 距离用户近的特性，可以结合缓存做一些性能优化。 SSR（Server Side Rendering）为了性能优化考虑，我们一般都会通过服务端渲染（SSR） ，将首屏动态内容直接服务端输出。 这种方式的优点是一次 html 返回即可包含页面主体内容，不需要浏览器二次请求接口后再用 js 渲染。但这种方式的缺点也比较明显，对于距离服务端远，或者服务端处理时间较长的场景，用户会看到较长时间的白屏。而且即使 html 返回完成了，用户并不会立即看到内容，页面还需要加载前置的 js，css 等资源后，才能看到内容。 缺点： ⾮常依赖服务端的处理时间 需要加载js 、css 、图⽚等静态资源， ⽩屏时间⻓ CSR（Client Side Rendering）为了减少白屏时间，考 ...

前端版本更新提示技术方案调研与实现需求场景项目迭代频繁，如果用户打网页后，长时间不关闭对应标签页，也不刷新页面，而此期间有新的版本已经上线了，需要用户手动刷新，不然会出现一直使用旧版本以及会出现一些不可预知的错误 实现思路 采取定时检查，定期向服务器发送请求，检查是否有新版本可用。 拦截页面的网络请求，并且在发现有新版本时，提示用户更新或者自动更新。 通过WebSocket连接实时接收到服务器的推送消息，如果有新版本可用，服务器可以通过WebSocket发送通知给客户端，提醒用户刷新页面。 主流实现方案方案一 通过 ETag 获取应用版本"ETag"(Entity Tag)是HTTP标头的一部分，用于标识网络资源的版本。它通常与HTTP缓存机制一起使用，以便客户端可以在后续请求中使用ETag来检查资源是否已经发生了变化。 ETag的生成 对于静态文件(如css、js、图片等)，ETag的生成策略是:文件大小的16进制+修改时间 对于字符串或Buffer，ETag的生成策略是:字符串/Buffer长度的16进制+对应的hash值 代码实现我们可以通 ...

Ant Design Vue 解决表单验证＋多选框引发的输入值不生效问题开发环境 Vue 2 Ant-Design-Vue 1.7.1 问题复现一个弹框组件采用了Ant Design Vue，包含一个多选框和一个输入框，整体格式为： <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"> <a-form-model-item prop="nation"> <a-select mode="multiple" v-model="nation" :options="regionOptions" @change ...