项目总结
1.你学会了什么？
? 学会了用正则表达式来验证登陆/注册输入的字符串是否符合规则，且运用函数封装回调函数的方式来编写代码，不是像以前写小项目单纯的就是写死，给定值。
比如，其中我感觉最重要的通过封装ajak封口接口api方法，虽然过程我感觉很麻烦，但用的时候爽的飞起，这次项目，像下拉触底，返回顶部还是选项卡切换等不算难，最主要的难的是解决同步异步的原因，大多次因为异步的原因而找不到元素，而操作不了相关操作。直接就是null 。
我感觉项目中有点难度的是分类页面中楼层滚动与点击某一小标题跳转到当前滚动条位置，这两个事件监听代码相冲突，虽然最后解决的两者相冲突的问题，但耗了不少时间。但收获是很大的 。相信以后在做几分钟就完成了。
2.你的进步有哪些？
? 相比较以前写差不多项目的时候，现阶段无论是编写的代码时间，还是处理问题的逻辑。更重要的是如何封装那些多次用到的代码，一边在编写其他页面中继续用到，只改变实参值即可。以前有些属性或是方法没怎么记牢，通过这次写项目，重新花了点时间加固记忆了下。最后又重新翻看以前老师教的js的上课课件，发现以前没怎么注意到的小知识点
3.你哪里不会？
? 轮播图封装组件太麻烦，看了老师写在原型对象上的方法，我是直接封装相关代码，虽然也实现的老师展示的效果，但无论是代码的整洁性还是可读性都不太好，自己命名变量名太随便直接就是lunbo等拼音，虽然说一看就了然，但给人感觉很low，这一方面我也逐渐改变，规范命名，该用小驼峰就用。还有选项卡切换也是直接封装，基本效果实现了，但可读性还是观赏性都跟老师写的完全天差地别
4总结项目中有那些业务，你是如何实现的?
? 轮播图我是最后多放一张第一张图，我在点击或者自动播放倒数第1张图取消过度动画，并转到第一张图 同时利用利用setTimeout 继续打印添加延迟动画，在加一个图片的宽度距离 左按钮图片向右走，反之亦然
//输入入图片的宽度 与数量
function lunborfz(width，amount) {
left += width;
diao1(0, amount-2)//6-2=4 5个小点从0开始
if (left > 0) {
left = -(amount-1)*width; //（6-1）*1000
ul.style.transition = "none"
var t = setTimeout(function () {
ul.style.transition = "all 1s"
left += width
ul.style.left = left + "px"
}, 20) //setTimeout是最后执行的
}
ul.style.left = left + "px";
}
//下方小点
function diao1(arg1, arg2) {
xIndex--;
xIndex = xIndex < `${arg1}` ? `${arg2}` : xIndex;
xdian[oldIndex].classList.remove("initial")
xdian[xIndex].classList.add("initial")
oldIndex = xIndex;
}
? 还有懒加载 利用imgs[index].offsetTop <=document.documentElement.scrollTop +window.innerHeight 这个判断条件 同时在字符串模板李添加一个自定义属性用于存放要放的目标图片 下面为懒加载和触底刷星相关代码
window.addEventListener("scroll", function () {
//当屏幕的可视高度加上滚动条高度>=滚动条内部的内容区高度是符合条件
if(window.innerHeight+document.documentElement.scrollTop>=document.documentElement.scrollHeight) {
console.log(21421);
page++;
REQUEST.get('/api/goodList',
{
params: {
page: page
}
},
function (data) {
console.log(data);
//html内容部分
})
}
? getAttribute用这个获取自定义属性值 符合判断条件则更换图片链接
? 最麻烦的分类页面 我是先把获取的数据处理好，我是新建立一个空数组存放2级标题的，然后字符串模板 for循环打印上去，首先设置 var html=‘ ’ 。然后获取元素 item.innerHTML=html 。每次点击另一个分类之前的innerHTML直接清空 ，在重新打印.
。然后是滚动联动这个简单还是用window.innerHeight 。document.documentElement.scrollTop item.offsetTop 这三个属性判断 那些2级标题打印的同时获得 item.offsetTop距离body的高是多少 ，然后点击document.documentElement.scrollTop就等于那个item.offsetTop的高
? 登陆注册我是把符合正则表达式的账号和密码储存在本地 localStorage.setItem() 登陆的同时在 localStorage.getItem() 后续的商品id 还是totack 都是同样的道理
if(data.code==1){
var token = data.token;
var isdenglu=1;
//以下在本地存储中存储数据键值对 方面后续登陆用 localStorage.getItem()获取值
localStorage.setItem('token',token)
localStorage.setItem('username',data.username)
localStorage.setItem("isdenglu",isdenglu)
location.href = './index.html'
}
还有其他小的效果如返回顶部下拉菜单等因为就几行代码就不叙述了 最后我感觉分类比较麻烦 还有在导航栏需要创建2个div 一个是登陆状态 另一个是未登录状态 根据服务器传过来的数据然后储存本地 if （data.code1还是0） 判断是登陆还是未登录
5：总结你写的项目中有那些技术亮点并详细说明
（1）利用了本地存储来存取服务器返回的code结果来显示登陆与本登录显示页面效果的不同，在导航栏里编写2个div其中一个是登陆状态下的，另一个是未登录下的根据code为1（登陆）还是0（未登录）判断显示
（2）放大镜是通过大小div之间的比值*最大最小的左移动与top移动距离 其中还要减去自身宽的一半
var left = e.offsetX - mask_.clientWidth / 2;
var top = e.offsetY - mask_.clientHeight / 2;
// console.log(e.offsetX);
left = left <= 0 ? 0 : left;
top = top <= 0 ? 0 : top;
// mask向右移动最大是 small的宽度 - mask的宽度
var bigleftDis = rigthBox.clientWidth - mask_.clientWidth;
left = left >= bigleftDis ? bigleftDis : left;
var bigtopDis = rigthBox.clientHeight - mask_.clientHeight;
top = top > bigtopDis ? bigtopDis : top;
（3）分类页面是通过新创建一个接受2级标题的newarr数组 然后就是数组去重
for (var k = 0; k < arr.length; k++) {
if (!quarr.includes(arr[k])) {
quarr.push(arr[k])
}
}
? 得到一个2级标题，然后就是字符串模板打印 需要套用两层for循环 第一层 2级标题 第二层for 就是item商品信息 根据data[j].type_two == quarr[i]来分类创建item
if (data[j].type_two == quarr[i]) {
html += `
<div class="box">
<img src=${data[j].img_url} alt="" class='item' data-id=${data[j].Id}>
<p class='p1'>${data[j].title}</p>
<div class="box1 clearfix">
<span class='left sp' >￥${data[j].price}</span>
<div class='right'>
${data[j].mack}
</div>
</div>
</div>
`
}
|