Rynes

发表于 更新于 分类于

问题背景

在某管理平台时，遇到了一个奇怪的问题：

同一套 CSS 类 .filter-section，在某些页面生效，在另一些页面却不生效。

通过排查发现，问题出在 Vite + Vue3 + SCSS 的样式加载机制上。本文将详细分析问题根因，并给出解决方案。

现象观察

阅读全文 »

发表于 更新于 分类于

在 Mac 开发环境中，不同项目对 Node 版本的要求可能不同。本文对比三种主流工具（nvm、n、fnm）的安装、版本切换及使用场景，帮助开发者选择最适合的方案。

工具对比与选择

工具优点缺点适用场景
nvm功能全面，支持多版本隔离安装稍复杂，需配置 Shell需要精细控制版本和全局模块
n安装简单，命令直观无法隔离全局模块，功能较少追求简单快速切换
fnm速度快，支持自动切换项目版本社区相对较小，文档较少喜欢现代化工具且需要自动切换

nvm 使用详解

安装与配置

阅读全文 »

发表于 更新于 分类于

uni.$emit

  • 如果没有提供参数，则移除所有的事件监听器
  • 如果只提供了事件，则移除该事件所有的监听器
  • 如果同时提供了事件与回调，则只移除这个回调的监听器
  • 提供的回调必须跟$on 的回调为同一个才能移除这个回调的监听器

发送

1
uni.$emit("update", { msg: "页面更新" });

监听

阅读全文 »

发表于 更新于 分类于

getBoundingClientRect

getBoundingClientRect() 是一个用于获取元素位置和尺寸信息的方法。它返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置，其中包含了以下属性：

  • x：元素左边界相对于视口的 x 坐标。
  • y：元素上边界相对于视口的 y 坐标。
  • width：元素的宽度。
  • height：元素的高度。
  • top：元素上边界相对于视口顶部的距离。
  • right：元素右边界相对于视口左侧的距离。
  • bottom：元素下边界相对于视口顶部的距离。
  • left：元素左边界相对于视口左侧的距离。
1
2
3
4
5
6
7
8
9
10
11
const box = document.getElementById("box");
const rect = box.getBoundingClientRect();

console.log(rect.x); // 元素左边界相对于视口的 x 坐标
console.log(rect.y); // 元素上边界相对于视口的 y 坐标
console.log(rect.width); // 元素的宽度
console.log(rect.height); // 元素的高度
console.log(rect.top); // 元素上边界相对于视口顶部的距离
console.log(rect.right); // 元素右边界相对于视口左侧的距离
console.log(rect.bottom); // 元素下边界相对于视口顶部的距离
console.log(rect.left); // 元素左边界相对于视口左侧的距离

应用场景

阅读全文 »

发表于 更新于 分类于

普通函数

1
2
3
4
5
const add10 = (x) => x + 10;
const mul10 = (x) => x * 10;
const add100 = (x) => x + 100;

console.log(add10(mul10(add100(10)))); // (10 + 100) * 10 + 10 = 1110

我们想输出的是一个多层函数嵌套的运行结果，即把前一个函数的运行结果赋值给后一个函数。但是如果需要嵌套多层函数，那这种类似于 f(g(h(x)))的写法可读性太差，我们考虑能不能写成(f, g, h)(x)这种简单直观的形式，于是 compose()函数就正好帮助我们实现。

compose

compose 函数是一种函数式编程的概念，它可以将多个函数组合成一个新的函数。在 JavaScript 中，compose 函数的实现通常是使用 reduceRight 方法，从右到左依次执行每个函数。

阅读全文 »

发表于 更新于 分类于

一道面试题引发的思考

从上到下依次说出执行结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var foo = function () {
  console.log("foo1");
};
foo();

var foo = function () {
  console.log("foo2");
};
foo();

function foo() {
  console.log("foo1");
}
foo();

function foo() {
  console.log("foo2");
}
foo();

输出结果：foo1 foo2 foo2 foo2

分析

阅读全文 »

发表于 更新于 分类于

概念

按位取反是指将一个二进制数的每一位都取反，即 0 变为 1，1 变为 0。在很多编程语言中，可以通过使用位运算符~来实现按位取反操作。

运算规则

  1. 将要取反的二进制数转换为二进制补码表示法。
  2. 对二进制补码表示法的每一位进行取反操作。
  3. 将取反后的二进制数转换回十进制表示法。

示例

阅读全文 »

发表于 更新于 分类于

文件传输是一个常见的需求。对于大文件的下载和上传，直接使用传统的方式可能会遇到性能和用户体验方面的问题。

幸运的是，前端技术提供了一些高效的解决方案：文件流操作和切片下载与上传。本文将深入探讨这些技术，帮助你理解它们的原理和实现方法，以优化文件传输效率和提升用户体验。

前端文件流操作

在前端开发中，文件流操作是指通过数据流的方式处理文件，对文件进行读取、写入和展示等操作。下面详细介绍了前端文件流操作的几个基本概念和技术。

数据流和文件处理的基本概念

数据流是指连续的数据序列，可以从一个源传输到另一个目的地。在前端开发中，文件可以被看作数据流的一种形式，可以通过数据流的方式进行处理。 文件处理涉及读取和写入文件的操作，包括读取文件的内容、写入数据到文件，以及对文件进行删除、重命名等操作。

阅读全文 »