完成一级分类动态添加背景颜色、通过JS控制二三级商品分类的显示与隐藏、函数的防抖与节流、完成三级联动节流的操作【Vue项目】网站首页 技术教程

完成一级分类动态添加背景颜色、通过JS控制二三级商品分类的显示与隐藏、函数的防抖与节流、完成三级联动节流的操作【Vue项目】

赖皮. 2024-06-17 10:29:54

简介完成一级分类动态添加背景颜色、通过JS控制二三级商品分类的显示与隐藏、函数的防抖与节流、完成三级联动节流的操作【Vue项目】

1. 完成一级分类动态添加背景颜色

第一种解决方案：采用样式完成（可以的）
第二种解决方案：通过JS完成

export default {
  name: "TypeNav",
  data() {
    return {
      // 存储用户鼠标移上哪一个一级分类
      currentIndex: -1,
    };
  },
  // 组件挂载完毕：可以向服务器发请求
  mounted() {
    // 通知Vuex发请求，获取数据，存储于仓库当中
    this.$store.dispatch("categoryList");
  },
  computed: {
    ...mapState({
      // 右侧需要的是一个函数，当使用这个计算属性的时候，右侧的函数会立即执行一次
      // 注入一个参数state，其实即为大仓库中的数据
      categoryList: (state) => state.home.categoryList,
    }),
  },
  methods: {
    // 鼠标进入修改响应式数据currentIndex属性
    changeIndex(index) {
      // index: 鼠标移上某一个一级分类的元素的索引值
      this.currentIndex = index;
    },
    // 一级分类鼠标移除事件的回调
    leaveIndex() {
      // 鼠标移出currentIndex,变为-1
      this.currentIndex = -1;
    },
  },
};

2. 通过JS控制二三级商品分类的显示与隐藏

最开始的时候，使用该CSS样式display：block|none显示与隐藏二三级商品分类

:style="{display: currentIndex == index ? 'block' : 'none'}

3. 演示卡顿现象

正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔次啊会触发回调，把频繁触发变为少量触发

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次

4. 函数的防抖与节流

防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/lodash.js"></script>
</head>
<body>
    <p>
        请你输入搜所得内容：<input type="text">
    </p>
</body>
</html>
<script>
    // 防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发 只会执行一次 
    let input = document.querySelector('input')
    //文本发生变化立即执行的事件
    input.oninput =  _.debounce(function(){
        console.log('ajax发请求');
    }, 1000)
    // lodash插件：里面封装函数的防抖与节流的业务【闭包 + 延迟器】
    // 1. lodash函数库对外暴露_函数
    
  
</script>

节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/lodash.js"></script>
</head>
<body>
    <div>
        <h1>我是计数器<span>0</span></h1>
        <button>点我加上1</button>
    </div>
</body>
</html>
<script>
    // 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔次啊会触发回调，把频繁触发变为少量触发
    // 获取节点
    let span = document.querySelector('span')
    let button = document.querySelector('button')
    let count = 0
    // 计数器：在一秒以内，数字只能加1
    button.onclick = _.throttle(function(){
        // 节流：目前这个回调函数是5s执行一次
        // 假如这里面有很多的业务代码，是不是可以给浏览器很充裕的时间去解析
        count++
        span.innerHTML = count
    }, 5000)

    // 防抖：用户操作很频繁，但只是执行一次
    // 节流：用户操作很频繁，但是它把频繁的操作变为少量操作【可以给浏览器有充裕的时间解析代码】
    // 节流：闭包+延迟器
</script>

5. 完成三级联动节流的操作

// 最好的引入方式是：按需加载
import throttle from 'lodash/throttle'

export default {
	methods: {
    // 鼠标进入修改响应式数据currentIndex属性
    // throttle回调函数别用箭头函数，可能会出现上下文 this 问题
    changeIndex: throttle(function(index){
      // index: 鼠标移上某一个一级分类的元素的索引值
      // 正常情况（用户慢慢的操作）：鼠标进入，每一个一级分类h3，都会触发鼠标进入事件
      // 非正常情况（用户操作很快）：本身全部的一级分类都应该触发触发鼠标进入事件，但是经过测试，只有部分h3触发了
      // 就是由于用户的行为过快导致浏览器反应不过来，如果当前的回调函数中有大量的业务，有可能出现卡顿现象。
      this.currentIndex = index;
      console.log('鼠标进入' + index);
    }, 50),
}