conclusion

Source code: github.com/moonlightop…

Easy wrong points

• Try not to set the width and height of the parent box, but spread the child box, and use the padding to display the image (small ICONS, etc.).

• It is often necessary to toggle sprites with pseudo-classes (:hover or: Active) to achieve a highlight effect

  • From the Sprite chart => HTTP/1 generally, using the Sprite chart or inline resources can reduce the number of requests, but increase the size of request packets, and is not conducive to performance optimization in HTTP/2 caching

• Drag the Login box in the Login component => drag the box implementation

• The Login function of the Login component => Token Session authenticates users by carrying cookies => stores cache proxies

• Loading components are implemented by means of => three quarters of a circle going round and round

• This section describes how to select multi-level routes

  WithRouter wrap => Route component => Determine whether the Path of the URL contains the Path of the route, and exclude special cases separately (skip to/route, / Discover should also be selected for recommendation)

The difficulties in

• Seamless rotation chart

  • Add the last image to be displayed at the front, and jump to the penultimate image immediately with no transition effect when rotating to the first image (transitionEnd listening); Add the first image to be displayed at the end, and jump to the second image immediately with no transition effect when the last image is rotated (transitionEnd listening); In other cases there is a transitional effect

    Automatic rotation timer set transition effect, animation time should be shorter than the timer interval

• Fade-in and fade-out rotation chart

  • Open timer every once in a while to modify its transition style = > component to render = > transitionend listening to, and through the e. arget. Style. The value of the transition to a different action

    • Opacity 1s ease-in 0s

      • Switch to the next slide and change its transition style to opacity 1s ease-out 0s

        How the component is updated after two setStates (rerender twice)

    • Opacity 1s ease-out 0s (next image fades complete)

      • Transition to normal (None 0s Ease 0s)

    Transition value from initial None 0s ease 0s => opacity 1s ease-in 0s

  • Clicking on the circle toggles the index attribute on the tag to tell which image it is (starting from 0)

    • e.target.getAttribute(‘index’)

  • The left and right arrows directly modify the index to display the corresponding image

    • CurrentIndex represents the index of the currently displayed image (starting from 0)

  • Mouse move out and move the scroll bar so that the wheel broadcast map is not displayed in the area, clear the timer of automatic wheel broadcast; Move in and re-open

    • How is timer id saved by useRef

• Seamless wheel casting for the new disc

  Arrays are used to store the Left of the current image, and the adjacent elements are ideal adjacent images

  • Right arrow: the current picture and the next picture to the left haveTransition effectsGo one to the right
  • After two transitions, set their transition effect to None. In order to maintain the same effect for the next rotation, maintain 1 0-1 (the index of the image next to the current image is set to -1).

  

Native JS implementation of the wheel: github.com/moonlightop…

• The music bar

  • Get a song as the default for currentSong
    • Change the length of the gray progress bar (song download progress) through the onProcess of video
    • OnTimeUpdate to change the playback progress (milliseconds) and detect the current playing time to switch lyrics
      • The onTimeUpdate callback is mutually exclusive with changing the current playback time (setCurrentTime) between dragging the progress bar or clicking the position to change the progress of the song
    • Click Play or pause to change isPlay and decide whether to play or pause the song based on the value
    • Play by the way to determine the way the song switch
      • The order
      • random
      • Single cycle
    • Loading icon to load audio
      • onWaiting => onCanPlay & onCanPlayThrough
    • Lock and play bar show and hide
      • OnMouseEnter, onMouseLeave (bubble phase of event flow model not supported)
      • OnMouseover and onMouseOut
  • Parsing lyrics
    • Match the timestamp with regexp.exec (), converting all subexpression to milliseconds
    • Replace (lyricReg, “) replaces the timestamp with a space
  • The playlist
    • Blurred Background (z-Index effect)
    • The lyrics scroll
      • The percentage of clicks that reach a position, converted to a lyric index based on the length of the lyrics.
    • Song list scrolling
      • The percentage of locations reached by clicks, converted to the song index based on the length of the song list
  • Volume control bar
    • Play the same progress bar

• Tool function

  • Date formatting (so that the time can be displayed in the format we specify)

    • If it is originally 26 and you specify 1 bit format, then it should be displayed as it is
    • If it was 6 and I specified 2 bits, then I would use ’00’ and substring to ensure the same format
    • Similarly, if the year is 2021 and I specify a 2-bit format, I should use substring(4-reg. $1.length).

    new RegExp(‘ (${i}) ‘).test(fmt)

  • Drag a square

• Performance optimization

  • RemoveEventListener (removes listening events in time to prevent memory leaks)
  • Anti-shake throttling (search box anti-shake or drop-down refresh throttling)
  • Reduce the first screen loading time with lazy loading (on-demand request)