平时积累的前端资源，持续更新中。。。

本文收集学习过程当中使用到的资源。

持续更新中……

项目地址

https://github.com/abc-club/f...

目录

• vue
• react
• react-native
• Weex
• typescript
• Taro
• nodejs
• 经常使用库
• css
• js
• es6
• 移动端
• 微信公众号
• 小程序
• webpack
• GraphQL
• 性能与监控
• 高质文章
• 趋势
• 动效
• 数据结构与算法
• js core
• 代码规范
• 工具
• 其余必备知识

vue

文章

• Vue3.0 前的 TypeScript 最佳入门实践
• 浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层
• VUE单页应用骨架屏方案
• 一个Vue引起的性能问题
• 【2019 前端进阶之路】Vue 组件间通讯方式完整版

react

官网

• React官网 https://reactjs.org/
• React中文网 https://react.docschina.org/
• React-router https://reacttraining.com/rea...
• redux http://cn.redux.js.org/
• umi https://umijs.org/
• dva https://dvajs.com

参考资料

• awesome https://github.com/enaqx/awes...
• react-hook https://github.com/streamich/...
• React.js 小书 https://juejin.im/post/58c7a1...
• React入门看这篇就够了 https://segmentfault.com/a/11...
• 掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入) https://juejin.im/post/5d085b...
• react demo https://gist.github.com/sAbak...
• 一文速览React全栈 https://juejin.im/post/5d0ee2...
• React同构与极致的性能优化 https://segmentfault.com/a/11...
• 阿里开源项目 https://segmentfault.com/a/11...
• 一文速览React全栈
• 掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入)

组件库

• ant-design https://ant.design/index-cn
• ant-design-mobile https://mobile.ant.design/ind...
• react-intl
• rc-form https://github.com/react-comp...

框架

• umi https://umijs.org/
• 飞冰 https://ice.work/
• next.js https://github.com/zeit/next.js
• beidou https://github.com/alibaba/be...
• egg-react-ssr https://github.com/ykfe/egg-r...
• react-server https://github.com/redfin/rea...

Demo

react-native

参考资料

• react-native-awesome https://github.com/crazycodeb...

Weex

typescript

官网

参考资料

• typescript中文 https://www.tslang.cn/
• typescript中文 https://ts.xcatliu.com/ https://zhongsp.gitbooks.io/t...
• typescript https://www.html.cn/doc/types...
• typescript进阶 https://www.jianshu.com/p/13a...
• awesome https://github.com/dzharii/aw...
• 深刻理解 TypeScript https://github.com/jkchao/typ... https://jkchao.github.io/type... https://github.com/basarat/ty...
• TypeScript入门指南（基础篇） https://juejin.im/post/5d3bb5...

react+typescript demo

• React+redux+typescript https://github.com/piotrwitek...
• https://github.com/fi3ework/b...
• typescript-tutorial https://github.com/xcatliu/ty...
• https://github.com/Lemoncode/...
• https://github.com/rokoroku/r...

Taro

参考资料

• taro https://taro.aotu.io/
• taro小册 https://juejin.im/book/5b73a1...
• awesome https://github.com/NervJS/awe...

组件库

• mounted https://github.com/fjc0k/mounted
• taro-ui https://taro-ui.jd.com

文章

• dva+ts+taro 小程序构建-资料总汇
• Taro撸一个简版的微信读书小程序
• Abraham - 用Taro写个垃圾分类微信小程序

demo

• https://github.com/huangzhuan...
• https://github.com/lsqy/taro-...
• https://github.com/Izayawww/m...
• https://github.com/Duanruilon...
• https://github.com/js-newbee/...
• https://github.com/EasyTuan/t...
• https://github.com/huangjiank...
• https://juejin.im/post/5d2a07...

nodejs

官网

• 英文官网 https://nodejs.org/en/
• 中文官网 http://nodejs.cn/

参考资料

• 七天学会NodeJS文档 http://nqdeng.github.io/7-day...
• node面试题 https://github.com/ElemeFE/no...
• Node应用内存泄漏分析方法论与实战 https://github.com/alibaba/be...

经常使用库

数据

• Immutablejs https://github.com/immutable-...

富文本编辑器

• simditor https://github.com/mycolorway...

时间

• moment

css

less

• less中文文档 https://less.bootcss.com/# http://lesscss.cn/
• less官网 http://lesscss.org/
• 教程 https://segmentfault.com/a/11...

文章

• 移动端1px解决方案 https://juejin.im/post/5d19b7...

nodejs

• nodejs最佳实践 https://github.com/i0natan/no...

物联网

• mosca https://github.com/mcollina/m...
• MQTT https://github.com/mqttjs/MQT...

demo

• javascript-mqtt-demo-wearingTip https://github.com/coolnameis...
• 面试官(7): 聊一聊 Babel? https://juejin.im/post/5c03b8...

js

正则表达式

• 正则表达式30分钟入门教程
• 2019 年经常使用 JavaScript 正则大全
• 正则表达式不要背
• 2019年JS正则大全(经常使用)

其余

• 【译】JavaScript的工做原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式
• 优秀 JavaScript 开发人员应掌握的 9 个技巧
• 浅拷贝与深拷贝
• JS中轻松遍历对象属性的几种方式

es6

• Promise源码详解

移动端

文章

• 移动端适配深度探究
• 第三代移动端布局方案
• 移动端1px解决方案

经常使用库

• lib-flexible https://github.com/amfe/lib-f...

微信公众号

实战项目

• wechaty https://github.com/Chatie/wec...
• wechatBot https://github.com/gengchen52...

小程序

webpack

文章

• 前端构建秘籍

GraphQL

文章

• 前端er了解GraphQL，看这篇就够了

性能与监控

文章

• GMTC 大前端时代前端监控的最佳实践

经常使用工具

• 阿里云监控 (网站性能、错误等监控)
• growingio (网站访问量监控)
• sentry (错误监控)
• fundebug (错误监控)
• gtmetrix (网站访问速度)
• zanePerfor (网站访问速度)
• pingdom (网站情况监控)

高质文章

• if 我是前端团队 Leader，怎么制定前端协做规范?
• 阿里大佬浅谈大型项目前端架构设计
• 年终回顾，为你汇总一份「前端技术清单」
• 8年前端开发的知识点沉淀(不知道会多少字，一直写下去吧...)
• fullstack tutorial
• 五星推荐的系列文章清单
• 端动态化方案详细设计
• 让虚拟DOM和DOM-diff再也不成为你的绊脚石

趋势

• 微前端 https://www.cnblogs.com/zhuan... https://github.com/neuland/mi...

  • 了解什么是微前端
  • 微前端实践
  • 无代码编程
  • 基于 React & TypeScript & Webpack 的微前端应用模板

动效

工具库

• 多是最全的前端动效库汇总

demo

• 2018 最佳前端动效集锦

数据结构与算法

• 数据结构与算法（三）—— 常见排序算法和swift实现
• 【从蛋壳到满天飞】JS 数据结构解析和算法实现-集合和映射

js-core

• JavaScriptCore全面解析
• 这一次，完全弄懂 JavaScript 执行机制
• 你不知道的浏览器页面渲染机制

代码规范

• 前端团队代码评审 CheckList 清单

工具

• VSCode折腾log插件
• 21 个VSCode 快捷键，让代码更快，更有趣

## 其余必备知识

• 前端开发者必备的Nginx知识
• 多站点单点登陆实现方案