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

60次阅读

共计 4225 个字符,预计需要花费 11 分钟才能阅读完成。

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

持续更新中……

项目地址

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 知识
  • 多站点单点登录实现方案
正文完
 0