Project summary

1. What did you learn

   • Jumping and passing values between pages
   • Floor rolling
   • A magnifying glass
   • Login registration permission verification
   • Verify that the login account is qualified
   • The idea of componentization
   • New IntersectionObserver() is used for lazy loading
   • Input fields should be triggered using the Enter key

2. What is your progress

   • A deeper understanding of the prototype
   • I learned that IntersectionObserver can be used to optimize browser performance
   • The knowledge of element offsets has been consolidated

3. Where do you not know

   • The generator function failed to be used. There was a bug

       function * a(){}Copy the code

4. What are the businesses in the summary project and how did you achieve them

   • Home page goods, using the AXIOS interface to get the data and render the page

       REQUEST.get('/goodlist', { params: { page: page } }, function (data) {
            addEle(data); // Render the page
            about();
        })
   Copy the code

   • Classification page rendering, using the switch method, jump to the relevant page

     
       // Jump to category page
       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; }})})}Copy the code

   • Search page rendering. Write a search.js file for each page

   const about = function () {
      let search = document.querySelector('#search')
      let search_btn = document.querySelector('#search-button')
      / / return
      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'; })}Copy the code

   • Product details page rendering,

     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()
      });
    }
   
   Copy the code

   • Floor rolling

   bix.addEventListener('mousemove'.function (e) {
        let x = e.pageX - this.offsetLeft; // The mouse pointer in the document is the x-coordinate of bix relative to the body
        let y = e.pageY - this.offsetTop;  // The mouse pointer in the document is the y-coordinate of bix relative to the body
        // 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';// Subtract half the height of the box from the coordinate and pass it to the left value of the box
        hidden.style.left = hiddenX + 'px';// Subtract half the width of the box from the coordinate and pass it to the top value of the box
   
        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';
      })
   Copy the code

   • Check login

     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();
      })
     Copy the code

   }

   Copy the code

5. Summarize the technical highlights of your project and elaborate

   • The IntersectionObserver function solves the problem of performance optimization for lazy-loading browsers
   • Click to the top and make use of the third parameter of the scrollTo API