平時積累的前端資源，持續更新中。。。

本文收集學習過程當中使用到的資源。

持續更新中……

項目地址

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知識
• 多站點單點登陸實現方案