{"id":13533675,"url":"https://github.com/alcat2008/front-end-study-guide","last_synced_at":"2025-09-06T22:39:37.217Z","repository":{"id":69192221,"uuid":"62850594","full_name":"alcat2008/front-end-study-guide","owner":"alcat2008","description":"前端学习指南","archived":false,"fork":false,"pushed_at":"2018-08-16T03:57:38.000Z","size":213,"stargazers_count":184,"open_issues_count":0,"forks_count":41,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-06T22:51:12.487Z","etag":null,"topics":["javascript","react","web"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alcat2008.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-07-08T01:52:41.000Z","updated_at":"2025-03-06T02:26:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"ee1c03e8-c970-4fe8-a361-85879ed3b6ea","html_url":"https://github.com/alcat2008/front-end-study-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alcat2008/front-end-study-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcat2008%2Ffront-end-study-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcat2008%2Ffront-end-study-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcat2008%2Ffront-end-study-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcat2008%2Ffront-end-study-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alcat2008","download_url":"https://codeload.github.com/alcat2008/front-end-study-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alcat2008%2Ffront-end-study-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273973979,"owners_count":25200579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","web"],"created_at":"2024-08-01T07:01:22.048Z","updated_at":"2025-09-06T22:39:37.196Z","avatar_url":"https://github.com/alcat2008.png","language":null,"readme":"# 前端学习指南\n\n技术是一种载体，在它之上是对整个体系的认知，如何精进呢，Winter 的文章 [一个前端的自我修养\n](http://taobaofed.org/blog/2016/03/23/the-growth-of-front-end/)，不容错过！\n\n学习曲线遵循\n\n```javascript\n\n`JavaScript (ES5/6)` ===\u003e `React` =\u003e `React Native` =\u003e ------|\n         |            |       |                     |        |\n        `FP`          |       ==\u003e `Flux/Redux`  ==\u003e |        |\n                      |                                      |\n                     ===\u003e `Vue` =\u003e `Vuex` =\u003e ----------------|\n                                                             |\n                                                             |\n`HTML` =\u003e `HTML5`   ===\u003e     `Mental Model`  \u003c===  ----------|\n                     |           |\n                     |           |\n                     |        `Design` ===\u003e `Art` ===\u003e ...\n                     |\n`CSS` =\u003e `CSS3` =\u003e `LESS`\n```\n\n本文重在 “术”，追求的是广度，要想继续学习，在前端领域深入耕耘、探索，请参见以下内容：\n\n- [“道”](./Advanced.md) —— 有一些技术背后的原理阐述、架构思考、编程方法论等。\n- [“法”](./Implemention.md) —— 对前端细分领域的思考，注重深度，比如动画等。\n\n另外，微信作为一个独立的开发体系，参见 [Wechat](./Wechat.md)\n\n--------------------------------------------------------------------------------\n\n## 概览\n\n[How it feels to learn JavaScript in 2016](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.ifom7kt4c)\n\n中文版 =\u003e [在 2016 年学 JavaScript 是一种什么样的体验？](https://zhuanlan.zhihu.com/p/22782487)\n\n[Front-End Developer Handbook 2017](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/)\n\n--------------------------------------------------------------------------------\n\n## 开发工具\n\n- `WebStorm` / `VSCode` / `Sublime Text` / `Atom`\n- `Chrome`\n\n一些常用工具的使用方法可参考 [toolkit](https://github.com/alcat2008/toolkit)\n\n## 版本控制 Git\n\n- [git - 简明指南](http://www.runoob.com/manual/git-guide/)\n- [常用 Git 命令清单](https://github.com/alcat2008/toolkit/blob/master/Git.md)\n- [Git Community Book 中文版](http://gitbook.liuhui998.com/index.html)\n\n## 编码规范 JavaScript\n\n- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)\n- [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)\n- [Front-End Coding Guidelines](https://guide.aotu.io/index.html) 京东凹凸实验室的前端代码规范\n\n## 调试工具\n\n- [在 Chrome DevTools 中调试 JavaScript 入门](https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=zh-cn)\n- [Chrome 开发者工具](https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn)\n\n--------------------------------------------------------------------------------\n\n## JavaScript\n\n- [JavaScript 教程](http://www.w3school.com.cn/js/index.asp)\n- [JavaScript 秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/)\n- [跟着9张思维导图学习Javascript](http://www.jianshu.com/p/a4171444e512)\n- [ECMAScript 6入门](http://es6.ruanyifeng.com/)\n\n--------------------------------------------------------------------------------\n\n## React - [官网](https://facebook.github.io/react/)\n\n- [React 中文网](https://doc.react-china.org/)\n- [React 入门实例教程](http://www.ruanyifeng.com/blog/2015/03/react.html)\n- [React Transaction 机制](https://front-ender.cn/react/react-transaction.html)\n- [React 16 Fiber 源码速览](http://zxc0328.github.io/2017/09/28/react-16-source/)\n- [ReactJS News](https://reactjsnews.com/)\n\n### React Native - [官网](https://facebook.github.io/react-native/)\n\n- [React Native 中文网](http://reactnative.cn/)\n- [React Native Express](http://www.reactnativeexpress.com/)\n\n### Application Architecture\n\n- **[Flux](https://facebook.github.io/flux/)**\n- [Flux 架构入门教程](http://www.ruanyifeng.com/blog/2016/01/flux.html)\n- **[Redux](http://redux.js.org/)**\n- [Redux 中文文档](http://cn.redux.js.org/index.html)\n- [理解 Redux](https://front-ender.cn/architecture/redux.html)\n- [Redux 源码分析](https://front-ender.cn/architecture/redux-source-code.html)\n- [react-redux 源码分析](https://front-ender.cn/architecture/react-redux-source-code.html)\n- **[dva](https://github.com/dvajs/dva)** 基于 redux、redux-saga 和 react-router 的轻量级前端框架\n\n### Components 组件化开发思想\n\n- [基于Decorator的组件扩展实践](https://zhuanlan.zhihu.com/p/22054582)\n- [Higher-Order Components](https://reactjs.org/docs/higher-order-components.html)\n- [Render Props](https://reactjs.org/docs/render-props.html)\n\n### 其他\n\n- [pure render](https://zhuanlan.zhihu.com/purerender) 阿里数据中台前端团队分享前端相关经验，高质量的知乎专栏\n- [React 技术栈系列教程](http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html)\n\n--------------------------------------------------------------------------------\n\n## Vue - [官网](https://cn.vuejs.org/)\n\n- [新手向：Vue 2.0 的建议学习顺序](https://zhuanlan.zhihu.com/p/23134551)\n- [Vue 2.0——渐进式前端解决方案](http://www.infoq.com/cn/articles/vue-2-progressive-front-end-solution)\n- [Vue 技术内幕](http://hcysun.me/vue-design/)\n- [Vue.js 技术揭秘](https://ustbhuangyi.github.io/vue-analysis/)\n\n--------------------------------------------------------------------------------\n\n## Test 测试\n\n- [前端测试框架概览](https://front-ender.cn/test/front-end-test.html)\n- [React 测试入门教程](http://www.ruanyifeng.com/blog/2016/02/react-testing-tutorial.html)\n- [基于 React + Redux 的组件测试](https://front-ender.cn/react/react-test-component.html)\n\n--------------------------------------------------------------------------------\n\n\n# Web\n\n### HTML\n\n- [HTML 教程](http://www.w3school.com.cn/html/index.asp)\n- [HTML5 教程](http://www.w3school.com.cn/html5/index.asp)\n\n### CSS\n\n- [CSS 教程](http://www.w3school.com.cn/css/index.asp)\n- [CSS3 教程](http://www.w3school.com.cn/css3/index.asp)\n- [学习CSS布局](http://zh.learnlayout.com/)\n- [Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)\n- [CSS 编码规范](http://codeguide.bootcss.com/)\n- [BEM 命名规范](http://getbem.com/naming/)\n\n### LESS\n\n- [LESS 一种动态样式语言](http://www.bootcss.com/p/lesscss/)\n- [LESS 官网](http://lesscss.org/)\n- [LESS 中文网](http://www.lesscss.net/)\n\n### Color\n\n- [WEB安全色](http://www.bootcss.com/p/websafecolors/)\n- [Colors色彩](http://ant.design/docs/spec/colors)\n\n--------------------------------------------------------------------------------\n\n\n# 移动端\n\n[移动端尺寸基础知识](http://colachan.com/post/3435)\n\n[移动端高清、多屏适配方案](http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041)\n\n[使用Flexible实现手淘H5页面的终端适配](https://github.com/amfe/article/issues/17)\n\n[再聊移动端页面的适配](https://www.w3cplus.com/css/vw-for-layout.html)\n\n--------------------------------------------------------------------------------\n\n\n# Data Visualization 数据可视化\n\n[数据可视化概览](https://antv.alipay.com/zh-cn/vis/blog/vis-introduce.html)\n\n[Canvas vs SVG](http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp)\n\n[WebGL 技术储备指南](http://taobaofed.org/blog/2015/12/21/webgl-handbook/)\n\n[ECharts](http://echarts.baidu.com/)\n\n## AntV\n\n[AntV](https://antv.alipay.com/zh-cn/index.html) 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践\n\n- [G2 可视化图形语法](https://antv.alipay.com/zh-cn/g2/3.x/index.html)\n  \n  一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表\n\n- [G6 关系数据可视化](https://antv.alipay.com/zh-cn/g6/1.x/index.html)\n\n  关系数据可视化引擎，开发者可以基于 G6 拓展出属于自己的图分析应用或者图编辑器应用\n\n- [F2 移动端可视化解决方案](https://antv.alipay.com/zh-cn/f2/3.x/index.html)\n\n  专为移动端定制的一套开箱即用的可视化解决方案，具有精简、高性能、易扩展的特性。适用于对性能、大小、扩展性要求严苛的场景\n\n## D3\n\n[D3.js](https://d3js.org/) (Data-Driven Documents) 是基于数据操作文档的 JavaScript 库。D3 绑定数据到 DOM，根据数据操作文档，创建交互式的图表。需要注意的是，数据转换和绘制相互独立。\n\n--------------------------------------------------------------------------------\n\n\n# Design\n\n设计体系方法论： [atomic design](http://bradfrost.com/blog/post/atomic-web-design/)，阐述了从抽象到具体的 5 个层次：\n\n```\nAtoms =\u003e Molecules =\u003e Organisms =\u003e Templates =\u003e Pages\n```\n\n[Ant Design](http://ant.design/) 一个服务于企业级产品的设计体系，基于『确定』和『自然』的设计价值观和模块化的解决方案，让设计者专注于更好的用户体验\n\n[Material Design](https://material.google.com/) A visual language that synthesizes the classic principles of good design with the innovation of technology and science\n\n## Components\n\n- [Material-UI](http://www.material-ui.com/#/) React components that implement Google's Material Design\n- [Ant Design Mobile](https://mobile.ant.design/) 一个基于 Preact / React / React Native 的 UI 组件库\n- [Element](http://element-cn.eleme.io/#/zh-CN) 基于 Vue 2.0 的桌面端组件库\n- [Vant - 移动端](https://www.youzanyun.com/zanui/vant#/zh-CN/intro) 轻量、可靠的移动端 Vue 组件库\n\n## Solutions\n\n- [ANT DESIGN PRO](https://pro.ant.design/index-cn) 开箱即用的中台前端/设计解决方案\n- [飞冰 ICE](https://alibaba.github.io/ice)\n\n作为离用户最近的端，绕不开设计，会将搜集到的一些设计资源汇总在 [Design](./Design.md) 中。\n\n--------------------------------------------------------------------------------\n\n\n# References\n\n[Web 前端导航](http://www.alloyteam.com/nav/)\n\n[前端资源库](https://www.awesomes.cn/)\n\n[Page speed optimization](https://varvy.com/pagespeed/)\n\n[浏览器兼容性 Can I Use](http://caniuse.com/)\n\n[Create a minimal favicon](https://favicon.io/index.html#)\n\n\n## Electron - [官网](https://electron.atom.io/)\n\n- [Electron 中文文档](https://github.com/electron/electron/tree/master/docs-translations/zh-CN)\n- [Electron 深度实践总结](https://changkun.us/archives/2017/03/217/)\n\n\n## TypeScript - [官网](http://www.typescriptlang.org/)\n\n- [TypeScript中文网](http://tslang.cn/)\n- [TypeScript Handbook（中文版）](https://zhongsp.gitbooks.io/typescript-handbook/content/)\n- [TypeScript 的声明文件的使用与编写](https://my.oschina.net/fenying/blog/748805)\n- [TypeScript Types Search](http://microsoft.github.io/TypeSearch/)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falcat2008%2Ffront-end-study-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falcat2008%2Ffront-end-study-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falcat2008%2Ffront-end-study-guide/lists"}