重学系列

前言 上一篇介绍了BroadcastChannel跨页面通讯的方式。今天介绍一种我们非常熟悉的方式LocalStorage 。凭浏览器原生接口就能实现数据共享，用法简洁高效。需要注意，仅支持同源页面。

前言 上一篇介绍了PostMessage跨页面通讯的方式。有没有一种更简洁的方式，兄弟页面也能像父子页面一样通讯。今天就介绍一个更高效、更简洁的方案——BroadcastChannel API，它能轻

前言 公司后台项目微前端是使用iframe方式，跨页面通讯postMessage就需要我们必须掌握。比如，弹窗页与父页面的数据同步、多个标签页间的状态共享、嵌入的iframe与宿主页面的交互等。 本文

前言 不知道大家有没有遇到过，网页会根据系统设置的外观模式，显示不同的主题样式。这是如何实现的呢？ 1、核心原理：认识 prefers-color-scheme 媒体查询 CSS原生媒体特性 pref

背景 在公司开发图片裁剪功能时，需要实现一个裁剪框效果：选中区域清晰显示，而周围区域用半透明遮罩覆盖。正常我实现会用4个div分别盖住上、下、左、右四个区域用于裁剪框周围的遮罩。 本文将介绍几种纯CS

缓存之谜：为何你的应用总是无法自动更新？ 你是否也经历过这样的场景：线上刚修复完bug并已经发布，得到的反馈还是存在问题。所发布的应用是内嵌在小程序中，经常会出现发布后没有更新到最新的版本。只能无奈地

1、背景 公司一个业务是基于A项目和B项目的代码融合发布的新版本。其中A项目为主项目，B项目为子项目，现有代码同步方案： 在A项目中运行代码同步脚本(copy.js)，需要将脚本中的默认源路径替换成B

背景 在前端开发中，通常实现的导航栏切换时没有添加交互效果，今天就从0到1实现一个美观且交互流畅的导航栏。 直接看效果： 1.导航栏实现思路 实现的导航栏需要具备丝滑过渡动画，切换选项时，指示器通过自

前言 在 Git 依赖管理中，Submodule 和 Subtree 是两种主流方案，二者虽均能实现 “主仓库集成子仓库” 的需求，但核心机制、操作逻辑和适用场景差异显著。 本文将从核心原理、使用方式

前言 除了Git Submodule，Git Subtree 也是一种高效的依赖管理工具。它通过将一个独立的 Git 仓库作为另一个仓库的子目录，实现代码的复用与集成，同时避免了 Submodule

前言 我们经常会遇到需要在一个主项目中引用其他独立 Git 仓库的场景。例如，主项目需要使用一个通用的工具库、UI 组件库或者第三方开源模块。如果直接将这些外部代码复制到主项目中，会导致代码冗余、版本

前言 你有没有见过那种超有意思的网页，上面的眼睛会跟着你的鼠标转？就像真的有人在盯着你看一样！看到实际的效果，我就跃跃欲试，看看这个是如何实现的。 话不多说，我们先看一下效果： 1. 核心思路 如果要

背景 在项目开发过程中，会遇到文字竖排（从上到下）的布局形式。通常我们常用的实现方式是： 将每个字符单独使用标签包裹，再通过 ​​Flexbox排列​​ 设置 ​​固定宽度，强制换行​​ 在CSS中为

前言 日常开发中，Tooltip（提示框）是非常常见的。正常实现方式是依赖JavaScript监听hover事件，动态计算位置并插入DOM元素。 但你知道不？​​纯CSS其实也能“读取”HTML元素上

前言 我们在开发过程中会听到URI，这个和URL有什么区别呢？我们就来了解下其中的关系和区别。 我们先看一张图，大致了解其中的关系，再深入了解下： 1. 基本定义 1.1 URI URI（Unifor

前言 作为前端开发者，CSS过渡动画是我们提升交互体验的重要工具。本文将介绍CSS过渡动画的6种基础应用场景，包括悬停过渡(hover)、缩放(scale)、颜色变化(color)、尺寸变化(size

前言 作为前端开发者，CSS动画是我们必须掌握的核心技能。本文将系统介绍CSS动画的6种基础类型，包括位移（translate）、缩放（scale）、旋转（rotate）、尺寸变化（width/hei

前言 在日常开发中，我们经常遇见支付完成的情况，会有一个完成的动画。这次我们用css实现一个这样的动画，话不多说，先看效果： 1. 具体实现 1.1 实现思路 主要使用了​​SVG​​绘制圆形和打钩图

前言 我们实现一个拖拽留言板卡片，通常会使用js的方式去实现拖拽。这一次我们用纯CSS方式去实现，会带给你另一个思路，让你眼前一亮。 1. 基础知识 在说实现思路之前，我们先认识下一个css属性res

前言 视差滚动效果是一种视觉设计。这种效果通过让页面中不同元素创造出层次感，让网页看起来更加生动。 本文将详细介绍如何使用纯CSS实现滚动视差效果，重点分析三种不同的实现方式。 1. 实现思路 在CS