8

从事前端开发近 2 年,积攒了一些学习资料与大家分享。在日常工作中极少应用到下述知识,示例代码完全因个人兴趣而生,不地道之处欢迎大家前来吐槽指导!

Node.js

参考资料
示例
  • 简易博客系统 code

这是一个简易的博客系统,用户在该站注册后即可发布个人日记,日记可以被登录用户点赞。功能较简易,外观未经雕琢,纯粹的练习项目。详情

相关知识:Express.jsFile SystemMongoDBMongoose

该项目使用 Express.js 框架搭建,使用 MongoDB 存储数据。图片上传涉及文件存储请查阅 Node.js 文件系统

  • 多人聊天室 code

Node.js 结合了 Websocket 的简易多人聊天室,感兴趣的同学可以自行高仿个 QQ 出来。详情

相关知识:Express.jsWebsocketMongoDBMongoose

该项目使用 Express.js 框架搭建,使用 MongoDB 存储数据。核心内容在于全双工通讯请查阅 Websocket

开启自恋模式 欢迎欣赏本人深度好文:


Vue.js

参考资料
示例
  • 简易个人空间 code

与上面提到的博客系统类似,教科书级别的增删改查功能。详情

相关知识:Node.jsExpress.jsFile SystemMongoDBMongooseWebpack

该项目客户端使用 Vue.js 搭建,服务端使用 Express.js 搭建,使用 MongoDB 存储数据。图片上传涉及文件存储请查阅 Node.js 文件系统。工程构建使用 Webpack 建议了解。背景设计使用 Trianglify 在此推荐。

基于 Vue.js 组件化的思想,将播放器控件封装。并尝试了 Vue.js 的打包上线流程,遇到了点小挫折,压缩后静态资源地址错误...详情

相关知识:HTML5 VideoWebpack

该项目不涉及服务端,完全使用 Vue.js 搭建。工程构建使用 Webpack 建议了解。


React

参考资料
示例

教科书级别的待办事项记事本,不多解释。详情

相关知识:Webpack

该项目不涉及服务端,完全使用 React 搭建。工程构建使用 Webpack 建议了解。


React Native

参考资料

React Native 环境搭建指南,正在撰写中,敬请期待。


Canvas

参考资料
示例

想起计算机图形学老师的一句话“咱们数字媒体技术专业知道而其他专业同学不知道的概念比如贝塞尔曲线”,现在想想老师也是蛮自恋的...

  • 使用 Canvas 实现元素拖拽 code demo

使用 Canvas 实现交互非常麻烦,因为无法直接获取触发事件的元素,需要通过 isPointInPath 方法得知。

本人学习 Canvas 最大的收获便是领悟到其实现交互的方式无非旋转画布啊,重绘啊,巴拉巴拉...


Svg

示例

使用 Svg 绘制的图标无限放大后不模糊这点很赞。但其更强大的功能在于动画,可惜我的示例比较简易无法体现这点...

开启自恋模式 欢迎欣赏本人深度好文:Svg 路径动画实现旋转进度条


Three.js

参考资料
示例

该示例为 Canvas 与 Three.js 结合而生。表盘由 Canvas 绘制,而建模使用 Three.js。其实 Three.js 基于 Canvas,上述不太准确,意会便好。


Matter.js

参考资料
示例

一个最基本的 Matter.js 示例,类似的甚至更炫丽的在官网上有很多很多...


Less

参考资料

Sass

参考资料

开启自恋模式 欢迎欣赏本人深度好文:Sass 学习笔记


Echarts

参考资料
示例

上面两个是基友的大作业啦,属于友情开发。

相关知识:Webpack


微信小程序

开启自恋模式 欢迎欣赏本人深度好文:


作者:呆恋小喵

我的后花园:https://sunmengyuan.github.io...

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

原文链接:https://sunmengyuan.github.io...


呆恋小喵
745 声望42 粉丝

本人女,前端打酱油一枚。2015 年毕业于中国传媒大学数字媒体技术专业。爱好:逛街、淘宝、学习;专长:数学、绘画、卖萌。