知识点总结（一）

好记性不如烂笔头。把遇到的不常见的知识点都记录下来，避免下次再遇到时还不理解。总结一下也能加深自己的印象。

clearTimeout

执行clearTimeout(timer)后，定时器回调不会执行，但timer的值不变。

防抖：事件触发后等待指定时间，若期间没有再次触发，则执行函数；若期间重复触发，则重新计时。

const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(null, args);
    }, wait);
  };
};

节流：在指定时间间隔内，无论触发多少次，函数只执行一次。

const throttle = (func, wait) => {
  let lastTime = 0;
  let timeout;
  return (...args) => {
    const now = Date.now();
    const remaining = wait - (now - lastTime);
    if (remaining <= 0) {
      func.apply(null, args);
      lastTime = now;
    } else if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(null, args);
        lastTime = Date.now();
        timeout = null;
      }, remaining);
    }
  };
};

line-break

line-break属性控制标点符号、单词、连续字符在行尾的换行方式，尤其影响：

标点（如句号、逗号）能否出现在行首/行尾
连续字母或数字（如长单词、URL）是否允许断开
中文/日文文本的换行规则

1
2
3

.element {
  line-break: auto | loose | normal | strict | anywhere;
}

1. auto (默认值)
行为：浏览器根据文本语言自动选择换行规则
示例：中文文本默认允许标点出现在行首，英文则更倾向于避免断开单词

2. loose
行为：宽松换行，允许更多换行机会
适用场景：短行文本（如报纸排版）
特点：
允许标点出现在行首
更频繁断开长单词或连续字符

3. normal
行为：使用标准换行规则（介于 loose 和 strict 之间）
特点：
标点通常不出现在行首
仅在允许断点处换行

4. strict
行为：严格换行，遵循排版规范（如 CSS Text Module Level 3）
特点：
禁止标点出现在行首
仅在明确允许的断点换行

5. anywhere (谨慎使用)
行为：任意位置均可换行（类似 word-break: break-all）
特点：
无视语言规则，强制在字符间换行
可能导致单词中间断开

JSON.stringify

1	JSON.stringify(value[, replacer[, space]])

接收3个参数。
第一个参数要处理的对象；

第二个参数处理对象的属性，可以是函数或数组。函数参数为key和value，返回undefined代表过滤掉该属性，返回其他值代表替换原属性值。数组为字符串数组，表示仅返回数组中的属性，顶层属性。

第三个参数控制缩进和格式化，可以是数字或字符串。数字为每级缩进空格数，大于10截断。字符串表示用该字符串作为缩进符。

切换node版本

方法1：nvm
修改启动命令

1	"dev": "nvm use v18.20.4 && vite",

方法2：nvm-desktop
nvm-desktop github

linux命令

# 删除非空目录
rm -r /path/to/directory

# 移动文件夹
mv /path/from/ ./

# 重命名文件夹
mv xx yy

nginx 504

原因：请求超时

解决方案：

location /api {
    proxy_pass http://backend_server;  # 上游服务器地址
    proxy_read_timeout 300s;     # 默认60秒，调整为300秒（按需）
    proxy_connect_timeout 75s;   # 连接上游服务器的超时时间
    proxy_send_timeout 60s;      # 发送请求到上游服务器的超时
}

FontFace文件路径问题

FontFace用于动态加载字体。

1
2
3

const font = new FontFace('iconfont', 'url(./src/assets/fonts/iconfont.woff)');
await font.load();
document.fonts.add(font);

虽然以上代码在与assets同级的App.vue中，但url前面是 ==./src/assets==，其他都不行。原因未知。
font文件放public下用绝对路径也访问不到，只能这样。
如果不知道怎么能访问到字体文件，可以用@font-face加载一个字体文件，在network中看看这个文件的url是什么样。

vuex的mutation调用

mutation只能接收2个固定参数，第一个是state，第二个是payload。如果尝试传递多个参数，只有第一个会传递成功，其他参数被忽略。

mutations: {
    setUserInfo(state, { isSuper, adminList, userList }) {
      state.isSuper = isSuper;
      state.adminList = adminList;
      state.userList = userList;
    },
},
  
methods: {
    ...mapMutations(['setIsLoginVisible', 'setUserInfo']),
    test() {
        this.setUserInfo({
            isSuper: true,
            adminList: [],
            userList: []                
        })
    }
}

下载Blob格式压缩包时报错

即使页面是 HTTP，某些浏览器也会将 Blob URL 识别为潜在风险

1 2	const blob = new Blob([data], {type: 'application/zip'}); const url = URL.createObjectURL(blob); // 可能触发警告

解决方案：改用 Base64 下载

const reader = new FileReader();
reader.onload = () => {
  const link = document.createElement('a');
  link.href = reader.result;
  link.download = 'file.zip';
  link.click();
};
reader.readAsDataURL(blob);

npm login时报错Public registration is not allowed

由于使用了不支持公开注册的npm镜像源导致。例如淘宝镜像（registry.npmmirror.com）默认禁止公共账号注册和登录操作。

解决办法：

# 临时方案（仅当前命令生效）
npm login --registry=https://registry.npmjs.org/

# 永久方案（修改全局配置）
npm config set registry https://registry.npmjs.org/

与搭配

<el-backtop>需要放在<el-scrollbar>里面，而且target为 .el-scrollbar__wrap。

<el-scrollbar height="calc(100vh - 210px)">
    <SimilarItem v-for="item in searchResult" :key="item.id" :info="item" />
    <el-backtop target=".el-scrollbar__wrap" :right="100" :bottom="100"/>
</el-scrollbar>

disabled-devtool使用

DisableDevtool.md5('xxxx') // 无用
DisableDevtool({ 
  md5: 'xx', // 生效，32位小写
});