小白白仿网易云项目经验总结

2023-10-02 14:06:38

正文

1. 防抖函数的全局注册

在项目中，我们经常需要使用防抖函数来优化用户体验，比如在搜索框中输入内容时，不立即触发搜索，而是等待用户输入一段时间后再触发。如果我们每次都需要手动编写一个防抖函数，不仅代码冗长，而且也不利于维护。

为了解决这个问题，我们可以将防抖函数注册为一个全局函数，这样我们就可以在任何地方使用它，而无需重复编写。

// 定义防抖函数
const debounce = (func, wait) => {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
};

// 全局注册防抖函数
window.debounce = debounce;

现在，我们可以在任何地方使用debounce函数了。例如，在搜索框中输入内容时，我们可以这样写：

const input = document.getElementById('search-input');
input.addEventListener('input', debounce(() => {
  // 搜索内容
}, 500));

这样，当用户在搜索框中输入内容时，不会立即触发搜索，而是等待用户输入500毫秒后再触发。

2. VUE 生命周期函数中绑定防抖函数

在 VUE 中，我们经常需要在生命周期函数中绑定防抖函数，比如在mounted函数中绑定一个防抖函数来初始化组件的数据。但是，防抖函数是一个闭包，在离开该组件时，无法销毁该事件函数。

为了解决这个问题，我们可以使用this.$once方法来绑定一个只执行一次的防抖函数。例如，在mounted函数中绑定一个防抖函数来初始化组件的数据，我们可以这样写：

mounted() {
  this.$once('mounted', debounce(() => {
    // 初始化组件的数据
  }, 500));
}

这样，当组件挂载时，防抖函数只会被执行一次，在组件离开时，防抖函数也会被销毁。

3. 歌手详情页MV页面的数据请求问题

在歌手详情页的MV页面中，如果我们一刷新页面，就会发现获取的数据中没有limit（获取多少条数据）的值。这是因为，在MV页面中，我们使用的是一个全局的limit变量，而在刷新页面时，这个变量会被重置为初始值。

为了解决这个问题，我们可以将limit变量存储在本地存储中，这样即使刷新页面，limit变量的值也不会丢失。例如，我们可以这样写：

// 从本地存储中获取limit变量
const limit = localStorage.getItem('limit');

// 如果limit变量不存在，则初始化为默认值
if (!limit) {
  limit = 10;
  localStorage.setItem('limit', limit);
}

// 使用limit变量获取MV数据
const data = await fetch(`/api/mv?limit=${limit}`);