preface

As the old saying goes, a picture is worth a thousand words. This also applies to the learning front end. Sometimes, a demo is more useful than a bunch of text. Let me summarize a few for you. Due to the project which is quoted in the only support HTTP, if there is a blank in the iframe, please click the HTTP address check 👉 www.cnblogs.com/imgss/p/105… Or just click on the original link given.

Anti-shake/throttling

Hover the mouse over the gray square to see the difference between the images drawn with normal trigger, debounce and throttle. Original project Address

As can be seen from the figure, the function of anti-shake is to trigger the processing function if no event (such as scrolling, mousemove, etc.) occurs after several seconds. If a new event occurs during this period, the timer will be reset. Throttling is triggered every few seconds, but the original high frequency is reduced.

debounce

How does ‘==’ compute

The following demo shows how, when using ==, the js engine implicitly converts the values on both sides to a true or false link

Rule: Take x==y as an example

  1. If x and y are of the same type 1.a. Return x === y.
  2. Return true if x is null and y is undefined
  3. Return true if x is undefined and y is null
  4. If x is number and y is string, convert y to number and compare.
  5. If x is a string and y is a number, convert x to a number and compare.
  6. If x is a Boolean, convert x to number and compare.
  7. If y is a Boolean, convert y to number and compare.
  8. If x is number, string, or symbol, and typeof y is object, convert y to the original type and compare.
  9. If y is number, string, or symbol, and typeof x is object, convert x to the original type and compare.
  10. Returns false.

Thus, there is a “calculator” below, and you can see why [] ==! [] the

ease-in,ease-out,cubic-bezier

Whether it is CSS or JS animation library, the one concept that cannot be avoided is the easing function. What effect does linear,ease-in, and ease-out have on the animation? The following site visualizes the differences between easing functions.

GreenSock provides more complex slow function and visualization, address: https://greensock.com/ease-visualizer

The bezier curve

What’s the difference between a second order bezier curve and a third order Bezier curve? What’s the function of the control point? Play with the following demo and generate the curve you want, given 3 or more control points. The original link

Use method is also very simple, first click 3 or more points, and then click Draw to see the generation of bezier curve animation.

Advanced reading: A Primer on Bezier Curves

Path in SVG — m, H, V, L,z,q, T,c,s

Those one-letter commands in SVG look confusing? What is M? What is L? Here’s a project to save you. address

With Zhang Xinxu god this article edible better.

Yqnn.github. IO/svG-path-ed…

Function call stack

When the JS engine executes a function, what is the function call stack? Js starts with the main function, and if another function is called within the function, the function is pushed onto the stack, and when the call is complete, the stack is removed.

astExplorer

AST plays an important role in how Babel converts ES6 to ES5, and how Vue converts templates to render functions. astexplorer.net/

Algorithm visualization

If there are other algorithm-Visualizer.org/ websites you’ve seen that help you understand front-end concepts, please leave a comment in the comments section at 🦉