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)