KNOWLEDGE-SYSTEM.md

九部知识库 前端行业知识结构

九部知识库前端技术栈大图镇楼！

涵盖业务开发中常用的前端技术栈

当然前端开发工程师需要学习的技术栈远不止这些😂，这张图也会不定时更新，有什么纰漏也希望大家能积极指出。

图片链接：https://gw.alipayobjects.com/zos/rmsportal/syEbBdtAkhsxjkSGtCVK.png

第一部分：前端基础

《前端工程师手册》 https://leohxj.gitbooks.io/front-end-database/index.html 可作为参考，覆盖很全。

• HTML

  参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML

  • svg：https://developer.mozilla.org/zh-CN/docs/Web/SVG
  • canvas：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

• CSS

  • 选择器：https://lark.alipay.com/sjs.sjs/zsyd0o/ygziz
  • 布局：http://www.ruanyifeng.com/blog/ (阮一峰的博客上有很多)
  • less：http://www.bootcss.com/p/lesscss/
  • sass：https://sass-lang.com/guide

• JavaScript

  • ES5：祭出《JavaScript高级程序设计》
  • ES6：祭出《ES6标准入门》http://es6.ruanyifeng.com/
  • Babel：在使用ES6的时候可能需要一款JS编译器 https://www.babeljs.cn/learn-es2015/

• webpack

  • webpack：https://webpack.docschina.org/concepts/
  • gulp、grunt：个人感觉稍稍有点过时，可简单对比
  • rollup、parcel：突然间火了，可简单对比、了解

• 模板语法：nunjucks https://mozilla.github.io/nunjucks/

第二部分：react全家桶

• react
  • react官网：https://reactjs.org/
  • react入门教程：http://www.ruanyifeng.com/blog/2015/03/react.html
  • react小书：http://huziketang.mangojuice.top/books/react/
• react-router：https://github.com/ReactTraining/react-router
• react-redux：数据应用框架
  • redux官网：https://redux.js.org/
  • MobX：redux的竞品，可简单对比

第三部分：NodeJs

若学习时间不够充、建议结合《七天学会NodeJs》快速过一遍Node API；想要深入学习，推荐从《深入浅出NodeJs》开始

• NodeJs官网：https://nodejs.org/dist/latest-v10.x/docs/api/
• 七天学会NodeJs：http://nqdeng.github.io/7-days-nodejs/
• 深入浅出NodeJs：https://lark.alipay.com/alinode/dive-into-node-v1
• Egg：https://eggjs.org/
• node的衍生：npm、tnpm

第四部分：AntDesign体系

• Ant Design 官网：https://ant.design/docs/react/introduce-cn
• dva：基于React和Redux的轻量应用框架 https://github.com/dvajs/dva
• Ant Design Mobile官网：https://mobile.ant.design/
• Ant Design Pro官网：开箱即用的中台前端解决方案 https://pro.ant.design/index-cn
• umi：https://umijs.org/

其他基础

• 前端代码规约：eslint https://eslint.org/
• Chrome调试：https://blog.csdn.net/nanjingshida/article/details/72775687
• http协议：http://www.ruanyifeng.com/blog/2016/08/http.html
• 前端跨域：https://segmentfault.com/a/1190000007326671
• Git操作：http://www.ruanyifeng.com/blog/2014/06/git_remote.html
• 工程化
• 体验度量和优化
• 正则表达式
• 数据埋点
• ......

可视化方向

• AntV：数据可视化解决方案 https://antv.alipay.com/zh-cn/index.html
  • G2：可视化图形库
  • G6：富有交互的流程图和关系分析图标库
  • F2：移动端可视化解决方案

vue全家桶

• vue：https://cn.vuejs.org/index.html
• vuex：https://vuex.vuejs.org/zh/guide/

TypeScript

• typescript：https://www.typescriptlang.org/

RxJs

• rxjs：https://cn.rx.js.org/

......