BYR Achieve · 镜像论坛

【以下文字转载自 WWWTechnology 讨论区】发信人: emlcj (连城究), 信区: WWWTechnology 标题: 给初心者的前端练级攻略发信站: 北邮人论坛 (Sat Aug 27 11:28:24 2016), 站内 # 前端练级之路最近有些人找我问如何学习前端，这里就谈一谈入门级的前端练级路线吧。虽然网上确实有很多内容，但是大多都太老了，跟不上时代，面对现在前端飞速的发展，可能还是需要稍微汇总一下的比较好，不过这里谈的只是 **入门** 级别的，更深的限于能力考虑，就不说了。这里只是关于自己学习前端的经验分享。 ## 一个及格的前端需要有什么能力 - 理解 HTML **语义化** - 了解 CSS 的原理，能够梳理、规范（即模块化）CSS - 掌握 JavaScript 的语法，对 **函数式编程** 有所了解 - 理解 **HTTP** 协议 - 具有基本的设计功底 - 能够写一点点的后端 ## 练级路线 1. 读《HEAD HTML and CSS》，了解基本的 HTML/CSS 2. 读《JavaScript DOM 编程艺术》，了解基本的 JavaScript 3. 学习 NodeJS（读《深入浅出 Nodejs》），了解 NodeJS 的运行原理。前面2步只是学了一点前端的基础（中的基础），这一步是加深对 JavaScript 的理解，顺便整个前端（或者是 HTTP 的机制进行了解），中间需要学习一些基本的 HTTP 知识，比如说怎么验证啦，怎么登陆啦，怎么缓存啦（这个时候需要看《图解 HTTP》） 4. 学习完上面三个之后，就可以写一个小项目来练手，比如写个最简单的博客系统，这个时候需要自己补充一点设计的功底，可以找几本 Web 设计书看看，有条件的可以自己开搞（比如 MacOs 下，sketch 就挺好用的）。这个时候也需要点一下数据库相关的知识，从 SQL 到 NoSQL 都可以。 5. 写博客系统的时候就会遇到各种各样的问题，这个时候就比较好掌握学习的方向 1. 原生 JavaScript 有点麻烦，可以考虑看一点 jQuery，不过我认为最好的 jQuery 的学习方案是找一个开源组件看源码（比如 Select，Datepicker） 2. CSS 太多的时候有点麻烦，这个时候可以去看看 SCSS 3. 移动端样式不好，可以学响应式设计 4. 设计的不好看，可以看一点设计规范，比如 Material design 5. 代码版本不好管理，学 Git 6. 第五步的小内容学完之后，也会遇到一些问题 1. 可能会有第三方依赖，如何管理第三方依赖？先学 bower，再学 npm 2. SCSS 脚本需要编译，懒得自己来？学 Grunt、Gulp 7. 到这一步，**基本** 的前端架构知识就差不多了，下一步是提升 1. 学习 ES2015，顺便尝试用 Promise、Generator、Async/Await 来使得你的博客系统更好看 2. 学习 React/Vue，发现更大的世界（备选项还有 Angular 2，Polymer） 3. 学上述的东西必然要学 Bundle 工具。了解 CommonJS，AMD 规范，顺便了解使用 browserify，webpack 4. 了解下一代 CSS 规范，并了解如何在项目中应用（postcss，cssnext） 5. 学习函数式编程，这个时候可以不局限在 js 里面，可以看看 Elm 或者 ClosureScript 6. 学习服务器部署，了解 Linux 学习过程中也会有点问题，比如说有些东西学完之后是不太会用到的，比如说 Grunt，bower 这种，都是被时代所抛弃的，肯定现在都用 webpack，npm。如果只是学最新的东西，当然也行，但我觉得从 **历史发展的眼光** 来看，学这些东西，才能理解整个流行的趋势以及原因，对自己会更有好处。大概上述的走完可能需要一个月，这个时候就算是对整个前端的一个了解了，更多的学习就需要看更厉害的书了。限于能力，这里也不再阐述。另外这些只是个人经验之谈……如果有说错的地方欢迎指正拍砖 ___ 以下内容是软广，介意请忽视 ___ 我司还在招聘 Nodejs/前端工程师（包括实习），介绍在：https://www.v2ex.com/t/278383 可以试试做下面这个 --> [前端笔试题](https://docs.google.com/document/d/1gTsLlCyZ6CbloWpV_c77XCsb-HouK7kXT1yCZJixQgc) 如果有兴趣（上述内容，或者这个工作），可以发邮件一起聊聊看 -->lcj#orgrimmar.io

给初心者的前端练级攻略 (转载)