重学系列

1. 概述 跨页面通信是指在同一浏览器的不同标签页、窗口或 iframe 之间进行数据传递和同步的技术。本文全面对比了9种纯前端方案。 2. 所有通信方式列表 2.1 现代浏览器 API Broadc

前言 之前介绍的前端跨页面通讯方案中，每种都有各自的应用场景。今天要介绍一种，当面临大量数据存储需求时，也是一个不错的选择。它就是--IndexedDB。 本文将介绍IndexedDB跨页面通讯，基础

前言 在上一篇文章介绍了前端跨页面通讯终极指南⑧：Cookie 用法全解析,下一篇是介绍前端跨页面通讯终极指南⑨：# IndexedDB 用法全解析,考虑到这种方式并不是常用，先介绍下IndexedD

前言 之前介绍了很多前端跨页面通讯的方案，今天介绍下Cookie，Cookie自身有“同源共享”的特性，但因为缺少数据变化的主动通知机制，只能使用“轮询”弥补这一缺陷。 本文将使用Cookie轮询，进

前言 上一篇我们介绍了SharedWorker，今天要介绍一种与SharedWorker的“页面存活依赖”不同，即便在所有页面关闭后仍可后台运行，凭借“后台常驻”特性，实现跨页面、跨会话的通讯。它就是

前言 前面的文章已经介绍了postMessage、localStorage、messageChannel、broadcastChannel以及window.name。今天要介绍一种“多页面协同”场景的

前言 在之前的文章里，介绍了 BroadcastChannel 的广播、postMessage 的灵活以及 MessageChannel 的精准。这些现代 API 为我们提供了标准的通信能力。 今天我

前言 上一篇介绍了Localstorage跨页面通讯的方式。在前面的文章中，介绍了多种跨页面通信方式，从适用于同源页面的 BroadcastChannel，到解决跨域的 postMessage。当多个

前言 上一篇介绍了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. 核心思路 如果要