分享我的前端学习之旅

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

我的 github：https://github.com/sunmengyuan

原文链接：https://sunmengyuan.github.io/garden/2017/06/08/share-frontend.html