javascript 尚硅谷 尚硅谷的前端怎么样

7：函数的防抖与节流
        7.1 卡顿现象

        原因：事件的触发非常频繁，每一次的触发都会引起回调函数的执行，如果回调函数内部有计算，且频繁触发，那么就会导致浏览器卡顿。

        7.2 防抖

        介绍：指频繁触发事件，但是只会执行最后一次的事件回调，之前的回调都会被取消。

        技术：lodash中debounce方法封装了防抖的实现

        7.3 节流

        介绍：指频繁触发事件，但是事件回调在一定的时间内只会执行一次，把频繁触发变为少量触发。

        技术：lodash中的throttle方法封装了节流的实现

        7.4 三级联动的添加一级分类背景色的节流操作

import throttle from 'lodash/throttle'
  
 //注意使用普通函数，箭头函数有this问题
 changeIndex: throttle(function(index){
     this.currentIndex = index
 },50)

8：三级联动路由的跳转与传参
        8.1 跳转

        1.声明式路由导航：不能较好的完成路由跳转

        存在问题：卡顿问题

        原因：router-link标签它是一个组件，当循环遍历三级联动分类时，会在一瞬间创建很多router-link标签，当数据发生变化时，还涉及到模板解析、虚拟DOM、真实DOM等很多步骤，消耗内存很大，导致页面卡顿。

        2.编程式路由导航：能够较好的完成跳转，但是不够优秀

        存在问题：每一个a标签都绑定了对应的点击事件，会使点击事件很多。

        3.编程式路由导航 + 事件委派：能够很好的完成路由跳转

        原因：将所有的点击跳转事件都委派给统一的父节点来完成，只有一个回调。

        8.2 传参（要求传递名字与对应id）

        1.编程式路由导航 + 事件委派涉及的问题与解决方法

        问题1：因为父节点中包含了较多的子节点（h3、dt、dl、a等），怎么区分点击的是a节点？

        解决方法：给a标签添加自定义属性 :data-categoryName="c1.categoryName"，通过鼠标事件 event.target.dataset 去拿到对应的自定义属性并且判断是否是a标签（注意浏览器会把驼峰式自定义属性名改为非驼峰式 categoryName ==> categoryname）

        问题2：怎么传递对应的id

        解决方法：给三级a标签分别添加自定义属性 :data-category1Id、:data-category2Id、:data-category3Id进行区分

// 三级联动路由跳转
     goSearch(event) {
       // 解构出自定义属性
       const { categoryname, category1id, category2id, category3id } = event.target.dataset;
       // 整理参数
       const location = { name: "search" };
       const query = { categoryName: categoryname };
       // 判断是否是 a标签
       if (categoryname) {
         if (category1id) {
           query.category1Id = category1id;
         } else if (category2id) {
           query.category2Id = category2id;
         } else {
           query.category3Id = category3id;
         }
       }
       // 整理参数
       location.query = query
       this.$router.push(location);