跳到主要内容

2024-12-22 小汇总

· 阅读需 3 分钟

级联选择​

复选框树形选择器比较常见，比如antd里的TreeSelect和Cascader组件。当选择某一项时，有以下几种可能：

  1. 如果是选中，则它的下级全都会被选中，并且还需要判断他有没有父级，如果有父级，还需要判断父级是否也是全选中或者半选中状态；
  2. 如果是取消选中，它的下级也会全部被取消选中，并且也要判断父级（或者说是上级）的选中状态。

用几个例子彻底掌握前端滚动相关动画

· 阅读需 4 分钟

1. 滚动时文字颜色动态改变​

效果：

滚动时文字颜色动态改变

实现原理​

  • 使用 conic-gradient 和 background-attachment: fixed 创建一个固定于视口的渐变背景。
  • 通过 background-clip: text 和 -webkit-background-clip: text 将背景裁剪为文字形状。
  • 设置 -webkit-text-fill-color: transparent 使文字透明，从而显示背景渐变。

关键在于 background-attachment 这个属性，它决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。值是fixed时，表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

示例代码​

<style>
  article {     /* 核心样式 */
    background-image: conic-gradient(
        hsl(100 100% 60%),
        hsl(200 100% 60%),
        hsl(100 100% 60%)
    );
    background-attachment: fixed;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }

  body {
    background: hsl(204 100% 5%);
    color: white;
    min-block-size: 200vh;
    padding: 5vmin;
    font-family: system-ui;
    font-size: min(200%, 5vmin);
  }

  h1 {
    font-size: 10vmin;
    line-height: 1.1;
    max-inline-size: 15ch;
    margin: auto;
  }
</style>

<body>
  <article>
    <h1>Scroll Contextual Conic Gradient Text</h1>
  </article>
</body>

2. 视差滚动文字效果​

效果展示​

视差滚动文字效果

实现原理​

这个效果的核心思想是**"同一个文字，用同一张背景图，分别做两种处理"**，利用两层文字的叠加创造视差效果：

第一步：准备两个完全相同的文字层

  • 上层：镂空文字（文字透明，显示背景图）
  • 下层：普通文字（背景图固定在视口）

第二步：让它们完美重叠

  • 两个文字的位置、大小、字体完全一致
  • 使用 position: fixed 将它们都固定在屏幕中央
  • 这样它们会完美叠加在一起

第三步：关键区别

上层文字（镂空层）：

  • 用 background-image: url(图片) 设置背景图
  • 用 background-clip: text 把背景裁剪成文字形状
  • 用 -webkit-text-fill-color: transparent 把文字本身变透明
  • 结果：只看到文字轮廓里有背景图

下层文字（背景层）：

  • 同样的背景图
  • 关键属性：background-attachment: fixed —— 背景图固定在视口不动
  • 文字是白色的（color: #fff）
  • 结果：整个区域都有背景图

第四步：滚动时的魔法 当你滚动页面时：

  • 上层的文字轮廓会随着滚动而移动
  • 下层的背景图因为 fixed 属性，固定在屏幕上不动
  • 两者的相对位置产生变化
  • 就产生了"透过镂空文字看背景"的视觉效果

示例代码​

<style>
  header {
    height: 200vh;  /* 创造滚动空间 */
  }

  .container {
    position: absolute;
    height: 100vh;
    width: 100%;
    mask-image: linear-gradient(#fff);
  }

  .title_wrapper {
    position: fixed;  /* 固定在视口中央 */
    display: block;
    margin: auto;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

  .title_wrapper h1 {
    text-align: center;
    font-size: 64px;
    text-transform: uppercase;
    font-weight: 900;
  }

  /* 上层：镂空文字 */
  .container_solid .title_wrapper h1 {
    background-image: url(./imgs/mountain.jpg);
    background-size: cover;
    background-position: center;

    /* 将背景裁剪为文字形状 */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 兜底文字颜色 */
    color: black;
  }

  /* 下层：固定背景 */
  .container_image {
    top: 100vh;  /* 放在下一屏位置 */
    background-image: url(./imgs/mountain.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;  /* 关键：背景固定在视口 */
    color: #fff;
  }

  section {
    min-height: 100vh;
    padding: 2em;
    margin: auto;
    max-width: 800px;
  }
</style>

<body>
  <header>
    <div class="container container_solid">
      <div class="title_wrapper">
        <h1>The Great Outdoors</h1>
      </div>
    </div>

    <div class="container container_image">
      <div class="title_wrapper">
        <h1>The Great Outdoors</h1>
      </div>
    </div>
  </header>

  <section>
    <h2>滚动页面查看效果</h2>
    <p>这里是示例内容，用于创造滚动空间...</p>
  </section>
</body>

页面滚动相关场景

· 阅读需 26 分钟

短摘要：本文档汇总常见的页面滚动场景与实现示例（虚拟滚动、滚动进度、滚动定位、滚动加载、滚动动画等），并给出兼容性与性能优化建议，便于工程中复用。

目录：

  • 虚拟滚动
  • 滚动进度
  • 滚动定位
  • 滚动加载
  • 滚动动画
  • 滚动穿透
  • 滚动条样式
  • 滚动吸附
  • 下拉回弹
  • 橡皮筋效果

n8n 使用入门

· 阅读需 9 分钟

在低代码自动化领域，n8n凭借其强大的灵活性和丰富的节点生态，成为越来越多开发者的首选。

· 阅读需 11 分钟

模型上下文协议（Model Context Protocol，MCP）是一个协议。

一个训练好的AI模型的知识库可能是滞后的，或者它是通用性的模型，可能对某些领域并不是很了解，需要进一步学习。比如你想询问大模型今天你所在的城市天气怎么样，它可能会这样回答：

目前我无法实时获取北京的天气信息，建议您查看天气预报应用或网站（如中国天气网、Weather.com等）获取最新天气情况。如果您需要，我可以提供一些通用的天气建议，例如：

若有雨，建议携带雨具；
若有高温，注意防晒和补水；
若有寒流，注意保暖。
需要我帮您查找最新的天气信息吗？😊

这是因为大模型本身并不具备自动查询天气信息的能力，我们可以通过MCP协议自己制定一些查询天气的工具，当与大模型互动时，大模型会从我们制定的工具中选择与目前对话匹配的工具，然后调用这些工具获取天气的相关信息，并结合这些信息生成答复。

浏览器渲染原理

· 阅读需 5 分钟

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传给渲染主线程的消息队列。在时间循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

整个渲染流程分为多个阶段：HTML解析（Parse）、样式计算（Style）、布局（Layout）、分层（Layer）、绘制（Paint）、分块（Tiling）、光栅化（Raster）、画（Draw）。

渲染进程中包含：渲染主线程和合成线程。

2024-11-16 小汇总

· 阅读需 7 分钟

1. navigator.onLine 可能不准确​

最近有用户反馈页面数据加载异常，UI加载出来了，但是页面中的表格数据是空的，但是周围同学一个也复现不出来，看用户演示，切到那个页面时，页面并没有出现loading，看着像是没有调接口。打开用户控制台，发现确实没有调接口。

使用 ts-morph 库编辑TS文件

· 阅读需 6 分钟

时间如梭，停更快三个月了，时间过得太快了！

今天分享一个库：ts-morph。使用它可以读取和操作TS文件，并实时保存文件内容。这个库包装了 TypeScript 编译器 API，可以让我们方便的操作TS AST。

2024-03-24 小汇总

· 阅读需 8 分钟

算法：合并公共范围​

假如有一个数字类型的二维数组，数组中的每一项都是固定长度为 2 的子数组，代表范围，比如 [2, 5] 表示数字范围在 2~5 之间，并且包含 2 和 5。要求你设计一个函数，它接受这样格式的二维数组，合并有交集的范围（Range），最终返回新的二维数组，这个新二维数组的数字范围与原数组一样，且总体是按照从小到大排列的，只是有些重复的范围被合并了。

2024-03-16 小汇总

· 阅读需 8 分钟

1. 文本自适应超出省略​

单行文本超出省略时，通常需要指定一个固定的宽度，或者使用百分比宽度。比如下面的 div 元素，虽然没有指定宽度，但是他会继承父元素的宽度，超出出现省略符。

<div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, ducimus eaque laborum nostrum sed cumque optio quisquam nihil soluta aliquid! Iste officiis delectus distinctio veniam? Recusandae consectetur sit pariatur saepe! 
</div>

<style>
    div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

但有时候我们可能会遇到下面这种布局，父容器的宽度不是固定的，中间的文本内容会自动超出省略，而它两侧的内容可以正常展现。

中间文本超出省略