• js数据类型、节流/防抖、点击事件委派优化、过渡动画

    函数节流防抖

    节流：多次变少次  --执行的时间段
    防抖：多次变一次，只执行最后那一次（秒杀）--停止以后多长时间执行

    解决浏览器的卡顿现象，减少对服务器的压力
    用于频繁改变的事情，轮播图、秒杀、点击事件、联想输入

     按需引入lodash减少打包体积
        引入的时候不要去引入整个lodash
        引入lodash/throttle

     100秒触发100次
        正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）
        节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
        防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会，也就是说如果连续快速的触发  只会执行一次

     

    1. <body>
    2.  
    3.   <button id="handle">测试不做函数节流/防抖button>
    4.   <button id="throttle">测试函数节流button>
    5.   <button id="debounce">测试函数防抖button>
    6.   
    7.   
    8.  
    9.   <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js">script>
    10.   <script>
    11.     /* 处理点击事件的回调函数 */
    12.     function handleClick(event) { // 处理事件的回调
    13.       console.log('处理点击事件', this, event)
    14.     }
    15.  
    16.     document.getElementById('handle').onclick = handleClick
    17.     /* 
    18.     _.throttle(handleFn, delay, options)返回一个新函数, 就是绑定事件监听的回调函数(它是高频调用)
    19.       handleFn: 真正处理事件的回调函数, 由throttle()返回的函数内部间隔指定的dalay时间后调用(少量调用)
    20.     _.debounce()语法一样
    21.     // */
    22.     document.getElementById('throttle').onclick = _.throttle(handleClick, 2000)
    23.     document.getElementById('debounce').onclick = _.debounce(handleClick, 2000)
    24.   script>
    25.  
    26. body>

    浏览器打开就有的东西：document--初始包含块--html--body
    初始包含块：给浏览器里的东西一个初始的高度
                         子绝父不相：相对于初始包含块

    js数据类型
    基本数据类型：ES5、ES6
    引用数据类型：数组、函数、对象
    内置对象：math，正则
    包装对象：数字，字符串，布尔
     

    响应拦截器按顺序执行
    请求拦截器先执行最后的那一个

    安装包引入文件css和js
    在package.json找main 的指定文件,如果时js文件，就可以直接引入
    找到css文件位置，在这个包下的文件引入对应的文件


    axios的内部是用.then串联起来
    请求拦截器里写失败的回调，return Promise.reject(error)
    如果不写return会返回undefined，下一个.then会进入成功的回调

    在vuex当中state初始化数据后，组件就会直接拿过来，不需要等待异步

    点击事件委派的优化

    点击某个类别（无论几级）跳转到搜索页面
        先用声明式导航替换原来的a
        需要把类别的id和类别的名字通过query参数传递


    使用编程式路由导航优化声明式导航组件对象过多造成的卡顿
        声明式导航本质上是组件对象，组件对象过多，会造成效率很慢  所以会很卡
      
    利用事件委派提高处理事件的效率
        每个分类项都添加事件，事件的回调函数很多，效率也不好
        在共同的祖先级元素添加事件监听
            

    利用自定义属性携带动态数据
        标签的data-开头的属性，叫做自定义属性
        通过我们的标签对象.dataset
          1:事件绑给谁 最近的公共的唯一一个祖先元素
          2:找到目标元素（点的是不是a）
          3:参数如何传递 
     

    1.     // 点击三级分类 事件委派处理跳转search界面
    2.     toSearch(event) {
    3.       let dataset = event.target.dataset
    4.       // 盲解 点的是什么元素 不关心，大不了我解构4个undefined
    5.       // 一旦有a标签categoryname一定存在，三个id也一定有一个
    6.       let { category1id, category2id, category3id, categoryname } = dataset
    7.       if (categoryname) {
    8.         // 点的一定是a标签
    9.         let location = {
    10.           name: 'search',
    11.         }
    12.  
    13.         let query = {
    14.           categoryName: categoryname
    15.         }
    16.  
    17.         if (category1id) {
    18.           query.category1Id = category1id
    19.         } else if (category2id) {
    20.           query.category2Id = category2id
    21.         } else {
    22.           query.category3Id = category3id
    23.         }
    24.  
    25.         location.query = query
    26.  
    27.         // 点击三级分类，跳转搜索页的时候，需要把之前带过来的params参数给合并上
    28.         location.params = this.$route.params
    29.  
    30.         this.$router.push(location)
    31.       }
    32.     },

    过渡动画

    显示和隐藏一级列表的过渡效果添加
        首先谁要加过渡就看谁在隐藏和显示
        需要放在transition标签内部，name需要起名字
        参考官方给的过渡图
        移入移出的时候是有过渡的
        注意：高度也是变化的 

    1、谁在显示和隐藏（条件渲染）就要加过度，加过度需要使用内置

            组件去包含这个元素

    2、给进入和离开的6个类名取前缀,在内置组件身上传递name属性      

    3、找到位置去书写6个类的样式，给谁加的内置组件样式就是作用给谁

     

  • 相关阅读:
    SQL 查询的执行顺序
    C++的类型转换
    HTML学习笔记 ｜ 青训营笔记
    操作系统文件管理-----索引分配
    python实战故障诊断之CWRU数据集（五）：线性判别模型及二次判别模型的应用
    c++ delete[]和delete的区别
    基于微信小程序的健身私教预约系统
    模糊神经网络算法matlab,模糊神经网络算法原理
    Chrome插件精选 — 暗色主题插件
    uniapp微信小程序开发基于ali-oss直传文件上传解决方案
  • 原文地址：https://blog.csdn.net/m0_60376759/article/details/126138722