阅读 54

2021-7-12 项目总结

项目总结

  1. 你学会了什么

    • 页面之间的跳转和传值
    • 楼层滚动
    • 放大镜
    • 登陆注册的权限验证
    • 验证登陆注册的账号是否合格
    • 组件化思想
    • 利用new IntersectionObserver()实现懒加载
    • 输入框应该能使用enter键触发
  2. 你的进步有哪些

    • 对原型有了更深一步的了解
    • 学会了 IntersectionObserver 可以用来优化浏览器的性能
    • 对元素的偏移量相关的知识进行了巩固
  3. 你哪里不会

    • 生成器函数使用失败,出现了bug
        function * a(){
    
         }
    复制代码
  4. 总结项目中有哪些业务,你是如何实现的

    • 首页商品,利用axios接口获取数据然后渲染页面
        REQUEST.get('/goodlist', { params: { page: page } }, function (data) {
             addEle(data); // 渲染页面
             about();
         })
    复制代码
    • 分类页渲染,利用switch方法,跳转到相关页面

      
        //  一级标题跳转分类页面
        const navv = function () {
            let navs = [...document.querySelectorAll('.transverse li')];
            console.log(navs);
            navs.forEach((item, index) => {
                item.addEventListener('click', function () {
                    switch (index) {
                        case 0:
                            location.href = './index.html';
                            break;
      
                        case 1:
                            location.href = './login.html';
                            break;
      
                        case 2:
                            location.href = './register.html';
                            break;
      
                        case 3:
                            location.href = './shopCart.html';
                            break;
      
                        case 4:
                            location.href = './login.html';
                            break;
      
                        default:
                            break;
                    }
                })
            })
        }
      复制代码
    • 搜索页渲染,写一个search.js 让每一页面都进入这个js文件

    const about = function () {
       let search = document.querySelector('#search')
       let search_btn = document.querySelector('#search-button')
       // 回车
       search.addEventListener('keyup', function (e) {
          if (e.keyCode == 13) {
             sessionStorage.setItem('search', search.value)
             location.href = 'search.html';
          };
       })
    
       search_btn.addEventListener('click', function () {
          sessionStorage.setItem('search', search.value)
          location.href = 'search.html';
       })
    }
    复制代码
    • 商品详情页渲染,
      var type_two;
     REQUEST.get('/detail', { params: getUrlParams(url) }, function (data) {
       big.src = data[0].img_url;
       h3.innerHTML = data[0].title;
       little.innerHTML = data[0].supplier;
       price.innerHTML = data[0].price;
       for (let i = 0; i < JSON.parse(data[0].imgs).length; i++) {
         img_list[i].src = JSON.parse(data[0].imgs)[i];
       };
       type_two = data[0].type_two;
       render(type_two)
     });
    
    
     const render = function (type_two) {
       REQUEST.get('/search', { params: { word: type_two, page: 1 } }, function (data) {
         addEle(data);
         observe();
         detail()
       });
     }
    
    复制代码
    • 楼层滚动
    bix.addEventListener('mousemove', function (e) {
         let x = e.pageX - this.offsetLeft; //鼠标在文档中的X坐标 - bix相对body的X坐标
         let y = e.pageY - this.offsetTop;  //鼠标在文档中的Y坐标 - bix相对body的Y坐标
         // console.log(x, y);
         let hiddenY = y - hidden.offsetHeight / 2;
         let hiddenX = x - hidden.offsetWidth / 2;
         // console.log(hiddenX, hiddenY);
         // console.log(hidden.offsetHeight / 2, hidden.offsetWidth / 2);
         let hiddenMaxX = bix.offsetWidth - hidden.offsetWidth;
         let hiddenMaxY = bix.offsetHeight - hidden.offsetHeight;
    
         if (hiddenX <= 0) {
           hiddenX = 0;
         } else if (hiddenX >= hiddenMaxX) {
           hiddenX = hiddenMaxX;
         }
    
         if (hiddenY <= 0) {
           hiddenY = 0;
         } else if (hiddenY >= hiddenMaxY) {
           hiddenY = hiddenMaxY;
         }
    
         hidden.style.top = hiddenY + 'px';//让坐标减去小框高度的一半,把它传给小盒子的left值
         hidden.style.left = hiddenX + 'px';//让坐标减去小框宽度的一半,把它传给小盒子的top值
    
         let bixMaxX = bix.offsetWidth - dox.offsetWidth;
         let bixMaxY = bix.offsetHeight - dox.offsetHeight;
         let bixX = hiddenX * bixMaxX / hiddenMaxX;
         let bixY = hiddenY * bixMaxY / hiddenMaxY;
         bix.style.top = -bixY + 'px';
         bix.style.left = -bixX + 'px';
       })
    复制代码
    • 检测是否登录
      const isToken = () => {
       let before = document.querySelector('.nav-sub.before')
       let after = document.querySelector('.nav-sub.after')
       if (sessionStorage.getItem('bingle') == 'yes') {
          before.style.display = 'none';
          after.style.display = 'block';
       } else {
          before.style.display = 'block';
          after.style.display = 'none';
      
       }
      
       let exit = after.querySelectorAll('a')[2];
      
       exit.addEventListener('click', function () {
          sessionStorage.clear();
          location.reload();
       })
      复制代码

    }

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

    • IntersectionObserver 观察器函数解决了懒加载浏览器的性能优化
    • 点击会到顶部利用了 scrollTo这个api的第三个参数
文章分类
前端
文章标签