衣乌安、随笔

原创 5年前端仔的2023年终总结

我呢，万千搬砖人之一，目前就职福报厂某团队，最近一年负责小团队内大概十几个系统的中后台技术体系的设计及业务研发，偶尔团队人手不足客串支撑一下c端的业务，作为老油条“带一带”团队的新同学和实习生，偶尔客串一下横向大团队的问题排查工，最近深耕可视化搭建平台的建设。

原创 Next.js提供api接口

看react官网在推Next.js,所以简单学习了解一下。

原创 【AI】前端眼里的AI

最近各行各业对AI的热情持续高涨，我在的团队也在力推用AI来提效，所以近期也在做这方面的事情，曾经看过一篇文章中写到，“AI本质就是概率”。我对此是十分的认同，AI是不具备感性的，所谓的智能，其实就是经过极大量数据渲染以后高度规范化的一个概率推测，因此AI能做的事情便是那些有迹可循的工作，越是规范化、流程化的东西越容易被AI所替代。

原创 【CSS】absolute定位的默认位置

定位祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）进行定位。属性会使元素脱离正常的文档流，并相对于最近的非。时应该存在的位置，不过由于脱离了文档流，层级会高。没有指定具体值时，元素的在上下文中的位置会在默认。

原创 【CSS】什么是BFC？

块级格式化上下文（Block Formatting Context，简称BFC）是CSS布局中的一种重要概念，它决定了块级盒子如何在其容器内排列，以及浮动元素对其周围元素的影响。理解BFC可以帮助解决许多常见的网页布局问题，比如清除浮动、防止外边距重叠等。

原创 【CSS】“flex: 1“有什么用？

这种设置对于实现灵活、响应式的布局非常有用。例如，我们可以将导航栏中的项目设置为。属性设置为 1，相当于将其分配了一个相对于其他元素相同的可伸缩空间。会使该元素尽可能地占据父容器中的剩余空间，同时保持其他元素的相对位置和大小。无论导航栏的宽度如何变化，链接都会自动调整大小，以适应父容器的空间。在这个示例中，通过设置链接的。，使其自动平分导航栏的宽度。属性为 1，实现了它们的。

原创 【CSS】居中样式

【代码】【CSS】居中样式。

原创 【CSS】清除浮动（父元素塌陷）

在CSS布局中，“清除浮动”通常指的是消除由浮动元素引起的某些副作用，特别是当这些浮动元素影响到后续元素或者父元素的高度计算时。浮动元素会使它们脱离正常的文档流，这可能导致一些意料之外的效果，比如父元素高度塌陷（即父元素无法正确包裹住所有的子元素）。

原创 【CSS】标准&怪异盒模型

【代码】【CSS】标准&怪异盒模型。

原创 【webpack】webpack基本工作原理

由config.js配置文件中指定的plugins//...plugins: [}),],

原创 【JavaScript】this 指向

记住就好。

原创 【JavaScript】Object.freeze是什么？

是一种强大的工具，用于保护对象不受意外修改。它适用于多种场景，特别是在需要保持数据不变的情况下。

原创 【JavaScript】从作用域角度理解闭包

在 JS 世界中，目前已经有了三种作用域：●●●○ 由let或者const声明的变量，如果被一个大括号{}这样括住了，那么这个大括号就是一个代码块，大括号括住的这些变量就形成了一个块作用域在js引擎中执行上述语句分为两个阶段（一边编译一边运行）：●var a===》 编译时声明●a = 1===》 运行时赋值在运行时js引擎会找当前作用域下是否有a的声明，没有的话就会往上级作用域查找，一直到最外层全局作用域还没有的话会抛出异常。

原创 【CSS】尺寸单位

对于电脑显示器，px 通常与屏幕的物理像素相对应，但这也会受到屏幕分辨率和缩放设置的影响。例如，在标准分辨率（通常为 96 DPI 左右）的显示器上，1 px 大约等于 1/96 英寸。由于移动设备具有不同的屏幕密度（例如标准密度、高密度、超高密度等），同样的 px 值在不同密度的屏幕上显示的物理尺寸会有所不同。通常，DPI 的值越高，图像的清晰度和细节就越丰富。在 CSS 中，font-size: 50% 表示字体大小为父元素字体大小的 50%。在不同的设备上，px 对应的物理尺寸并不固定。

原创 【JavaScrip】为什么箭头函数不能做构造函数

●词法作用域的this: 箭头函数内部的this值绑定到定义时所在的上下文环境，而不是调用时的上下文环境。●无法设置原型链: 箭头函数不具备通过new关键字设置原型链的功能。因此，箭头函数不适合用作构造函数。如果你需要创建类或构造函数，请使用普通的函数声明或 ES6 的类语法。

原创 【HTML】link标签prefetch&preload

link>标签的rel属性的值为preload时，可用于在正常浏览器渲染流程早期提前加载当前页面所需资源，以提升页面性能。除了rel。

原创 【HTML】script标签async&defer

使用async更适合那些不影响页面初始渲染且相互间无依赖关系的脚本。使用defer更适合那些需要按照特定顺序执行的脚本，或者脚本依赖于完整的 DOM 树。

原创 【HTML】置换元素（替换元素）

● 它的内容不是由元素的标签内的内容决定的，而是由元素的属性决定的。● 可以通过CSS设置宽度和高度。

原创 前端远端SDK组件加载方案

作者维护的可视化搭建平台所提供的投放数据配置表单是基于搭建物料中配置的经过统一的渲染生成的，这就意味着：表单项的类型是预先约定好的，虽然这可以满足业务绝大部分的诉求，但是总有一些高度定制的配置项需要支持业务自定义。作为一个通用的平台，内部耦合业务逻辑是个很愚蠢的办法，所以便开了业务自定义扩展渲染组件的口子。

原创 Antd Form黑科技-监听表单值变化

为啥要写这个hooks？主要是因为我们页面antd使用的是4.0版本，当时5.0还没有支持，而在一些业务场景中我需要监听某个表单值的变化来做一些回调处理，而Form组件的props中需要集中一个地方来写这些回调又不太方便于是便翻到了源码中这个antd内置hooks事件，可以用来监听。

原创 sourcemap使用

在某些情况下我们没办法直接用浏览器加载sourcemap来使用，比如我们的监控平台捕获到了错误栈，但是页面不能复现，只能通过日志的相关信息来排查，此时便需要自建的sourcemap解析服务来处理了。比如在团队内部部署一个微型服务, 自助上传souremap, 输入报错信息, 然后打印出具体的错误，还可以做报错代码的高亮展示等优化，更进一步地, 可以跟git直接关联起来, 导航到具体的报错文件, 更加直观。根据上述信息, 我们可以扩展出一个功能更完善的工具。

原创 简单中间件模型

中间件是软件开发过程中架构的一个通用概念，其目的在于为运行的主程序提供一个供外部自定义拓展的能力。比如：wen服务的controller层中间件针对request请求处理的前后进行通用的扩展处理、redux中间件针对store数据获取前后的扩展处理。。。

原创 前端如何支持i18n？

系统支持多语言的功能称之为国际化，英文为一共18个字母，简称i18n。随机近些年国内市场饱和，各厂商纷纷出海，i18n成了必要的能力。

原创 富文本配置渲染场景问题杂谈

可视化页面搭建场景，需要支持配置富文本内容并在页面中渲染，富文本编辑器SDK采用了。

原创 简单BFF架构设计

又到周五了有了一个小时的闲暇时间简单写点东西，介绍一个简单的BFF的架构:Backends For Frontends,其实现在是个比较常见的前端架构设计的方案，其最大的优势便在于前端可以高度自由的在Node层做一些server端才可以做的东西，比如SSR、登录态校验、对接服务端各微服务应用等。今天介绍一种简单的设计方案。

原创 基于React Hooks的简单全局状态共享实现方案

常规B端项目中往往需要一些全局通用的状态来实现跨组件层级甚至整个系统全局的共享，比如：当前用户的信息、某些业务状态等。

原创 Egg http proxy

A项目提供了公共模块x给B项目用，但模块x中代码有http请求，我们希望对应请求相关的controller层能够复用，因此需要在B项目的node层做一个http proxy将相关的请求转发至A项目。注意Egg在生成cookie时是有基于config.keys做加密的，所以加密的keys要保持一致。源码：https://github.com/chunkai1312/egg-http-proxy。插件基于http-proxy-middleware。可以利用egg插件来解决。

原创 react hooks-元素吸顶

自定义hooks支持吸顶

原创 B端系统前端通用权限设计图

原创 【奇淫技巧】判断远端git tag是否存在

git ls-remote --tags |grep 标签名^{}返回结果包含标签名^{}则证明存在

原创 Husky v5+ 版本原理

在前端项目中，通过使用husky来管理git hooks是很常见的方案，对于git hooks大家往往第一时间想到的就是.git/hooks/下的对应的git生命周期的脚本。但是从v5版本开始，使用者可以发现，husky初始化以后会在项目文件夹创建一个.husky目录，而对应的git hooks控制脚本也在此目录下编写，而非.git/hooks/下。通过查看其初始化脚本可以看出，主要是利用了git的core.hookspath这个配置项，在git 2.9及以上版本则开始支持对应配置项【传送门】，其作

原创 mac系统git文件名大小写不敏感

因为 Mac/Windows 环境下 Git 在不设置大小写敏感规则的时候默认大小写是不敏感，而 Linux 下 Git是默认大小写敏感的。因此在 Mac/Windows 下改了文件名大小写是 push 不上去了。解决办法方法一删除文件，重新添加文件。（删除之前记得备份下文件内容）方法二设置Git大小写敏感git config core.ignorecase false...

原创 peerDependencies安装

当我们的项目中有peerDependencies时，执行npm install会发现peerDependencies的依赖项并不会下载，如果一个个下载太过麻烦，因此推荐一个npm库npm-install-peers，可以直接下载。npm install --save-dev npm-install-peersnpm script{ scripts: { "install-peers": "npm-install-peers" }}执行对应脚本即可自动下载p

原创 滚动穿透解决方案

在移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透”方案一最粗暴的方式就是弹窗弹起后最外层的滚动容器html或者body设置overflow: hidden,来阻止滚动，随之带来的问题就是会导致页面滚动到顶部，之前用户的滚动位置会丢失方案二、三、四。。。。直接忽略。。。终极方案打开弹窗时，最外层的滚动容器html或者body设置position: fixed,同时记录打开前页面scrollTop，设置对应的滚动偏移top，当弹窗关闭时移除对应配置，同时恢复页

原创 前端面试技术复习资料大纲

最近因为政策原因不得不从在线教育出来，然后历经两个月的面试拿到了几个不错的大厂offer，下面将我面准备面试时用来复习准备的大纲分享出来业务相关近期业务梳理业务架构设计业务难点&解决方案html行内元素：https://m.html.cn/qa/html5/13634.html置换元素：内容不会直接渲染，一般有固有尺寸;http://blog.doyoe.com/2015/03/15/css/%E7%BD%AE%E6%8D%A2%E5%92%8C%E9%9D%9E%E.

原创 SIGINT、SIGKILL和SIGTERM的区别

  首先要知道的是SIGINT、SIGKILL和SIGTERM代表的时一种信号。什么是信号？信号是一个 POSIX 内部通信系统：发送通知给进程，以告知其发生的事件。（windows系统不支持）。 这三个个信号都是用来终止进程的。三者之间的区别SIGINT信号值为2，当用户按Ctrl+C时触发默认行为会终止当前进程，支持自定义覆盖其默认行为（利用trap命令捕获对应信号自定义处理逻辑）;kill -2 <process_id>SIGTERM信号值为15，kill命令的默认值，终止进

原创 浏览器的多线程

浏览器的渲染进程是多线程的。js是阻塞单线程的。浏览器包含有以下线程：1.GUI渲染线程负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。2.JS引擎线程也称为JS内核，负责处理Javascript脚本

原创 私有包发布报错？npm scope

背景先介绍一下引入背景，公司有自己的npm源，我们的包都发布到了上面，因为自己有搞轮子，所以有时会发自己的包到官方源上，某天突发奇想，如果不小心当前源是官方源，把公司的包发布上去了咋办？似乎并没有啥限制？结果刚想完，然后手贱当前官方源时执行了发布命令（心有余悸，不是故意的qwq）。。。然后看到了如下报错：npm ERR! code E402npm ERR! 402 Payment Required - PUT https://registry.npmjs.org/@tutor%2fxxxx - You

原创 用户侧性能指标收集方案

有效性能测量的第一条规则是确保性能测量技术本身不会导致性能问题，因此还是尽可能利用浏览器支持的性能收集指标的api，但常规 performance 定义好的一些api基本是适用于首屏性能优化的，因此需要利用自定义指标api统计结合业务统计收集数据前提需要通过 PerformanceObserver.supportedEntryTypes 判断是否浏览器支持对应的 entryType1、http请求数据Resource TimingPerformanceResourceTiming[Expo.

原创 google analytics 自定义维度和指标

google analytics允许用户自定义一些指标和维度来支持更多维度的数据分析。自定义维度指标文档从文档中可以看到，一般账号的话，无论是指标还是维度都最多支持20个自定义项，而这些自定义项是整个项目普用的，数量有限因此要妥善使用，尽量定义通用数据指标。想要使用的话，需要先在google analytics对应项目中配置对应指标和维度。配置自定义指标和维度以自定义维度为例：上图可见每个维度会有一个索引值，名称一列则是对应维度的展示名称，在代码中上报数据时只需给对应字段赋值即可，ga('s