1、你学会了什么 ？

  • 开始部署项目的时候，先创建各个文件并对各个文件进行分类管理，让结构更加的清晰可观，例如:view文件夹中存放各个html文件。在给各个.html, .js, .class文件的起名上也更加的规范化。
  • 利用封装的Ajax,对数据进行去请求，然后获取到相关的数据，根据数据的内容结构，对页面进行渲染，利用css样式对页面中的元素进行美化处理，最终根据js来处理一些动态的效果。
  • 利用localStorage.setItem()方法，对页面中的一些值进行存储。然后在其他页面中利用localStorage.getItem()来获取在本地存储的值，根据获取的相关值来进行页面的渲染。例如：在验证用户是否为登录状态时，在登录页记录下用户登录成功后的token值，之后在其他页面中对token值进行判断，如果有token值，导航栏切换为首页购物车退出登录选项，如果没有还是原样。
  • 对于同样的功能代码，可以放在同一个js文件中，然后在使用的页面中导入该js文件，调用需要的方法，以减少代码量。
  • 在项目的登录，注册页面，使用正则表达式去验证用户输入的字符的正确合法性。
//验证用户名的合法性:字母开头，允许5-16字节，允许字母数字下划线
var userreg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}欧/g;
//验证用户输入密码的合法性：必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6-15之间
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')
      // console.log('商品id', 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;
  // 当滚动到底后 让 返回顶部的div显示出来,可视高度+滚动上偏移量==滚动条高度         
  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;
    // mask向右移动最大是 small的宽度 - mask的宽度
    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;
    // 图片的移动距离 = mask的移动距离乘两者的比例
    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){
                    //使用/del接口，根据传入的参数来判断是否删除该数据
                    REQUEST.get("/del",{params:{token:token,goodId:id,}},function(data){ 
                        console.log(data);                       
                        if(data.code==1){                            
                            item.parentElement.style.display = "none"; 
                        }
                    }) 
                }                                      
            }
        })
    }