笔记 2021-07-14

总结

1 你学会了什么

1. 在登录和注册页面利用正则表达式，来判断用户的输入值是否符合设定的要求，
   如果符合，则调用注册登录接口 传入用户名和密码参数 如果判定注册成功则跳转到登录界面，在登录接口 要把登录成功的(token)值保存到本地存储上 用来后面的使用 然后跳转到首页。

2. 分页器的原理 即轮播图分页器

3. 用登录时保存在本地存储的上的值来判断 首页及其他页面的显示效果

4. 当另一个跳转页面需要当前页面的某些参数时 就需要利用页面跳转添加参数，

5. 学会了触底反弹的原理 即最后一张图片距离顶部的距离小于等于 window的默认可视化窗口的高度+滚动的偏移量的时候，调用接口 并且传入的参数，页面数+1

2 你的进步有哪些

1. 在首页轮播图方面上,巩固了无缝轮播的原理

2. 巩固还有数据渲染的问题 第一种是，字符串拼接的方式 ，第二种就是 dom循环方式。

3. 巩固了楼层滚动

4. 巩固了两张图片的懒加载

5. 巩固了返回顶部的原理

6. 巩固了放大镜的原理即 大图的移动方向 = - 小图移动的方向 * 移动比率(大图移动方向的最大距离/小图移动方向的最大移动距离) + ‘px’

7. 巩固了teb切换的知识点

8. 巩固了自定义属性的知识点

3你哪里不会

1. 组件的各种封装和接口的参数传值不太熟练

4 总结项目中有哪些业务 你是怎么实现的

1 首页的轮播图

1. 即右点击是 -先在图片最后面克隆一张第一张的图片,轮播到这张图片的时候，加个定时器 让这张图片停留的时间跟图片动画效果的时间一样，让后加个时间很短的定时器立即执行，消除动画效果，并且把图片跳到第一张，然后再定时器外面加动画效果

2. 左点击的原理是轮播到第一张图片的时候 左点击清除动画效果立即跳转到最后一张跟第一张的一样的图片上然后添加动画效果。

3. 巩固的知识还有自动轮播，即搞一个定时器一直调用函数，而函数体里有判断图片怎么走 走多少的代码，还有鼠标进入和离开 轮播图的效果，

2 放大镜

1. 弄两个盒子一大一小, 在小的盒子上放入的图片跟盒子一样大小，大的盒子里放入的图片比盒子大，然后溢出隐藏，和图片隐藏

2. 鼠标进入小盒子onmouseenter，图片显示，鼠标离开onmouseleave，图片隐藏

3. 鼠标进入，小盒子里的小框框 跟随鼠标移动onmousemove 要把鼠标的中心放在小框框的中心(var left = e.offsetX - box.clientWidth / 2),(var top = e.offsetY - box.clientHeight / 2)

4. 限制小框框的移动范围
     // 限制左边边框
     left = left < 0 ? 0 : left
    // 限制top边框
    top = top < 0 ? 0 : top
    // 小图box的最大移动距离
    var maxright = mainLeft.clientWidth - box.clientWidth; //右
    var maxtop = mainLeft.clientHeight - box.clientHeight; //顶
    // 限制移动的范围
    left = left >= maxright ? maxright : left
    top = top >= maxtop ? maxtop : top

5. 获取大盒子里的图片的最大移动距离

6. 获取大图和小图的移动比率(大图移动方向的最大距离/小图移动方向的最大移动距离)

7. 大图的移动距离 = -小图移动的距离 * 移动比率

5 总结你写的项目中有哪些技术的亮点并详细说明

一 首页的渲染效果
1. 判断登录是否成功的页面显示效果，点击登录，登录成功能获取到本地存储的token值，隐藏登录，注册，显示购物车，退出登录的渲染效果
2. 点击退出登录 清除本地存储的token 隐藏购物车，退出登录，显示登录，注册，并且跳转到登录界面

二 解决购物车商品加减，商品的数量污染问题
在购物车点击商品数量的加减 其他商品也会跟着加减，我是这样解决的:
当购物车渲染数据的时候 用setAttribute增加一个自定义属性index，属性值为0开始的要渲染的每个商品的长度减1
当点击加减事件的时候，用getAttribute获取点击事件对于的index属性值，然后获取index值对应的id值，然后进行这个商品的效果显示