霪霖笙箫的博客

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，识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情 ...

经过大半个月的折腾，看到自己的博客成功上线并能够访问，感到非常欣喜。尽管之前写过类似的文章，但貌似不见了，因此我决定重新写一篇，作为总结，并顺便为博客注入新的活力。 写在之前： 说明一下，我已经完成了 Github/Gitee Pages 和 Hexo 等搭建工作，因此不会再详细描述这些步骤。最初，我的博客是为了分享给家人和朋友看的，由于他们可能没有梯子等工具，因此如果网站加载速度缓慢，会严重影响他们对网站的评价。（我正好也准备面试性能优化这方面的知识，可以在后面展开讨论，但在这篇文章中就不详述了。） 接下来，我将总结一下，我是如何从零开始搭建博客的。 准备工作选择并购买服务器首先打开浏览器，进入搜索引擎，输入：“云服务器选择 -广告 -推广”，进行比价。因为之前我购买域名和服务器时使用的是阿里云，所以这次我也继续选择了它。 如何选择？ 在选择云服务器时，对于个人开发者来说，最重要的是价格便宜且性价比高。通常来说，2 核 2G 的云服务器，一年大约 200 元左右是可以接受的。这里就不多说了，选择的原则是服务器距离自己的地理位置较近，配置适中，价格可以接受。 你需要知道 ...

搭建环境用的是Hexo，按着官方文档来就好了，最好的例子就是文档啦。当然写博客的话，是为了记录一些需要留意的地方 开发环境 Nodejs: 12.16.0 npm: 6.13.4 hexo: 6.3.0 hexo-cli: 4.3.1 直接hexo init 即可 hexo-theme-butterfly: 4.12.0 一定要看是否安装完对应依赖，大部分看似复杂的问题基本都是不经意的小地方造成。说多了都是泪 关于路径问题_config.yml 中 需注意下面几项，根据需要改成自己用的路径即可，便于归类可用中文路径（传服务器可能遇到转义的坑注意下就好） 123456789# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render: 踩坑1 最好不要改动tags、categories、archives 这三项的路径配置。某些插件 ...

吐槽（为什么又开始写博客了） 2016年毕业，恰逢互联网的蓬勃发展，我选择了前端岗位。那时，技术更新速度惊人，从jQuery的面向对象开发模式逐渐过渡到利用现代构建工具、React、Vue等框架实现高效开发。为了不断迎接新的挑战，我始终不停地学习。 随着工作逐渐稳定，我将更多的重心放在了生活和家庭上，这是理所应当的事情。我曾认为中年危机只存在于段子中，与我尚有一段距离，然而却发现它悄然降临，带来了无尽的焦虑和大数据带来的各种烦恼和负能量。对此，我感到抗拒和迷茫。在短暂的自我调整中，我偶然翻阅了之前看了一半的《学习产品思维》，受益匪浅。 因此，我决定写下这篇博客，以此吹响“反击”的号角。 运用产品思维的一个好处就是可以跳脱当前，站在一个客观的角度俯瞰全局，在此就预设一个命题来进行思考——如何看待当下的失业危机，该怎样调整和应对？ 明确目的解决焦虑，设定目标焦虑无非是不知道做什么，对自己能力的不自信，从而产生的一种大众跟随情绪。但自从学完了产品思维后，不良情绪逐渐消散。设定了许许多许的可完成的目标，那还有什么理由停留不前呢？ 接受现实，坦然面对首先要处理的是年底前（元旦后可能还会有 ...

正好读到了相关的文章推送，正巧也把之前看到的和弄了一小半的资料整理一下。- - node的学习又再此开启 stream的基本概念和常用API概述让数据流动起来。数据从原来的source流向dest，要像水一样，慢慢的一点一点通过一个管道流过去。stream并不是node.js独有的概念，而是一个操作系统最基本的操作方式，只不过node.js有API支持这种操作方式。linux命令的|就是stream，因此所有server端语言都应该实现stream的API。 为何要使用stream例子，在线播放视频。一点一点从服务端将视频流动到本地播放器，一边流动一边播放，直到播放完成。 12345678910var http = require('http')var fs = require('fs')var path = require('path')var server = http.createServer(function(req, res) { var fileName = path.resolve(__dir ...

Cookie定义Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。Cookie 包含每次用户访问站点时 Web 应用程序都可以读取的信息。 例如，如果在用户请求站点中的页面时应用程序发送给该用户的不仅仅是一个页面，还有一个包含日期和时间的 Cookie，用户的浏览器在获得页面的同时还获得了该 Cookie，并将它存储在用户硬盘上的某个文件夹中。 以后，如果该用户再次请求您站点中的页面，当该用户输入 URL 时，浏览器便会在本地硬盘上查找与该 URL 关联的 Cookie。如果该 Cookie 存在，浏览器便将该 Cookie 与页请求一起发送到您的站点。然后，应用程序便可以确定该用户上次访问站点的日期和时间。您可以使用这些信息向用户显示一条消息，也可以检查到期日期。 Cookie 与网站关联，而不是与特定的页面关联。因此，无论用户请求站点中的哪一个页面，浏览器和服务器都将交换 Cookie 信息。用户访问不同站点时，各个站点都可能会向用户的浏览器发送一个 Cookie；浏览器会分别存储所有 Cookie。 Cookie 帮助网站存储有关访问者的 ...

写这篇是因为之前在群里看到小伙伴在讨论算法相关知识，对于前端来说，这块也是很重要嘛，正好把之前没看完的那本电子书，《学习JavaScript数据结构与算法》复习下~ 栈数据结构栈是一种遵从后进先出(LIFO, Last in First out)原则的有序集合。新添加的或待删除的元素都保存在栈的同一端，称作栈顶，另一端叫作栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。 我们只是用ES6的简化语法把Stack函数转换成类。但变量items却是公共的，ES6的类是基于原型的，虽然基于原型的类比基于函数的类更节省内存，也更适合创建多个实例，却不能够声明私有属性或方法，而且，在这种情况下，我们希望Stack类的用户只能访问暴露给类的方法，否则就有可能从栈的中间移除元素（因为我们用数组来存储其值） 以下是ES6方法，创建私有属性的方式： 用ES6的限定作用域Symbol实现类 12345678let _items = Symbol();class Stack { constructor() { this[_items] = []; } ...

从脚本错误开始，了解脚本为什么会报错以及抛出错误，最后介绍了用window.onerror、try catch捕获错误。 什么是脚本错误如果您以前使用过JavaScript onerror事件做过任何工作，您可能会遇到以下情况： “Script error.” “脚本错误”是当错误源自从不同来源（不同域，端口或协议）提供的JavaScript文件时，浏览器发送到onerror回调的内容。这很痛苦，因为即使出现错误，您也不知道错误是什么，也不知道它来自哪个代码。这就是window.onerror的全部目的 - 深入了解应用程序中未捕获的错误。 产生原因：跨源脚本为了更好地了解正在发生的事情，请考虑以下示例HTML文档，假设从http://example.com/test提供： 123456789101112131415<!doctype html><html><head> <title>example.com/test</title></head><body> <script src=& ...

写这篇一是为复习，二来是有个良好的总结。对于知识点的理解总是一知半解，不深入，这篇希望在此基础上不断深化加深印象和理解。 什么是跨域 A cross-domain solution (CDS) is a means of information assurance that provides the ability to manually or automatically access or transfer between two or more differing security domains. 解决两个安全域之间的信息传递，这个就叫做CDS——跨域解决方案。跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 为什么需要跨域浏览器有同源策略限制。 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非 ...