什么是iframe，火爆的微前端解决方案方案，教你快速看懂
iframe（Inline Frame） 是一种 HTML 标签，它允许在一个网页内部嵌套加载另一个网页，从而实现在主页面中展示外部网页内容的功能。iframe 创建了一个独立的浏览上下文，拥有自己的文档对象模型（DOM）和执行环境，这意味着它不会与主页面共享JavaScript变量或CSS样式，提供了较好的隔离性。 一、简单使用案列，网站中嵌套 Chatgpt 一、简单使用案列，网站中嵌套 Chatgpt 1.它允许你在当前页面中嵌入...
如何在页签中监听 LocalStorage 变化？
在开发中，你是否会碰到过这样的需求： 需要监听 LocalStorage 的变化 。这在不同浏览器页签间是相对简单的，因为浏览器提供了内置的 事件。但在 同一个浏览器页签下 ，却没有直接的方式实现。今天，我们探讨下有几种 高效且易用 的解决方案，可以帮助轻松应对这种需求！ 传统方案的痛点 先来看看浏览器是如何帮助我们处理 不同页签 的 LocalStorage 变化： 通过监听 事件，当在其他页签修改 LocalStorage 时，你可...
怎么用 MutationObserver 解决你的问题？
提供了 监听对 DOM 树所做更改 的能力，当对 目标根节点的 DOM 树 进行 、 、 时都会触发其回调函数。 基于这个特性，在部分场景下能够让我们实现 无侵入式增强第三方库的能力 ，但也相信有不少人对它们的认识仅限于 、 ，就是没有实打实的把它们应用起来，去解决一些实际的问题，这就导致了在出现某些问题需要快速解决时，就会出现要么没思路、要么解决方案过于繁琐等问题。 本文会列举两个实际场景（ ），以及如何使用这个 API 来解决问题的...
Electron实现文件缓存背景
背景 基于Electron研发的一款IM企业通信桌面端应用，会存在非常多文件、图片、视频类型回话消息。在Electron应用（桌面客户端软件）中，快速加载并显示图片是提升用户体验的关键。然而，传统的图片加载方式往往存在加载速度慢、资源占用高等问题，影响了用户的使用体验。 解决的问题 1. 支持自定义配置存储的磁盘位置 2. 支持长期存储 3. 支持自定义存储大小 4. 支持自定义存储类型（如图片、视频、文件，或者更细致化到MIME） 5...
ElementPlus 官网导航栏有点意思，来看看咋实现
导航栏效果如下： 接下来，我们基于 + ，逐步复刻，不过无需关注框架，重点在 。 页面结构 先搭建页面结构，大致包含以下内容： ：容器元素，包裹 header 和 content 元素。 : 顶部栏， absolute 布局，相对于 container 元素，置顶。 : 内容元素，宽高等同 container，可滚动。 布局示意简图： 以下是 Vue 页面代码： 效果如截图所示，由于没有给 header 设置背景， 默认 （透明），所以...
Git stash命令详解和使用
stash 命令使用非常简单，是经常使用的命令 应用场景： 1 、临时存储已修改的代码：比如正在分支A上开发某个功能，还未完成，突然要切换到B分支上去修复一个bug。这时就可以用git sta 将本地修改的内容保存至堆栈区，再切换到B分支修改bug，修复完成后，再切回到A分支，从堆栈中恢复刚刚保存的内容。 2 、同步代码：由于不小心，本来要在A分支上开发的功能代码，却写在了B分支上，这时就可以用git stash将本地代码...
vscode自定义主题原来如此简单
我的一篇文章 受到广泛好评。小伙伴们对自定义主题非常感兴趣，但这个事情不是简单就能说完的，因此单开一篇文章详细讲解。 程序员工作时一般都会使用本地编辑器，祂就像白月光一样和你并肩作战，不离不弃。 但每个人心中都有自己的白月光形象，如果祂的颜值完美，那自己写代码时也会更加心情舒畅，以月光女神vscode为例 vscode本身内置了一些主题，插件市场更是有数不胜数的主题插件。但那毕竟是别人心目中的完美形象，而一千个人眼里有一千个女神。 vs...
图解Web渲染：一文看懂CSR、SSR、SSG、ISR、ESR、NSR
在现代Web开发中，了解不同的渲染模式对于提升用户体验和网站性能至关重要。本文将图文并茂地介绍几种主要的渲染方式：客户端渲染（CSR）、服务端渲染（SSR）、静态站点生成（SSG）、增量静态重建（ISR）、边缘侧渲染（ESR）和本地侧渲染（NSR）。 1\. CSR（Client Side Rendering客户端渲染） CSR 模式下，浏览器向 CDN 请求静态 HTML 和 JS，JS 负责获取业务服务器数据并在浏览器中渲染页面。...
我的 Electron 客户端也可以全量和增量更新了
前言 本文主要介绍 客户端应用的自动更新，包括全量和增量这两种方式。 全量更新： 运行新的安装包，安装目录所有资源覆盖式更新。 增量更新： 只更新修改的部分，通常是渲染进程和主进程文件。 本文并没有拿真实项目来举例子，而是起一个 新的项目 从 0 到 1 来实现自动更新。 如果已有的项目需要支持该功能，借鉴本文的主要步骤即可。 前置说明： 1. 由于业务场景的限制，本文介绍的更新仅支持 操作系统，其余操作系统未作兼容处理。 2. 更新流...