1、你学会了什么 ？
-
开始部署项目的时候，先创建各个文件并对各个文件进行分类管理，让结构更加的清晰可观，例如:view文件夹中存放各个html文件。在给各个.html, .js, .class文件的起名上也更加的规范化。 -
利用封装的Ajax,对数据进行去请求，然后获取到相关的数据，根据数据的内容结构，对页面进行渲染，利用css样式对页面中的元素进行美化处理，最终根据js来处理一些动态的效果。 -
利用localStorage.setItem()方法，对页面中的一些值进行存储。然后在其他页面中利用localStorage.getItem()来获取在本地存储的值，根据获取的相关值来进行页面的渲染。例如：在验证用户是否为登录状态时，在登录页记录下用户登录成功后的token值，之后在其他页面中对token值进行判断，如果有token值，导航栏切换为首页购物车退出登录选项，如果没有还是原样。 -
对于同样的功能代码，可以放在同一个js文件中，然后在使用的页面中导入该js文件，调用需要的方法，以减少代码量。 -
在项目的登录，注册页面，使用正则表达式去验证用户输入的字符的正确合法性。
var userreg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}欧/g;
var pwdreg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/g;
-
使用闭包来处理变量污染的问题，用立即执行函数来处理闭包带来的内存泄漏问题 var item = document.querySelectorAll('.list');
for (var i = 0; i < item.length; i++) {
(function (i) {
item[i].onclick = function () {
var id = item[i].getAttribute('data-id')
location.href = `./view/detail.html?goodId=${id}`
}
})(i)
}
2、你的进步有哪些 ？
-
对于各个文件的命名，变得规范化。 -
对于业务的处理，有时会进入死角，在渲染二级菜单的时候，标题与下面商品总是连接不到一起，后来发现是渲染数据的时候结构编写有误，后来先编写一个h2标签然后在后面跟着一个div块标签用来包裹渲染的商品列表，重新编写一遍解决了这个小问题。
let h2 = document.createElement("h2");
h2.innerHTML = res[k];
products.appendChild(h2);
var div1 = document.createElement("div");
div1.className = "classificationBox";
var html = ''
for (let m = 0; m < data.length; m++) {
var productItem = data[m];
if (res[k] == data[m].type_two) {
html += `
<div class="list left" data-id="${productItem.Id}">
<img src="../images/loading.jpg" data-src="${productItem.img_list_url}" >
<h3>${productItem.title}</h3>
<div class="list-dw clearfix">
<span class="price left">${productItem.price}</span>
<div class="mack right">${productItem.mack}</div>
</div>
</div>
`
div1.innerHTML = html;
}
}
products.appendChild(div1);
-
与团队进行沟通交流，解决自己项目中存在的一些bug。 -
获取元素内容时，有时会获取不到，因为异步执行代码执行的快慢不同，导致获取不到，然后就在渲染数据紧接着获取数据然后再处理相关业务。 -
自己可以独立从部署到最后项目的完成，对着给的需求效果去处理这个业务，处理业务的时候知道如何去编写去实现这个功能，然后再慢慢的解决一些bug，达到最终的效果。 -
掌握了history.back()进行返回上一页面，以及本地存储localStorage属性。
3、你哪里不会 ？
4、总结项目中有那些业务，你是如何实现的？
-
首页中，滚动条触底时继续加载商品列表。在渲染数据的时候，先对页面进行一定的排版，让数据一页一页的加载，然后在滚动条触底时调用渲染数据的函数，来继续加载下一页商品。
window.addEventListener("scroll", function () {
var box = document.documentElement;
if (Math.ceil(box.clientHeight + box.scrollTop) == box.scrollHeight) {
getShopList();
}
})
-
动画返回顶部，获取滚动条距离顶部的高度，设置一个滚动条滚动的速度，放入一个定时器中，一直执行，然后判断是否到达顶部，到达顶部清除定时器。 returnTop.onclick = function () {
timer = setInterval(function () {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop / 7);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
if (osTop == 0) {
clearInterval(timer);
};
isTop = true;
}, 30);
}
-
Tab切换效果，头部的导航以及分类中的一级分类的切换，获取到元素并遍历他们，利用一个“排他思想，干掉所有人，留下我自己”的方法，进行切换的效果。 -
搜索功能，首页中用户在搜索框中输入关键词，点击搜索按钮，本地会存储这个值跳转到搜索页面并根据所存储的值来渲染商品。当然在搜索页面也可进行关键词搜索，系统根据/search接口和参数word获取数据进行渲染。
5、总结你写的项目中有那些技术亮点并详细说明
-
放大镜的编写，刚开始放大镜和大图是隐藏状态，当鼠标放入小图中时，放大镜和大图显示出来，限制放大镜在小图中的移动距离，不能使他超过，让大图根据遮罩的移动距离来进行相对应的移动（图片的移动距离 = mask的移动距离乘两者的比例），达到放大的效果。 var mask = document.querySelector(".mask");
var bigImg = document.querySelector(".big>img");
goodImg.onmouseenter = function (e) {
big.style.display = "block";
}
goodImg.onmouseleave = function (e) {
big.style.display = "none";
}
goodImg.onmousemove = function (e) {
var left = e.offsetX - mask.clientWidth / 2;
var top = e.offsetY - mask.clientHeight / 2;
left = left <= 0 ? 0 : left;
top = top <= 0 ? 0 : top;
var bigleftDis = goodImg.clientWidth - mask.clientWidth;
left = left >= bigleftDis ? bigleftDis : left;
var bigtopDis = goodImg.clientHeight - mask.clientHeight;
top = top > bigtopDis ? bigtopDis : top;
mask.style.left = left + "px";
mask.style.top = top + "px";
var imgleftDis = bigImg.clientWidth - big.clientWidth;
var imgtopDis = bigImg.clientHeight - big.clientHeight;
bigImg.style.left = -left * imgleftDis / bigleftDis + "px";
bigImg.style.top = -top * imgtopDis / bigtopDis + "px";
}
-
购物车中处理加减商品和删除商品时，渲染数据时需要设置自定义属性data-id，以此来对接口的数据进行处理，对照接口文档使用相应的接口以及参数来进行功能的实现。
function deleteData(){
var delebtn = document.querySelectorAll(".dele");
delebtn.forEach(function(item){
item.onclick = function(){
var id = item.getAttribute("data-id");
var flag = confirm("确定要删除吗？");
if(flag){
REQUEST.get("/del",{params:{token:token,goodId:id,}},function(data){
console.log(data);
if(data.code==1){
item.parentElement.style.display = "none";
}
})
}
}
})
}
|