嗖～時間過去很快，2018年（農曆）就要過去，這一年的時間裡面，自己結合業務寫了些demo，在總結也是在反思：
1.循環輪播圖
使用了jquery來寫，主要是用來查詢元素，用原生來寫同樣沒問題。市面上能夠用swiper來快速實作這個功能。
2.模态框彈出層
簡單模拟下彈出層的登陸，适用于開發元件化的登陸。
3.檢視圖檔
對圖檔進行縮放的檢視，适用于pc端，我這裡常用于背景頁面。
4.地區三級關聯
簡單用算法來模拟了下 省市縣
5.二級導航
滑鼠劃過現實二級菜單，可以擴充為三級，建議菜單不要超過三級。難度系數：容易。
6.倒計時
倒計時是對localstorage的使用，這種存儲資料的方式能夠在你移動端的活動頁面中發揮很大的作用。
7.簡單幀動畫
使用@keyframes來完成動畫，适用于移動端中不循環播放的圖檔效果，如果是循環的動畫，直接請求設計支援·gif圖最省事。
8.僞加載
簡單設定一個加載動畫來忽悠使用者而已，在對加載要求不高的時候使用。如果對要求高就要使用第10點介紹的了。
9.移動端截圖工具
使用html2canvas庫來實作前端的截圖，不過有些坑需要注意下，比如圖檔的跨域問題。
10.加載效果
可以看作是對上面第8點的改良版，使用移動端加載的圖檔作為目标，因為圖檔耗費的加載也是最多的。這樣實作的加載效果就很逼真了。
11.粗略手寫版
使用canvas來繪圖，監聽坐标點，實作的很粗糙，但是不影響整個學習過程。
12.休閑遊戲-五子棋
使用es6搞事情，模拟傳統的五子棋下棋。還專門在掘金上發表了一篇關于它的文章——前端談談實作五子棋并很開心能獲百贊。
13.展開和折疊功能
展開和折疊功能是我們在移動端上面使用的最多的場景之一，因為“寸土寸金”啊，有必要劉一個demo給它。
14.可伸縮導航欄
這種寫法是參考bootstrap的響應式布局。比較适合要求不高的pc和mobile結合的場景。比如自己大半年前就是使用這個思想實作了前端團隊的對外展示的站點。
後話
上面的demos是自己18年在業務中記錄下來的簡單案例。嗯～14個是有些少了，因為自己轉中台已經半年之久了，主要是參與背景的開發，前台的業務接觸不是很頻繁了。不過後期發現實用的前端案例，還是會花時間整理出來的。
備注
上面的demos都有連結可以檢視的，請戳線上連結14個demos的線上連結
在github上自己也開了一個倉庫專門存放這些demos的代碼，剛興趣可以前往檢視——github-demos,歡迎添加新的實用demo進入。
更多關于我的内容，請戳我的github-blogs