尚硅谷项目学习回顾|进度70%

1.节流和防抖的区别

节流（throttle）:频繁执行事件，减少执行的次数。固定间隔时间内只执行一次。

import _ from 'lodash'

_.throttle(回调函数，间隔时间）

防抖：多次执行，只执行最后一次。

2.全局事件总线

步骤
1）在main.js注册全局事件

beforeCreate(){
	Vue.prototype.$bus=this
}

发送监听事件组件

this.$bus.$emit('事件名'，参数)

接收数据组件

this.$bus.$on('事件名',回调函数)

3.放大镜的使用

页面结构存在幕布和遮罩两部分。
1）添加@mousemove=“hander”鼠标移动事件,大图片添加ref属性值为bigImg,给遮罩添加ref属性值为mask.

	<!-- 幕布 -->
    <div class="event" @mousemove="hander"></div>
    <div class="big" >
      <img :src="imgObj.imgUrl" ref="bigImg"/>
    </div>
    <!-- 遮罩层 -->
    <div class="mask" ref="mask"></div>`

2)编写hander函数

hander(event){
		let mask=this.$ref.mask;
		let big=this.$ref.bigImg;
		let left=event.offsetX-(mask.offsetWidth)/2
		let top=event.offsetY-(mask.offsetHeight)/2
 	 // 加约束
        if(left<0){
          left=0;
        }else if(left>=mask.offsetWidth){
          left=mask.offsetWidth;
        }
        if(top<0) {
          top=0;
        }else if(top>=mask.offsetHeight){
          top=mask.offsetHeight;
        }
		mask.style.left=left+'px';
		mask.style.top=top+'px';\
		big.style.left=-2*left+'px'
		big.style.top=-2*top+'px'
}

3.promise

1.非空字符串返回值表示promise成功,Promise.reject(new Error(‘faile’))表示promise失败；
2.async返回值是一个promise对象，所以用户在点击加入购物车按钮时，会将商品信息提交到数据库，仓库中的action会返回一个promise对象给加入购物车事件函数，将该事件函数写成async函数，使用try和catch方法来编写添加成功与失败的业务。

4.uuid

使用uuid获取游客身份标识，在仓库中添加uuid_token=‘’;属性，在项目中创建uuid_token.js编写一个对外暴露的函数，用于生成本地游客id,每次打开关闭浏览器id不会变。然后将仓库引入axios二次封装js文件中，在请求拦截器中编写代码实现请求头中添加游客id.

user_token.js

import { v4 as uuidv4 } from 'uuid';

// 对外暴露一个函数,用于生成游客身份标识uuid_token,用户每次登录生成的id都一样,不会发生变化
export const getUUID=()=>{
    //定义一个uuid,在本地仓库中查找
    let uuid_token=localStorage.getItem('UUIDTOKEN');
    //第一次登陆
    if(!uuid_token){
        uuid_token=uuidv4();
        localStorage.setItem('UUIDTOKEN',uuid_token);
    }
    return uuid_token;
}