分享个人前端学习之旅

从事前端开发近 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...