前端概念可視化

前言

一句老話說的好：一圖勝千言。這句話對學前端也適用，有時候，一個demo被一大堆文字有用的多。下面我就給你們總結幾個。因爲文中引用的部分項目僅支持http，下面的iframe中若是出現空白，請移步本文的http地址查看👉http://www.cnblogs.com/imgss/p/10583107.html，或者直接點擊給出的原文連接。

防抖/節流

將鼠標在灰色方塊中移動，能夠觀察正常觸發，防抖（debounce）和節流（throttle）後繪製出的圖像的區別。原項目地址

從圖中能夠看出，防抖的做用是，在若干秒後若是再也不有事件（如滾動，mousemove等）發生，就觸發處理函數，若是在這期間又發生了新的事件，則從新計時；節流則是每隔若干秒就觸發一次，只是將原來的高頻率下降了。

'=='是怎麼計算的

下面的demo給出了當使用 ==時，js引擎是如何對兩邊的值進行隱式轉換，最終得出一個true或者false的,原文連接

規則：以 x==y 爲例子

1. 若是x和y的類型相同
   1.a. 返回 x === y的結果.
2. 若是x是 null 並且y 是 undefined, 返回 true
3. 若是 x 是 undefined 而 y 是 null, 返回 true
4. 若是 x 是 number 而 y 是 string, 將 y 轉換成 number 再比較.
5. 若是 x 是 string 而 y 是 number, 將 x 轉換成 number 再比較.
6. 若是 x 是 布爾值, 將 x 轉換成 number 再比較.
7. 若是 y 是 布爾值, 將 y 轉換成 number 再比較.
8. 若是 x 是 number，string，symbol三種類型之一， typeof y是 object, 將y轉換成原始類型再比較.
9. 若是 y 是 number，string，symbol三種類型之一， typeof x是 object, 將x轉換成原始類型再比較.
10. 返回 false.

ease-in,ease-out,cubic-bezier

不管是css仍是js動畫庫，繞不開的一個概念就是緩動函數。linear,ease-in,ease-out分別會對動畫產生什麼效果？下面這個網站將緩動函數之間的區別可視化。

GreenSock提供了更復雜的緩動函數及可視化，地址：https://greensock.com/ease-visualizer

bezier曲線

二階，三階貝塞爾曲線的區別是什麼，控制點的做用是什麼？能夠把玩一下下面這個demo，給定3個及以上控制點，生成你想要的曲線。原文連接

使用方法也很簡單，首先點擊3個及以上的點，而後點擊 繪製 便可看到生成bezier曲線的動畫。

進階閱讀：A Primer on Bézier Curves

svg中的path -- m,h,v,l,z,q,t,c,s

svg <path>裏的那些一個字母的命令看着頭昏腦漲？M是啥，L又是啥？下面這個項目來拯救你。地址

配合張鑫旭大神這篇文章食用更佳。

函數調用棧

當js引擎執行一個函數時，函數調用棧是什麼？js從主函數開始，若是函數中又有函數被調用，這個函數入棧，調用結束後出棧。

你們還見過哪些有助於理解前端概念的網站呢，歡迎在評論區留言哦🦉