全部文章
共 1299 篇文章
遇到升级新版sass（1.80以上）的相关配置问题
最新版 作者自己写这篇文章时的最新版本1.80.6 sass在1.80版本以上有不少使用发生了变化。以下几点是我新装最新版本sass遇到的问题： 在之前版本都是使用@import来对样式文件进行引用的，升级到最新版后你会发现报错了： 解决办法就是使用@use 或者@forward 来进行引用： 如果控制台警告： 解决方法： 在css的preprocessorOptions选项中配置：api: ‘modern compiler’, 配置完...
前端实现画中画超简单，让网页飞出浏览器
这篇文章主要介绍了前端的 Document Picture in Picture 功能。包括基本代码结构、请求 PiP 窗口、检查支持与否、设置样式（全局样式同步、引入外部 CSS 文件、支持媒体查询）、监听进入退出和焦点失焦事件、克隆节点等，还提供了完整示例代码，最后总结掌握该功能可带来更灵活的交互体验。 关联问题: PiP支持哪些浏览器 画中画样式怎么改 如何优化PiP性能 Document Picture in Picture 介...
为什么组件库打包用 Rollup 而不是 Webpack
Rolup 是一个打包工具，类似 Webpack。 组件库打包基本都是用 Rollup。 那 Webpack 和 Rollup 有什么区别呢？为什么组件库打包都用 Rollup 呢？ 我们来试一下： 我们创建两个模块： src/index.js src/utils.js 很简单的两个模块，我们分别用 rollup 和 webpack 来打包下： 安装 rollup： 创建 rollup.config.js 配置入口模块，打包产物的位置、...
使用 Service Worker 让首页秒开
在大部分场景预加载是页面性能优化的利器，而对于类似首页这种承担用户第一次访问的页面却无法使用预加载，这时候我们可以用 Stale While Revalidate 加速页面访问，策略分 3 步 1. 在收到页面请求时首先检查缓存，如果命中缓存就直接从缓存中返回给用户 2. 将缓存返回用户的同时，在后台异步发起网络请求，尝试获取资源的最新版本 3. 获取成功后更新缓存，下次使用 而这一切的幕后功臣便是 Service Worker，作为一...
比较for、for...in、for...of、forEach的区别
目录 前言 在比较之前我们先了解两个概念： 迭代（iterate），指的是按照某种顺序反复多次执行一段程序，通常会有明确的终止条件。 遍历（traversal），指的是按照一定的规则访问树形结构中的每个节点，而且每个节点都只访问一次。 一、四种循环 1、for循环 for语句是一种先测试循环语句，（即先检测退出条件，再执行循环体内的代码.) 语法： for(初始化变量;条件表达式;操作表达式){ 循环体语句; } (1)三个表达式都可以...
Antd 样式覆盖
目前作者所在的业务正在升级 Antd5.0，不得不说 Antd5.0 真的太香了，但是由于团队的 UE 规范进行了大改版，Antd5.0 所有的 必须对齐最新的规范，因此就需要对 Antd5.0 组件做主题定制。 现状 目前针对项目中使用的 antd 高频组件进行了梳理，并且根据规范基于 design token 对这些高频组件进行样式定制，对于主题色、圆角、边框、字体等用户 高的主题都已经满足团队规范。 虽然 Desig...
在 JS 中， 如何解决递归导致栈溢出问题
关键词 ：栈溢出问题 在 JavaScript 中，递归如果执行过深，确实有可能导致“栈溢出(stack overflow)”错误，因为每次函数调用都会向调用栈中添加一个新的帧，而每个线程的调用栈都有其最大容量限制。当这个容量被超过时，就会发生栈溢出。为了解决这个问题，你可以使用几种不同的方法： 尾调用优化（Tail Call Optimization） 在 ES6 中，引入了尾调用优化。这意味着如果函数的最后一个操作是返回另一个函数的...
0.1 + 0.2 不等于 0.3 这是什么原因，要怎么解决
关键词 ：精度计算 在 JavaScript 中， 不等于 的原因是浮点数的精度问题。 在计算机中，浮点数采用二进制存储，而有些十进制小数无法精确地用二进制表示。 和 在二进制表示中是无限循环的，在进行运算时会产生舍入误差。 要解决这个问题，可以使用以下方法： 1. 使用 来比较两个浮点数是否接近： 2. 将浮点数乘以一个适当的倍数转换为整数进行计算，计算完成后再除以这个倍数转换回浮点数： 3. 使用第三方库，如 ，它提供了更精确的十进...
js 如何判空，「空」包含了：空数组、空对象、空字符串、0、undefined、null、空 map、空 set , 都属于为空的数据
关键词 ：判断 以下是一个 JavaScript 方法，用于校验您提到的各种“为空”的场景： 您可以使用这个方法来检测各种值是否为空，例如：