解决方案 分类

背景

在我们开发过程中，有些时候会遇到容器内添加元素的需求，一般往下添加是没问题的，但是当我们有在运行过程中动态往上方添加元素时，就会发现不同浏览器有不同的行为。很常见的一种场景就是消息列表向上滚动加载的场景。

复现

这一段代码可以模拟这种case：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container" style="display: flex; gap: 10px; flex-direction: column;">
    <div style="background: red; height: 100px; width: 100px;"></div>
    <div>bottom</div>
  </div>
  <script>
    const container = document.getElementById('container')
    setInterval(() => {
      const div = document.createElement('div')
      div.style.background = 'red'
      div.style.height = '100px'
      div.style.width = '100px'
      container.insertBefore(div, container.firstChild)
    }, 300)
  </script>
</body>
</html>

CrabSAMA大约 3 分钟

vscode snippet 生成 markdown snippet

背景

在使用类似 vuepress 等静态站点生成库时，我们经常需要通过编写 markdown 文件中的 frontmatter 来标识一些功能与文章的属性。每次需要手动编写 frontmatter，或者从旧的文档 cv 过来，是比较低效的行为。因此是否可以通过一些方法来提升写文章的体验，更加高效开搞？

解法

针对在平时开发工作中这种重复 cv 的情况，我们的解法一般都是使用代码片段来提效。我将这个思维也复制到了 markdown frontmatter 上。我可以通过编写一个 snippet 来快速地生成所需的 frontmatter。

CrabSAMA大约 3 分钟

H5开发遇到的问题

ios 头部、底部安全区域

通过 env + css 属性实现
飞书小程序中，通过 api 获取到安全区域，自行设置 padding

ios 禁止滚动溢出效果/橡皮筋效果

body {
  /* 需要滚动的容器再添加 overflow: scroll */
  overflow: hidden;
}

CrabSAMA小于 1 分钟

VSCode Extension 动态 Snippets

背景

组内在搞前端工程化提效相关内容，VSCode 插件也属于其中的一部分，因此最近在学习如何写 VSCode 插件。

在阅读了官方的文档后，发现 VSCode 插件有许多可以支持的功能：

改变 VSCode 的外观
在 UI 中添加自定义组件和视图
使用 Webview 展示自定义的网页
支持新的编程语言
支持特定的调试运行时
...

在上述功能中，我们一眼就看到了实际用于提效的功能，也就是对编程语言的功能扩展。这其中也包含了两个方向：Declarative language features（声明性语言功能）、Programmatic language features（编程语言功能）。前者是一些通过配置项实现的功能，后者是一些通过实际代码实现的逻辑，各有适用的场景。

CrabSAMA大约 5 分钟

前端日志收集、上报及告警

背景

公司内部的日志系统使用的是 ELK 框架，即 ElasticSearch、Logstash 和 Kibana 三个开源组件结合使用，完成更强大的用户对日志的查询、排序、统计需求。一般这套框架上还会使用 Filebeat 这个组件用于监控日志的变化，并传给 Logstash 这个管道。

流程是：Filebeat 监控日志变化并收集日志，通过 Logstash 这个管道上报到 ElasticSearch 中，最终通过 Kibana 展示 ElasticSearch 中的数据。

我这边是前端开发，因此需要关注的点主要在日志的收集与上报这块，这一块是和后端不一样的，后端使用了公司集成的开发框架即可实现开箱即用的日志上报功能。前端侧这边在公司的大前端部门也有提供对应的日志与埋点上报 SDK watchdog。

CrabSAMA大约 7 分钟

Vue2/Vue3共存Monorepo组件库引入VuePress报错

背景

项目结构：Vue2 与 Vue3 共存的组件库，采用 pnpm workspace Monorepo 方式组织仓库。

由于项目中有 Vue2 与 Vue3 的组件，因此需要搭两套文档，Vitepress 与 Vuepress2+只支持 Vue3 的宿主环境，Vue2 的组件库文档只能使用 Vuepress1.x 搭建。

依赖这块，package.json 中以 vue3 为主，vue2 通过别名的方式安装与引用。

//package.json
{
  "devDependencies": {
    "vue": "^3.3.4",
    "vue2": "npm:vue@2.7.15"
  }
}

CrabSAMA大约 3 分钟

正则表达式运行多次结果不一样

背景

// 用于匹配是否被 i18n 块包裹
const i18nKeyPattern =
  /(?:i18n(?:-\w+)?[ (\n]\s*(?:key)?path=|v-t=['"`{]|(?:this\.|\$|i18n\.|[^\w\d])(?:t|tc|te)\()\s*['"`](.*?)['"`]/gm
const str = "$t('当有效期结束时间到了，是否直接下线？')"

// Array(2) ["$t('当有效期结束时间到了，是否直接下线？'", "当有效期结束时间到了，是否直接下线？"]
i18nKeyPattern.exec(value)
// null
i18nKeyPattern.exec(value)

// true
i18nKeyPattern.test(value)
// false
i18nKeyPattern.test(value)

CrabSAMA大约 2 分钟

Vite 引入 monorepo 文件找不到路径

问题现象

在 Vitepress 中引入组件与样式时，报找不到路径的问题。

<script setup>
import { SearchUser } from '@***/bdi-component'
import '@***/bdi-component/dist/style.css'
</script>

CrabSAMA大约 1 分钟

UE5 直接导出视频

参考视频：https://www.youtube.com/watch?v=c39vdC7jloo&ab_channel=AzielArts

在 UE 中，我们可以通过关卡序列导出为视频，但在渲染时，我们只能选择 .jpg 序列，最后渲染出来的其实是十分多的图片，每一帧一张图片，实际上我们的视频就是由无数张图片组成的。另外，音频也会生成一个单独的文件，需要我们手动做合并。

CrabSAMA大约 1 分钟

Props(v-model)变更不生效问题

现象

在我们写 Vue 组件时，经常会遇到自定义 v-model 或 prop.sync 的需求。一般来说，我们有两种方法实现这种需求：

组件内部定义一个变量，使用两个 watch 分别监听 props 和内部变量的变更，前者初始化内部变量，后者在内部变量变更时 emit 一个 input / update:prop 事件使外部变量同步变更。
组件内部使用一个 computed 变量，定义它的 get 方法为获取 props 值，set 方法为 emit 事件。

CrabSAMA大约 2 分钟