霪霖笙箫的博客

熟悉项目 ing，看到一些很陌生的东西，回来充电 defu简易 JS 库，支持 TS。递归地分配默认属性。轻量且快速。 https://github.com/unjs/defu 123import { defu } from 'defu'const options = defu(object, ...defaults) 该库是用来合并参数 （可传对象、数组、函数等） 对象的话，分配默认值时，最左边的参数具有更高的优先级。 12console.log(defu({ a: { b: 2 } }, { a: { b: 1, c: 3 } }))// => { a: { b: 2, c: 3 } } 注意： 对象和默认值未修改 空值（空值和未定义）将被跳过。如果您需要保留或不同的行为，请使用 defaults-deep 或 omit-deep 或 lodash.defaultsdeep。 将跳过 proto 和构造函数键 ...

了解Nuxt3 是基于 Vue3 的一个框架，它提供了一些开箱即用的功能，如路由、状态管理、服务器端渲染等，可以帮助开发者快速构建高性能的 Vue 应用。 为什么要学习？工作需要，SSR 顺便了解下，写篇博客记录一下 优点： 支持 Vue3 & Vite 更好的 SEO 搜索引擎优化 提高开发效率（官网这么说，上手试试） 自动化路由 支持多种部署方式 服务端渲染 静态化生成 SPA 单页应用single page application 单页应用，一般也称为客户端渲染 CSR client side Render。整个站点由一个 HTML 页面构成， 所有内容通过 JS 动态加载和渲染。一般的，用户在访问 SPA 站点，页面只有第一次加载会请求资源，后续都是通过 AJAX 异步请求获取数据并动态更新页面。 存在问题： 首屏加载慢（白屏问题），加载大量 JS 和 CSS 文件 SEO 不友好（相对）搜索引擎无法直接抓取页面内容 内存占用高，会在内存中缓存大量数据 SSR 服务端渲染将客户端渲染和服务端渲染结合起来，主要是在服务端生成好 HTML （结构和内容）代码 ...

前言数组是 JavaScript 中最常用的数据结构之一，它允许我们存储和操作一组数据。在 JavaScript 中，数组是一种特殊的对象，它具有一些内置的方法，可以帮助我们更方便地操作数组。本文从创建到操作，整理了大部分常用方法（部分冷门和基本用不到的就省略了，需要时自行 CDN 吧，不用真会忘 ……） 创建数组的方式Array 数组构造函数https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Array 用于创建一个新数组，接收一个或者多个参数 12345new Array() // []new Array(4) // [,,,,] 长度为4的数组，但是数组元素并不存在new Array('4') // ['4'] 长度为1, 数组元素是字符串4new Array(2, 3) // [2, 3] 长度为参数长度，所有参数作为数组元素构建数组new Array(undefined) // [undefined] 长 ...

前言 温故知新，顺便做下知识总结。把别人的好文拿来看一遍，顺便做下笔记，瞧一瞧加深记忆。 在 js 中，对象类型是非常重要的类型之一，也是项目中数据处理常用的类型之一，虽然这种类型我们经常使用，但是它的方法却不怎么用的到或者很少用到，不知不觉 js 的对象方法已经来到了 29 个了，今天就来看看这 29 个方法的使用。还有当 typeof Array 的时候，会发现数组是一个对象类型，也可以说数组是一个特殊的对象，所以大多对象的方法都可以对数组使用，而且有些效果可能会使你大跌眼镜。 正文Object.defineProperty 劫持对象属性https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty 了解 vue 的应该都比较熟悉这个方法了，因为在 vue2 中，底层的响应拦截就是使用的 Object.defineProperty 加观察者模式实现的。首先说这个是因为描述对象在后面一些方法中都会使用到。Object.defineProper ...

Number与数字类型相关的方法 （目前只有 3 个） inRange检查给定数字是否在两个数字之间。包含起始数字。结束号码是唯一的。范围的开始和结束可以是升序或降序。如果未指定结束值，则将其设置为起始值。并且 start 设置为 0。 基本用法 传递范围的数字、开始和结束（可选）。如果给定的数字在范围内，_.inRange 函数将返回 true。 12345678910import { inRange } from 'radash'inRange(10, 0, 20) // trueinRange(9.99, 0, 10) // trueinRange(Math.PI, 0, 3.15) // trueinRange(10, 10, 20) // trueinRange(10, 0, 10) // falseinRange(1, 2) // trueinRange(1, 0) // false 源码解析 1234567891011121314151617181920212223242526272829export function i ...

项目开发中遇到的一个小需求，公共组件 GlobalHeader 上增加一个合规中心入口，点击后跳转合规相关页面，同时要拿到合规相关信息回填到页面上。这里先不考虑实际业务场景，就单把公共组件的实现流程，做个复盘吧，小伙伴们发现问题还请批评指出 目的：公共组件 pro-core 的 GlobalHeader 上增加一个合规中心入口： 页面加载调用合规相关接口，并回填数据 暴露一个刷新方法，业务模块能调用实现后续逻辑 该入口能点击，enableStatus == 1 配置过跳合规分数页，未配置跳 合规介绍页（这里有个优化判断，当前页面和跳转 url 相当就 return 掉） 临时新增：要拿到授权信息 accessList 判断是否有权限来展示（拿已有的 v-auth 指令来改了） 初步分析： 业务模块往往嵌套很深，且不是在同一个项目，一般方式拿不到 Vue 节点和实例 公共组件也会多多级嵌套，毕竟是组件，尽量别依赖 pinia 等 既然是写公共组件，考虑到后续扩展性，尽可能定义好类型，写好文档 实现思路： 公共组件中定义好相关方法，通过 defineExpose ...

Curry函数柯里化相关方法 all创建一个按顺序运行的函数链 基本用法 链接函数将导致它们一个接一个地执行，将每个函数的输出作为下一个函数的输入传递，并在链的末尾返回最终输出。 1234567891011import { chain } from 'radash'const add = (y: number) => (x: number) => x + yconst mult = (y: number) => (x: number) => x * yconst addFive = add(5)const double = mult(2)const chained = chain(addFive, double)chained(0) // => 10chained(7) // => 24 例子 1234567891011121314151617181920import { chain } from 'radash'type Deity = { nam ...

Async之前的内容还挺简单，这一节内容的 async 对于异步的封装明显实用性和复杂度上了个台阶。虽然难啃，但确实很有用。我们继续开始吧 allall 函数类似于内置的 Promise.all 或 Promise.allSettled 函数。给定一个 Promise 列表（或对象），如果抛出任何错误，所有错误都会被收集并抛出到 AggregateError 中。 使用数组 将数组作为参数传递将按照相同的顺序将已解析的 Promise 值作为数组返回。 1234567import { all } from 'radash'const [user] = await all([ api.users.create(...), s3.buckets.create(...), slack.customerSuccessChannel.sendMessage(...)]) 使用对象 将对象作为参数传递将返回一个与已解析的 Promise 值具有相同键和值的对象。 1234567import { all } from &#x ...

Radash 源码学习系列三之 Array 算是上篇吧，一是平时太忙，兼顾着只能周末慢慢来弄 … 二是 Array 方法还真挺多的 29 个方法 ~ 分成上下两篇了 【源码学习】Radash（一）Typed 类型判断 【源码学习】Radash（二）String ArrayRadash 使用 TypeScript 编写，提供开箱即用的完整功能。 大多数 Radash 函数都是确定性 和 纯函数（Pure Function）。 range创建用于迭代的范围 基本用法 给定开始、结束、值和步长，返回一个生成器，该生成器将按步长生成从开始到结束的值。对于将 for (let i = 0) 替换为 for of 很有用。 Range 将返回一个生成器 generator，for of 将一次调用一个生成器，因此创建大范围是安全的。 123456789101112131415161718import { range } from 'radash'range(3) // yields 0, 1, 2, 3ra ...

ArrayRadash 使用 TypeScript 编写，提供开箱即用的完整功能。 大多数 Radash 函数都是确定性 和 纯函数（Pure Function） 注意： 1import { isArray, isFunction } from './typed' array.ts 引入了 isArray 和 isFunction 两个方法用于数组类型的判断。 alphabetical按属性的字母顺序对对象数组进行排序。 基本用法 给定一个对象数组和一个用于确定用于排序的属性的回调函数，返回一个新数组，其中对象按字母顺序排序。第三个可选参数允许您按降序而不是默认的升序排序。对于数字排序，请参阅排序函数。 1234567891011121314import { alphabetical } from 'radash'const gods = [ { name: 'Ra', power: 100 }, { name: 'Zeus' ...

接上一篇，继续学习源码。这次 String 和 Random 里内容不多就合到一起了。 Stringcapitalize先将字符串转换为小写，然后将第一个字母转换为大写。 1234567export const capitalize = (str: string): string => { // 函数在输入字符串为空或空字符串时返回空字符串 // 这是一个良好的实践，有助于避免在后续处理中出现错误 if (!str || str.length === 0) return '' const lower = str.toLowerCase() return lower.substring(0, 1).toUpperCase() + lower.substring(1, lower.length)} 函数在处理特殊字符时可能会产生不期望的结果，例如中文、日文、韩文等非英文字符。在这些情况下，函数可能无法正确地转换为大写开头 camel将输入字符串转换为驼峰命名法（Camel Case） 1234567891011121314151 ...

RadashRadash，这个新兴的工具库，以其现代化的设计和对 TypeScript 的原生支持，迅速吸引了开发者的注意。虽然 Radash 是新项目，最近刷很多文章都有推荐，作为 Lodash 的替代，它在 GitHub 上的 star 涨幅很快 ，这表明它是一个有前途的工具库。大家都说好用，而且支持TS，那么我们就来一探究竟吧！ Radash 的特点包括： 零依赖：Radash 不依赖于任何第三方库，使得项目更加轻量级 TypeScript 友好：Radash 完全使用 TypeScript 编写，提供了准确的类型定义 现代化功能：Radash 去除了 Lodash 中一些过时的函数，并引入了许多新的实用功能 易于理解和维护：Radash 的源代码易于理解，对新手友好 最主要是看着简单，很容易学习 ~ 现在分的类型也不多，VueUse的坑还没完，这又开新坑了…… 哈哈，先干再说 源码确实很简单，很容易上手和学习，写这样一个系列也不会有厌烦情绪了。配合着官方例子，加了点自己的解读，若有错误还请批评指出，谢谢（抱拳）！~ Typedtyped.ts 类型判断，也作为整个库的工具方法 ...

写在之前经历了上家拖欠工资与家庭的种种琐事。不到 2 个月时间的面试准备，确实不算太充分，还好有惊无险拿到 offer，最终入职新公司。 新公司氛围挺好，团队年轻，公司业务也处于蓬勃发展阶段，当然要求也会相对较高，本来面的是高级前端，机缘巧合下公司让我试着管理团队。 这是一个新的机会，也是职业生涯的一个重要选择。尽管和另两份 offer 相比，薪资上还是劣势，（AI 也很感兴趣，另一个做 IM 感觉也不错）考量再三我还是选择接受。 最近几个月，崩的太紧，入职 2 周为了快速融入团队和适应工作其实也没怎么睡好觉。昨天做完分享，总算感觉有些适应了，这里就顺便写写总结吧 面试总结【面试宝典】使用 VitePress 打造个人专属的前端知识体系文档 这篇基本上总结了面试中的发现和暴露的问题。非常感谢健哥的内推及超哥的面试，有幸到小宝面试，贵人，感谢两位。很遗憾自己未能做好准备，虽无缘共事，但也感谢两位的指正和帮助。 从笔试，基础面，项目和技术面，花了整整一下午，超哥很不留情的指出了我存在的问题，对此并给出很多实用建议。 技术瓶颈： 7-8 年的工作经验，并未达到前端资深或专家级 知识体系： ...

前言先祝各位朋友开工大吉，身体健康，诸事如意。我的第一篇文章 TailWindCSS+Vite+Vue3 打造个性化在线简历项目 收藏过百，收到很多正向反馈和建议，很感谢朋友们的支持与鼓励。 当前我正处于求职阶段找工作，依旧是面向面试写作 … 也祝各位朋友在职场中，一帆风顺。 今天分享一个基于 VitePress 的在线文档项目，它可以帮助你快速搭建属于自己的前端知识体系文档。当然，这个思路还可轻松扩展至业务组件开发、内部文档编写等多个场景。 github https://github.com/Fridolph/FE-prepare-interview 在线预览 https://fridolph.github.io/FE-prepare-interview/ 本文不涉及技术性内容，更多是关于学习思路、学习方法以及面试复盘的分享与交流 本文的核心目的是通过构建和完善这一在线文档项目，帮助大家系统化地搭建和巩固前端知识体系，并分享我在学习过程中的方法论及面试复盘经验，以期助力自己及准备找工作的你更高效地找到心仪的工作。 背景在求职过程中，无论是已离职还是在职状态，我们可能需 ...

写在之前最近参加面试，面试官问到了关于 keep-alive 的问题。当时我大概回答了一下生命周期和使用方法，但是面试官显然不太满意，后来我们又讨论了一些其他的场景，感觉很受益，趁着热乎了，就记录下来，顺便搜了下相关文章，把这些内容整理一下，温故而知新。 参考大多是 vue2 的文章，vue3 的 keep-alive 的 API 和用法差不多，多了个 scrollBehavior，先占坑，后续有其他补充再完善。 什么是 keep-alive<keep-alive> 是 Vue 的内置组件，可以使被包裹的组件保留状态，或者避免重新渲染，从而实现组件缓存。它可以保留组件的状态在内存中，避免重复渲染 DOM。 当我们使用 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。这和使用 <transition> 有些类似，<keep-alive> 是一个内置的抽象组件：它自身不会渲染 DOM 元素，也不会出现在父组件中。 keep-alive 的生命周期执行关于 keep-alive 的生命周期执行，页面第一 ...

前言 祝大家在新的一年：大吉大利，身体健康，迎大运，发大财！吐槽随便侃侃，无感请直接跳过到正文。 注册了快 7 年的账号，终于发了第一篇文 你敢信 ~~ 哈哈，今天开张了。至于契机嘛… 司倒，失业之 T_T。最近刷看到类似的帖子也挺多的，ORZ 放心，真不是来输出负面情绪的 ~ 主菜马上就到。 y 情后各行各业都不容易啊，待了六年的公司也熬不住去年末倒下了（还有 3 个月工资拖欠着，希望仲裁给力吧）。个人也长时间呆在舒适区，也没经历社会毒打（只面过别人，凭良心说你背的我还真不会），大环境每况愈下，时常感到焦虑。经过了几天的 emo 期（并没有，疯狂打球笑嘻嘻 … 但心里苦）调整好了，生活终归是要继续的。 给自己放放假，顺便补补（哥们调整好了），为了找到新工作，自己制定了如下小目标： ✅ 1. 重启技术博客 https://blog.fridolph.top，坚持输出 ✅ 2. 做几个实战项目（于是这篇文就诞生了） ⏰ 3. 整理前端知识大纲，形成思维导图 ⏰ 4. 逛掘金，刷面经 + 整理（有些想法，于是开了新坑，再过几天就 OK） 💊 5. 找到工作前封印Steam - “你算 ...

今年对我个人而言注定是不平凡的一年，所有事都扎堆到了一起，剪不断理还乱。 那又能怎么办呢，梳理一下就当一个发泄渠道吧。很多事口述是一个情况，笔述又是另一个思路。 除夕回家自己工作的事已处理好，想着早两天回去陪父母，遂把动车票改到了 8 号回老家。本意是好，父母听着很开心。妈听着我要提前回，特意把家庭聚会时间改到了 8 号（除夕前一天）。好巧不巧，这一天预定的饭店正好改时间，提前一天歇业，其他餐厅、饭店基本也订不到了，没法，妈决定说：还是在家里吃吧。 操劳的年夜饭多年没这么操劳了。记得那还是爷爷奶奶健在时，亲朋长辈会去爷爷家，（我们这是这样）从早上开始忙活做饭，男同胞们打牌喝酒，女同胞们做饭主持事务。 我是 5 点半下动车，到家差不多 6 点半。快进家门，隔着老远就已听到了打牌声儿，聊天声儿。见着家人，心里盘算着这一年又平安度过了，新的一年开始了。在和亲戚的谈笑和觥筹交错中，其乐融融的年饭吃完了。大人们有的继续进行麻将活动，有的还在随着一杯杯白酒高谈阔论，虽然每年都是这样过来的，总感觉少了点什么？ 母亲胃口不好，每年都是这样没吃多少，就和几个姑去继续忙活家务了，收拾、打扫、洗碗、张罗后面 ...

最近在学习TailWindCSS，读和整理文档准备拿去做个项目（就决定拿来重构之前的简历项目了）了解到了无障碍 Accessibility 这个概念，很多指导性概念值得学习，就写篇文章了 Accessibility - 无障碍当有人将一个网站描述为“无障碍”时，他们的意思是，任何用户都可以使用其所有的功能和内容，无论用户是如何访问网络的——甚至特别是有身体或精神障碍的用户。 默认情况下，HTML 在使用正确的时候是可以实现无障碍的。Web 无障碍涉及确保内容保持无障碍，无论访问 web 的人员或方式。 无障碍是一种让尽可能多的用户可以使用你的网站的做法。传统上我们认为这只与残疾人士有关，但提升网站的无障碍也可以让其他用户群体受益。比如使用移动设备的人群，那些使用低速网络连接的人群。 你也可以把无障碍看成是同等地对待每一个人，给他们平等的机会，无论他们的能力或所处的环境如何。就像不能让坐轮椅的人可以进入大楼是错误的 (现代公共建筑通常有轮椅坡道或电梯)；不能让视觉有障碍的人士可以浏览我们的网站同样不正确。我们都是不同的，但我们都是人，因此享有同等的人权。 使网站具备无障碍才是正确的做 ...

之前发现了一个非常好的学习项目，技术栈很新，于是就学习了一下思路，自己实现了一遍。果然，人还是得逼着自己，最近的学习节奏还算不错，再做完项目后来总结一下，编写并完善文档，这不就形成了一套解决方案吗？尽管这只是一个较简单的项目，很多复杂组件还未加入，但其中的思路还是很有启发性的。 项目地址：https://github.com/Fridolph/my-element-plus my-element-plus 学习相关组件及源码，仅供学习参考 文档地址：https://fridolph.github.io/my-element-docs/ 起步所谓万事开头难，在决定好技术栈后，最重要的就是进行项目构建。Vue3 + Vite 一把梭确实爽！ eslint postcss vitest 直接可用 volar vite vitepress 相关依赖安装好后，直接按官方推荐设置 vite.config.ts 即可根据经验，在做这种组件库项目时我发现可能需要花费更多时间（当然也可以使用 TDD 测试驱动开发）。但我更喜欢先把组件开发完成再去补充测试……理清需求和目的，逐步实现，效果会更好。 ...

Visual Studio Code是个牛逼的编辑器，启动非常快，我已经抛弃WebStorm Sublime了。支持各种语言，相比其他IDE，轻量级完全可配置还集成Git感觉非常的适合前端开发。 所以我仔细研究了一下文档未来可能会作为主力工具使用。 虽然习惯了N久的快捷键，没法，习惯什么的是吧，习惯下就好了所以 官方快捷键大全 ，看看这个就好，好在现在快捷键熟悉得差不多了，不会比sublime慢多少 VS code插件整理家里电脑之前杂七杂八东西装太多 = = 太卡，遂重装了系统，各种环境重新搭一遍。顺便更新这篇吧 基础功能扩展 One monokai 因为我喜欢，我放在第一了 vscode-icons output colorizer 让log文件变得五颜六色 Color Highlight，识别代码中的颜色，包括各种颜色格式； Color Manager 调色盘 Bracket Pair Colorizer，识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情 ...