逛街的喵啊

原创 拦截HTTP的多种方式

部分场景下需要修改请求报文信息，可以利用 AOP 思维（切面编程），对请求进行拦截处理。针对这几种不同的场景，分别拦截处理它的 URL 和请求参数。

原创 双周回顾#009 - 大黄和我

说一个笑话，被朋友催更了，这就有点尴尬了！！！最近一个月，把空闲时间都点在了“玩”上，看闲书、玩游戏、背包客。

原创 双周总结#008 - AIGC

本周参与了公司同事对 AIGC 的分享会，分享了 AIGC 在实际项目中的实践经验，以及如何进行 AIGC 的落地。以年终总结为例，分享了哪些过程应用了 AIGC，以及 AIGC 落地过程中遇到的问题。面对 AIGC 技术，我们能做什么？

原创 CSS 命名规范 - BEM

原创 为 Web 站点优雅的生成 Manifest 文件

原创 双周回顾#007 - 前端与后端

前端的问题不是难，而是它面对最终用户。只要用户的喜好和口味发生变化，前端就必须跟上。这导致前端不得不快速变化，因为用户的口味正在越来越快地改变。后端不需要面对最终用户，需要解决的都是一些经典的计算机科学问题，比如算法和数据结构。这些问题很少变化，可以利用以前的研究成果，所以变化速度慢得多。

原创 Web Component 转图片

唯独遇见 Web Component 时，XMLSerializer 的处理过程会造成 ShadowRoot 解析失败。表现的行为就是，绘制出的图片中，Web Component 所在的位置是一片空白。二者相配合，即可实现兼容 Web Component 的图片绘制场景。是一个基于 svg 实现的、轻量级的 HTML 转图片的库，大小。是一个兼容 Web Component 拷贝的开源库，大小为。目前，常见的开源的能够将 HTML 转换为图片有。，大部分场景下，这些开源库都能很友好的处理。

原创 双周回顾#006 - 这三个月

这也造就了，测试介入后，提了。不过这一过程中，有一说一，技术债肯定是留下了，很多场景下，为了尽快修复问题，代码都是特写的，后期 CodeReview 时，必定要修改的。但是，问题来了，大部分人是从外部门支援来的，整个团队懂业务的就那么几个人。项目启动会议后，迅速再拉了一次 30+人的工程架构解读会议，大伙看了两天代码，立马投入开发阶段。通常情况下，当开发做完完整的功能后，经历自测、提测、冒烟测试后，测试人员才会正式介入测试。项目开始后，开发人员一直在发牢骚，感觉项目负责人就是在瞎搞，妥妥的即将翻车。

原创 双周回顾#005 - 零

一件悲伤的事实，这两周，成长值为零～～从大数据部门临时抽调到互联网部门，支援重构的“配置下单”项目。一个变种的低代码架构设计，唯一比较有意思的是它的业务组件的设计与校验设计，算是学习到点东西吧，其余的时间都是赶工中度过～～

原创 双周回顾#004 - 满眼欢喜

对顺子的第一印象应该是在 2013/10 月，当时在绵阳科技馆，依旧记得那张青涩、腼腆的笑容，双手托着一个 MINI 机器人。那算是顺子和我的第一次相识吧。一晃十年了，今天是他的婚礼。有个词叫满心欢喜，但是看到他们时，我想称作满眼欢喜。满眼欢喜，一生相伴。因为做伴郎的缘故，提前来到成都。顺子带我们伴郎团排舞，期间尬舞不断。但他的动作最欢快、最自信，眉眼间的笑容从不消减。有句诗句叫，士为知己者死，女为悦己者容。想比，此时此刻他的心中充满了他的新娘吧。

原创 双周回顾#003 - 新生

10 月 9 日，一个小生命悄悄来到世间，老家的朋友做了爸爸妈妈。看着昔日的朋友们结婚生子，顿感不知不觉间自己也在慢慢变老。

原创 性能优化总纲

性能优化，名词高大上，真正落地时会发现都是些基本功。方法很简单，重要的是要知道为什么要这么做，空闲时再聊这块。

原创 双周总结#002 - 红树林

红树林公园，一棵单独生长在海岸边的树，下面一根根树立的幼苗，是从它的根茎上生长出来的。傍晚落潮后，会有一只只小螃蟹在这里浪荡。当然，也会有海鸟在这里进食。

原创 双周回顾#001 - 火烧云

工作以来，许久未曾见过如此壮观的火烧云景观了。

原创 CSS宽度问题

为 DOM 设置宽度有哪些方式呢？最常用的是配置width属性，width通常当配置了 width 时，不会再配置min-widthmax-width，如果将这三者混合使用，会有什么魔法效果呢？测试代码：.boxdisplay;border;min-width;width;max-width;</</

原创 编辑器的缩略图实现原理

部分 Web 版的 IDE 编辑器未曾实现缩略图功能，探寻一下缩略图的实现逻辑。以 VSCode 为例。VSCode 的编辑器是monaco实现的，编辑器的编辑区都是采用的虚拟渲染，即仅渲染可视区的代码，可视区之外的动态去除 DOM 节点。打开 VScode > Help > Toggle Developer Tools，观察 DOM 节点的状态变化，可以看到是在动态变化。

原创 DOM 监测

如何定义DOM监测通常有两种方式，早期使用 DOM 事件监听节点的变化，目前已不再推荐。当前推荐使用。

原创 alova-导读

alovaalova在业务层上做了缓存处理，优化了请求的性能问题。复杂度增加。针对每个请求需要制定自身的缓存策略，缓存管理的混乱。缓存的失效问题，按照时间失效、手动失效等、哪部分数据失效等，管理上更加复杂。调试困难。新增了缓存策略，在排除故障时，需要考虑是前端缓存的问题？还是后台混存的问题。升级问题。升级时 API 返回的数据可能会所有变化，缓存策略会导致拿不到新数据。

原创 【微前端】qiankun + vite + vue3

404 的原因，静态部署时：a 标签会触发浏览器的刷新，刷新后，浏览器向后台发起请求/app_01，后台的确没有这个物理路径。在 qiankun 体系下，一个微前端工程包含一个主应用和多个子应用。的打包输出中，新建 sub 文件夹，将子应用的打包输出移动到 sub 文件夹中。需要注意的是，这里不能使用 a 标签 的 href，会报错 404 错误，必须使用。注册子应用时，分为两种模式，开发模式和部署模式，对应的。用于注册子应用，以及控制子应用之间的切换。的变化，从而切换子应用的加载与卸载。

原创 【微前端】qiankun

qiankun是一种前端微服务架构，旨在解决大型复杂应用的拆分和管理问题。

原创 【微前端】什么是微前端

微前端（Micro Frontends）是一种前端架构模式，通过将单个应用程序分解为多个小型、独立的部分来实现应用程序的组合。每个小型部分都由独立的团队开发、测试和部署，然后将它们组合成为一个完整的应用程序。

原创 JavaScript内存管理

JavaScript 是一个弱类型的、动态语言，在执行一段 JS 代码时，需要经历编译、执行、内存回收阶段。

原创 通读PMBook

通读PMBook，笔记。

原创 通过命令行读大文件

有时会将文本文件下载到本地进行查阅，系统自带的文本阅读器，读小文件一般没啥问题。遇见大文件时，会有一些痛点：1. 文件大，加载慢2. 关闭后再打开时，又会从初始位置开始阅读为解决这个问题，用 Node.js 写了一个命令行文本阅读器，支持：1. 支持编码 UTF-8、GBK2. 支持记忆历史文件3. 支持记忆文件的上次阅读点

原创 HTTP 速查手册

HTTP速查手册

原创 HTTP 发展史

HTTP版本迭代过程

原创 Web蜜罐

蜜罐、Web蜜罐，如何做一个好的低交互蜜罐？

原创 DOM Observer

一些比较方便的 DOM 监测的 API。

原创 多种中断HTTP请求的方式

中断一个HTTP请求的多种方式

原创 两年创业的得与失

目前一个 loser，我随便写写，诸君随便看看就行。

原创 API网关基础认知

位置：API 网关位于客户端与服务之间作用：- 充当反向代理，将来自客户端的请求路由到服务。- 执行各种横切任务，例如身份验证、SSL 终止和速率限制

原创 巷子里的酒

人靠衣装马靠鞍，第一眼被曝光的总会比深藏不露的更会被选中。当然，还有句话说，是金子总会发光的。想发光也得先遇见光，深埋万丈深渊，锤子的光。说句不好听的，一块破抹布遮在金子上，只要不遇见贵人，光跟它无缘。

原创 SSE-即时推送

Server-Sent Events (SSE)是基于 HTTP 实现的，H5 标准中可以使用 EventSource 连接到服务、并接收服务端的通知。本文介绍，如何通过 SSE 实现一个简单的即时通信。

原创 媒体流入门实践

媒体流接口的学习实践，入门级别。可以做的事情：录制声音、录制屏幕、拍照、屏幕共享。

原创 多租户的多种实现方案

应对不同复杂程度的 Web 业务，如何实现多租户，使得不同组织之间的数据完全隔离。即，不同组织的人员仅能读写自身组织的数据。大致有以下两种方案：部署类和数据隔离类。

原创 【小程序实战】第一天

微信小程序实战系列

原创 页面关闭前，如何发送一个可靠请求

离开当前页面前，向后台发送一个，如何确保这个请求是可靠的，大致的方案有：1. 同步2. keepAlive3. navigator.sendBeacon4. a标签的ping属性

原创 Vue 3 Api 清单

api list

原创 Vue3 Monorepo

Vue3 Monorepo包管理器 pnpm，monorepo 架构Web 框架 vue3UI 框架 element-ui采用 monorepo 架构，组织 API、UI、工程之间的互相引用。模块介绍@web/core工程工程的核心模块，为一些通用的代码，如：useElementPLus 有选择的引用element-plus的组件useElementPlusIcon 有选择的引用element-plus/icon的组件useEnv 读取import环境变量useLogger 日志

原创 打包工具-rollup

什么是打包工具当前前端打包工具有很多种，打包工具能够许多的事情，比如：ts编译、babel编译等。打包工具的定位是什么呢？个人理解，打包器是一个调度工具，能够组织、并调用基础工具（比如tsc、babel），完成对前端工程的编译。实际上打包工具，打包工具并不能直接调用工具层的工具。打包器定义了自己的调用接口，通过接口层实现对工具层的调用。比如在rollup中使用plugin，webpack中使用loaderrolluprollup的特性：支持 ES6 模块支持 tree-shake...