1 What have I learned

In this project, I have learned the following points (which I was not familiar with before)

  • Native DOM wheel cast diagram

  • Value transfer jumps between pages

  • A magnifying glass

  • Implementation of login and registration principle (through regular verification)

  • Render pages through Ajax

  • Page adaptation issues (by using plug-ins)

  • Process requested data (analyze interface return values and process data as required)

2. What is your progress

In this project, I still have a lot of progress in my sense of self. I failed to master the rotation chart before. There are some defects in the value transfer between pages, which is also where I am not skilled enough. I still need more training in this part in the future study. Small functions on the small demo magnifying glass consolidation, table switch, floor scrolling.

document.documentElement.scrollTop<=allLi[i].offsetTop+allUl[i].offsetHeight

About pulley roll value, element height, visual window height and so on to further enhance the impression

Speaking of progress, I feel that this project is my biggest progress. I didn’t know my business ability at all before. After a little test, my overall thinking has been improved by more than salary points. Instead, I have learned seven or eight tenths of things that I didn’t have any concept in my mind before. Round cast graph, feel become I can enter js door of a standard. Also in their own thinking to do out. Before the small demo part is really a lot of, a long time, how many or reflect their own shortcomings.

3 You don’t

This project has made me find out a lot of things I am not skilled in, and I have improved a lot of things I do not know through this project. Not part of the floor scroll, magnifying glass involved in the relationship between the values of the various parts of the problem to understand. The issue of page-to-page value transfer is still a bit unfamiliar.

The biggest problem in this project is the processing of value transfer between pages and related interface data.

4 summarize what businesses are involved in the project

  • Home page commodity rendering, using the interface to get data and then render

  • Classification page rendering, through the METHOD of URL value transfer to the classification page parameters, and then through the interface to obtain data for data processing

  • Search page rendering is also to transfer parameters to the search page through THE WAY of URL value, and then obtain data through the interface for data processing

  • Classification page floor scrolling, this is also learned before the small demo

    for (var i = 0; i < data.length; i++) { if (i == 0 || data[i].type_two != data[i – 1].type_two) { var h1 = document.createElement(‘h1’); h1.innerHTML = data[i].type_two; searchShop.appendChild(h1); var ul = document.createElement(‘ul’); searchShop.appendChild(ul); } }

  • Goods details page rendering, mainly is to write the basic style first, and then through the url by value to the id to the details page, through the interface for data processing data, details on page have a magnifying glass, switch the TAB and add to cart, a magnifying glass is studied the small demo, mainly is a question of proportion, the left box/suspension box = = right photo/box on the right, Click on the picture below and assign the value of this picture to the picture on the left and the picture on the right. Add the picture to the shopping cart and send a request to the server through the interface /add. Then the server will help you count. The following similar product recommendations get their Type_ONE from the item details, and then get the data from the categorized interface to render it

  • Shopping cart page is the token with local storage to the server sends the request data rendering, add and subtract in the interface, but will add and subtract in the server database there to add and subtract, but the page does not refresh, so to write their own add and subtract, remove it with interface to delete, tell this whole article in the operation of the page again goods

  • Permission verification is to check whether there is a local token when entering the page

Summarize the technical highlights of your project

The highlight of the project is also a relatively single reflection, every time the interface to obtain data processing. The more important part is analyzing each interface document.

Seamless round seeding implementation, part of the bug processing ideas.

function qj() { btnright.onclick = null; setTimeout(function () { btnright.onclick = function () { qj() } }, 1000) if (index <= 5) { carInside.classList.add('donghua'); index++; Carinside.style. left = '-${index * 8.571429}rem'; if (index == 5) { index = 0 // divs[index].setAttribute("id", "black"); setTimeout(function () { carInside.classList.remove('donghua'); Carinside.style. left = '-${index * 8.571429}rem'; }, 1000) } } run() }Copy the code

The above code involves relevant adaptation issues. Adaptation is also a part of improvement in this project, which has not been used before.

  • The px value in the code block is automatically converted to the corresponding REM value

    @media screen and (min-width:1400px) { html { font-size: 140px; }}Copy the code

Write the first and third values as CSS values

Import the JS adaptation file

(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px'  } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', Function (e) {if (e.persisted) {setRemUnit()}}) // detect 0.px supports if (DPR >= 2) {var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))Copy the code

You can make a simple page adaptation.

I don’t know a lot about page adaptation, which is what I need to know next. There are many methods and only this method is used to solve simple page adaptation problems.