分享個人前端學習之旅

從事前端開發近 2 年，積攢了一些學習資料與你們分享。在平常工做中極少應用到下述知識，示例代碼徹底因我的興趣而生，不地道之處歡迎你們前來吐槽指導！

Node.js

參考資料

• Node.js 開發指南
• 深刻淺出 Node.js
• Node.js 中文網

示例

• 簡易博客系統 code

這是一個簡易的博客系統，用戶在該站註冊後便可發佈我的日記，日記能夠被登陸用戶點贊。功能較簡易，外觀未經雕琢，純粹的練習項目。詳情

相關知識：Express.js、File System、MongoDB、Mongoose

該項目使用 Express.js 框架搭建，使用 MongoDB 存儲數據。圖片上傳涉及文件存儲請查閱 Node.js 文件系統。

• 多人聊天室 code

Node.js 結合了 Websocket 的簡易多人聊天室，感興趣的同窗能夠自行高仿個 QQ 出來。詳情

相關知識：Express.js、Websocket、MongoDB、Mongoose

該項目使用 Express.js 框架搭建，使用 MongoDB 存儲數據。核心內容在於全雙工通信請查閱 Websocket。

開啓自戀模式 歡迎欣賞本人深度好文：

• NodeJS 小工具推薦
• 個人 Mock Server - Meow Mock

---

Vue.js

參考資料

• Vue.js

示例

• 簡易我的空間 code

與上面提到的博客系統相似，教科書級別的增刪改查功能。詳情

相關知識：Node.js、Express.js、File System、MongoDB、Mongoose、Webpack

該項目客戶端使用 Vue.js 搭建，服務端使用 Express.js 搭建，使用 MongoDB 存儲數據。圖片上傳涉及文件存儲請查閱 Node.js 文件系統。工程構建使用 Webpack 建議瞭解。背景設計使用 Trianglify 在此推薦。

• 簡易視頻播放器 code demo

基於 Vue.js 組件化的思想，將播放器控件封裝。並嘗試了 Vue.js 的打包上線流程，遇到了點小挫折，壓縮後靜態資源地址錯誤...詳情

相關知識：HTML5 Video、Webpack

該項目不涉及服務端，徹底使用 Vue.js 搭建。工程構建使用 Webpack 建議瞭解。

---

React

參考資料

• A JavaScript library for building user interfaces | React

示例

• 待辦事項 code demo

教科書級別的待辦事項記事本，很少解釋。詳情

相關知識：Webpack

該項目不涉及服務端，徹底使用 React 搭建。工程構建使用 Webpack 建議瞭解。

---

React Native

參考資料

• React Native 中文網

React Native 環境搭建指南，正在撰寫中，敬請期待。

---

Canvas

參考資料

• HTML5 Canvas 核心技術

示例

• 畫板 code demo

• 貝塞爾曲線 code demo

想起計算機圖形學老師的一句話「我們數字媒體技術專業知道而其餘專業同窗不知道的概念好比貝塞爾曲線」，如今想一想老師也是蠻自戀的...

• 使用 Canvas 實現元素拖拽 code demo

使用 Canvas 實現交互很是麻煩，由於沒法直接獲取觸發事件的元素，須要經過 isPointInPath 方法得知。

本人學習 Canvas 最大的收穫即是領悟到其實現交互的方式無非旋轉畫布啊，重繪啊，巴拉巴拉...

---

Svg

示例

• 線描動畫 code demo
• 路徑動畫加蒙板實現橡皮擦特效 code demo
• Loading 動畫 code demo

使用 Svg 繪製的圖標無限放大後不模糊這點很贊。但其更強大的功能在於動畫，惋惜個人示例比較簡易沒法體現這點...

開啓自戀模式 歡迎欣賞本人深度好文：Svg 路徑動畫實現旋轉進度條

---

Three.js

參考資料

• Three.js 入門指南

示例

• 三維旋轉鍾 code demo

該示例爲 Canvas 與 Three.js 結合而生。錶盤由 Canvas 繪製，而建模使用 Three.js。其實 Three.js 基於 Canvas，上述不太準確，意會便好。

---

Matter.js

參考資料

• Matter.js - a 2D rigid body JavaScript physics engine

示例

• 蹺蹺板 code demo

一個最基本的 Matter.js 示例，相似的甚至更炫麗的在官網上有不少不少...

---

Less

參考資料

• Less 中文網

---

Sass

參考資料

• Sass 入門 - Sass 教程

開啓自戀模式 歡迎欣賞本人深度好文：Sass 學習筆記

---

Echarts

參考資料

• Echarts

示例

• 中國高校學科排名統計 code demo
• 全國空氣質量調查 code demo

上面兩個是基友的大做業啦，屬於友情開發。

相關知識：Webpack

---

微信小程序

開啓自戀模式 歡迎欣賞本人深度好文：

• 入坑微信小程序（項目搭建）
• 初嘗微信小程序（浪漫調酒師）

---

做者：呆戀小喵

個人後花園：https://sunmengyuan.github.io...

個人 github：https://github.com/sunmengyuan

原文連接：https://sunmengyuan.github.io...