[JavaScript知识库]一个测试自学vue2项目的笔记《尚品汇》

这个是因为飞书文档无法满足笔记需求，想到写博客记录笔记，前面的笔记看情况决定是不是补上
部分内容参考博主毛毛虫呜呜的笔记

路由传参

路由跳转方式：
声明式导航：router-link，必须要加to：<router-link to="home">Home</router-link>
编程式导航：利用组件实例对象的$router.push/replace方法，跳转之前可以书写一下自己的 业务。

query、params两个属性可以传递参数：
query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: "/search"
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
params参数对应的路由信息要修改为path: "/search/:keyword"这里的/:keyword就是一个params参数的占位符

路由传参：
1、字符串形式

this.$router.push("/search/" + this.keyWord + "?k=" + this.keyWord.toUpperCase());

2、模板字符串

this.$router.push(`/search/${this.keyWord}?k=${this.keyWord.toUpperCase()}`)

3、对象写法

this.$router.push({name: "search", params: {keyWord: this.keyWord}, query: {k: this.keyWord.toUpperCase()}})

路由常问问题

Q：路由传递参数（对象写法）path是否可以结合params参数一起使用？
? ? A：不可以，路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用

Q：如何指定params可传可不传？
? ? A： 1. 在配置路由的时候，在配置后面加一个问号 path: "/search/:keyWord?"

Q：params参数可以传递也可不传递，但是如果传递空串，如何解决？
? ? A： 使用undefined解决

Q：路由组件能不能传递props数据？
? ? A： 可以，三种写法：
? ?? ? 1. 布尔值写法：props: true
? ?? ? 2. 对象写法：props: {a:1, b:1}
? ?? ? 3. 函数写法：props:($router)=>{ return {keyword:$router.params.keyword, k:$router.query.k} }

二次封装axios

axios中文文档地址
Axios 是一个基于 promise 的 HTTP 库，vue比较适合Axios。
请求拦截器：可以在发送请求之前处理一些业务。
响应拦截器：可以在数据返回后处理一些事情。

// 对axios进行二次封装
import axios from "axios";

import nprogress from "nprogress";
import "nprogress/nprogress.css"

//1、利用axios对象的方法create去创建一个axios实例
const requests = axios.create({
	//配置对象
	
	// 基础路径，发请求的时候，路径中会出现/api
	baseURL: "/api",
	// 设置超时
	timeout: 5000,
});

// 请求拦截器：在发送请求之前，请求拦截器可以检测到，可以在发出请求之前处理一些业务
requests.interceptors.request.use((config) => {
	//config：配置对象，主要是对请求头headers配置
    //比如添加token

	// 进度条开始
	nprogress.start();

	return config;
})

// 响应拦截器
requests.interceptors.response.use((res) => {

	// 进度条结束
	nprogress.done();
	// 成功回调函数
	return res.data;
}, (error) => {
	//响应失败的回调函数
	return Promise.reject(new Error(error));
})

export default requests;

loadsh插件防抖和节流

在快速划过三级导航或者搜索框输入搜索文字的时候，如果事件处理函数调用的频率无限制，会造成浏览器卡顿。因此会采用节流（throttle）和防抖（debounce）。

节流：在规定的时间间隔范围内不会重复触发函数的回调，只有大于这个时间间隔才会触发回调，把频繁变为少量触发
防抖：前面的所有触发都被取消，最后一次执行在规定时间之后才会触发，也就是说如果连续快速触发，只会执行一次
该项目采用第三方库实现节流：

// 按需引入throttle
import { throttle } from 'lodash/throttle.js'

 methods: {
    //采用键值对形式创建函数
    changeIndex: throttle(function (index){
      this.currentIndex = index
    },100),
  }

编程式导航

需要实现的部分的截图：（功能：点击菜单跳转链接，url带上参数）

实现路由跳转有两种方式：
声明式导航：router-link
编程式导航：push|replace

对于导航式路由，我们有多少个a标签就会循环出多少个router-link标签，这样当我们频繁操作时浏览器会出现卡顿现象。
对于编程式路由，我们是通过触发点击事件实现路由跳转。同理有多少个a标签就会有多少个触发函数。虽然不会出现卡顿，但是也会影响性能。
最好的解决方案就是：编程时导航+事件委派。事件委派就是把子节点的触发时间都委派给父节点，这样就可以只调用一次回调函数goSearch

利用事件委派也存在一些问题：
（1）把全部的子节点【h3、dt、dl、em】的事件都委派给了父亲节点，如何确定点击的一定是a标签？
（2）如何确定区分是一级还是二、三级的标签（一、二、三级分类产品的名字、id需要在url中传递）

解决方案：
（1）给三个a标签添加自定义属性:data-categoryName，只有这三个a标签拥有，其他子节点没有.
（2）添加自定义属性:data-category1Id、:data-category2Id、:data-category3Id来获取三个不同级别的a标签内的id来实现跳转。
（*）可以使用event来获取当前点击事件，通过event.target属性获取当前点击节点，再通过dataset属性获取节点的属性信息。

        <!--3级联动-->
        <div class="sort">
          <div class="all-sort-list2" @click="goSearch">
            <!--1级分类-->
            <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId" :class="{ cur: currentIndex == index }">
              <h3 @mouseenter="changeIndex(index)">
                <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
              </h3>
              <!--2、3级分类-->
              <div class="item-list clearfix" :style="{ display:currentIndex == index?'block':'none' }">
                <div class="subitem" v-for="c2 in c1.categoryChild" :key="c2.categoryId">
                  <dl class="fore">
                    <dt>
                      <a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId">{{ c2.categoryName }}</a>
                    </dt>
                    <dd>
                      <em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
                        <a :data-categoryName="c3.categoryName" :data-category3Id="c3.categoryId">{{ c3.categoryName }}</a>
                      </em>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

节点中有一个属性dataset属性可以获取当前节点的自定义属性与属性值

goSearch函数代码：

    goSearch(event) {
      let element = event.target;
      /**
       * html中会把大写转为小写
       * categoryname:a标签
       * category1id:一级类目id
       * category2id:二级类目id
       * category3id:三级类目id
       */
      //节点中有一个属性dataset（火狐、谷歌支持），可以获取节点的自定义属性与属性值
      let {categoryname,category1id,category2id,category3id} = element.dataset;
      if (categoryname) {
        // 整理路由跳转的参数
        let location = {name:'search'};
        let query = {categoryName:categoryname};
        // 一、二、三级
        if (category1id) {
          query.category1Id = category1id;
        } else if (category2id){
          query.category2Id = category2id;
        } else {
          query.category3Id = category3id;
        }
        // 完整参数
        location.query = query;
        // 路由跳转
        this.$router.push(location);
      }
    },
  },