👋 告别挣扎的 2022 年

一拖再拖,22年结束之前思否小姐姐一直就在暗示我应该要写了,但是因为情绪的问题一直拖着,趁着今天有些情绪(负面)就决定手动写了吧,正好也赶在征文结束之前拉低一下中奖概率。

code stats for 2022

正如标题所说 2022 年是很多人感觉到挣扎的一年,看到很多小伙伴因为经济下滑而被辞退、或者被迫倒闭的消息。突然的解封也打了大家一个措手不及,陆陆续续也听到很多人离世的消息。

💼 失业&面试&入职

自自然我也没有躲过,刚刚过完年没多久就收到前公司决定解散的通知,虽然很突然但也算是意料之中。没有和前司纠结赔偿的问题,拿了离职证明休息了两天就开始找工作……

阅读全文

生成UUID的方法 Crypto.randomUUID()

对于我这种比较懒的人,一直以来都是直接用 new Date().valueOf() 或者 Math.random() 配合一些规则来生成唯一ID,不配置规则的话,出现重复的概率还是比较高的。前几天看到群里有人说起了这个新的API(也不新了21年夏天发布的了)就大概看了一下。

各个主流浏览器也都支持了。不过呢,开始支持的版本都比较高🔗 “randomUUID” | Can I use
所以在一些不喜欢更新软件版本的用户里面就会抛出错误比如说 "crypto" is not defined 或者 crypto.randomUUID is not a function

阅读全文

使用 CSS 滤镜将站点置灰以及把如何排除图片

因为长者的逝世,最近不断有同学在问:应该怎么做站点置灰(去色)的需求。一般来说我都会转发张鑫旭大佬的 《小tip: 使用CSS将图片转换成黑白(灰色、置灰)》 这篇文章给对方,文章内详细的描述了应该如何处理。
虽然 filter 属性还是草案阶段,但是几乎所有的现代浏览器都有很好支持,所以可以直接使用 html{filter: grayscale(100%)} 来实现这个需求。

但是今天在社区里面看到有人提到了这样的一个问题请教css网站置灰,排除图片的问题?,需求是使用 filter: grayscale(100%) 使全站置灰之后,如何排除网站中的图片的置灰。

一开始我认为这个需求有一些点不合理,随即答复了可以按照区块去实现置灰,如果要实现这样的需求需要通过遍历来实现,并让他去和PM沟通,具体为什么要实现这样的方式。
但是后来有人补充了通过 :not() + :has() 伪类选择器实现的方式,但是还是有一定兼容性问题的。FireFox 还未支持 :has() 伪类选择器_2022年12月)

阅读全文

记 RegExp.test() 方法使用全局匹配时一会返回 true 一会返回 false 的问题

今天小伙伴问了一个奇怪的问题,他在使用 RegExp.test() 方法时使用全局匹配时会依次返回 truefalse 的现象。
比如说:

var t = /#/g
t.test("#")
// true
t.test("#")
// false
t.test("#")
// true
t.test("#")
// false

我一开始以为是他正则写的不对,让他把其它的匹配规则都去掉再试试,结果问题还是依旧。
后来让他把 /gg 去掉试了下发现没问题了。但还是没有怀疑到全局匹配的问题上,以为是他哪里覆写掉了的 test() 方法。让他使用空白页测试,依旧有这样的问题。

阅读全文

Set & Map 数据结构是无法被 Vue 监听的

这次在写业务的时候因为是无限层级的递归表单,用了 provide/inject 来暴露注册以便收集数据。所以就想要用 Map 数据结构来处理数据的收集等等功能。直接使用 记录ID 作为键名就可以了,这样也可以直接去重。但是写完了业务代码之后发现我把后代的表单注册进来并没有触发响应,导致数据回填失败。

所以想着是不是 Vue 2x 无法监听 Map 或者 Set 的数据变更的。就去检索了一下相关的信息,发现 Vue 2x 真的无法监听 Map 以及 Set 俩兄弟。只能够通过修改其他变量来曲线救国。

Vue 3x 通过 Proxy 来代理就没有了这个问题。

阅读全文

Vue 中的样式穿透 v-deep、/deep/ 和 >>>

Vue 项目的开发中,很多人都因为想要限制 CSS 样式的作用范围(避免样式污染的问题)去使用 scope 属性。

但是很多的情况下都会去修改分装好的子组件以及UI库中的组件样式,所以经常会用到 样式穿透 这个东西,因为我以前是使用的 Stylus 作为样式预处理器的,所以并没有感觉到什么困惑的地方,但是有很多同学是使用的 Scss 以及 Less 的,对于他们来说什么时候使用 /deep/ 什么时候使用 ::v-deep 是很困扰的。特别是对于一些刚刚进入前端圈的小伙伴们。

正好最近在思否也遇到了很多人来问这样的问题,就像一次性都把相关的疑问都回答了。

阅读全文

Vue中接收没有声明的Prop属性[null/undefined]的接收问题

最近在写基础组件,同事一直反馈说组件总是提示警告:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Array, got Null

一开始以为是接收的问题,把定义的props加上了工厂函数后没有报异常就没再管了。
今天再去看的时候发现还是有报错,检查了一下组件代码没发现问题,在查看业务代码的时候发现同事喜欢给声明的变量默认赋值为 null。而不是声明正确的基础类型。所以我就想应该如何把这个问题彻底解决掉。

🔔 其实这个提示为了提醒可能你绑定的变量并不一定存在。

阅读全文

聊一个复用组件中使用debounce时遇到的问题

今天我中遇到了一个这样的场景,发现触发复用的自定义组件中添加了防抖的函数,发现只执行了一次,并没有如预期的那样每个组件内的函数都执行一次。

一开始以为是没有同步赋值,检查了一下没问题,才把关注点转移到 debounce 上面。移除防抖之后果然解决问题了,但防抖又不能去去掉。

所以查了一下相关的问题,发现是因为多个组件实例是共享同一个预置防抖的函数,并不是相互独立的。

阅读全文

CSS实现毛玻璃效果的一种新方式

今天在逛V站看到一个自推UI组件库的帖子,我觉得很不错,在查看组件样例的时候呢,发现了他的抽屉组件的遮罩可以把整个页面添加毛玻璃效果!我就很惊讶。马上就 F12查看了一下他的实现方式,因为在我映像里还没有一个很简单的的可以直接实现背景元素毛玻璃效果的方式。

其实不光是抽屉组件,其它的一些类 Modal 带有遮罩的组件都有这个毛玻璃的效果,大伙可以点点看看。

好了,不多废话直接开始正题。

阅读全文

使用Alt+Tab切换窗口时会显示Edge打开的所有页签

自从入职新公司之后默认浏览器是 Edge 一直都没有切换,发现一个事情就是每次使用 Alt+Tab 切换应用的时候总是会把当前 Edge 打开的网页都展示出来,就很麻烦。
明明我应用内使用 Ctrl+Tab/Ctrl+Shift+Tab 就可以前后切换页签。不知道为啥就要把单个页签也当成一个应用来展示,所以就想关闭这个功能。

一开始想当然的从 Edge 的设置内,但是找了一圈没有找到。就去问度娘了,发现是要从系统设置里去修改的。
操作步骤为:

  • 在桌面右键后选择 显示设置
  • 然后在侧边栏找到 多任务处理 选项
  • 按Alt + Tab将显示 项修改成 仅打开的窗口 即可。
阅读全文