diff --git a/README.md b/README.md index ebbec27..509f5d6 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,51 @@ + +转载请注明出处: [https://github.com/qiu-deqing/FE-learning](https://github.com/qiu-deqing/FE-learning) + + + +**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* + +- [FE-learning](#fe-learning) + - [必备基础技能](#%E5%BF%85%E5%A4%87%E5%9F%BA%E7%A1%80%E6%8A%80%E8%83%BD) + - [基本开发工具](#%E5%9F%BA%E6%9C%AC%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7) + - [学习方法和学习目标](#%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95%E5%92%8C%E5%AD%A6%E4%B9%A0%E7%9B%AE%E6%A0%87) + - [入门之路](#%E5%85%A5%E9%97%A8%E4%B9%8B%E8%B7%AF) + - [继续提高](#%E7%BB%A7%E7%BB%AD%E6%8F%90%E9%AB%98) + - [一些个人经历](#%E4%B8%80%E4%BA%9B%E4%B8%AA%E4%BA%BA%E7%BB%8F%E5%8E%86) + - [[LingyuCoder](https://github.com/LingyuCoder)的学习经历](#lingyucoderhttpsgithubcomlingyucoder%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%BB%8F%E5%8E%86) + - [工具](#%E5%B7%A5%E5%85%B7) + - [技能](#%E6%8A%80%E8%83%BD) + - [语言基础](#%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80) + - [进阶](#%E8%BF%9B%E9%98%B6) + - [项目](#%E9%A1%B9%E7%9B%AE) + - [未来](#%E6%9C%AA%E6%9D%A5) + - [其他](#%E5%85%B6%E4%BB%96) + - [入门书](#%E5%85%A5%E9%97%A8%E4%B9%A6) + - [一些不错的网站](#%E4%B8%80%E4%BA%9B%E4%B8%8D%E9%94%99%E7%9A%84%E7%BD%91%E7%AB%99) + - [历程](#%E5%8E%86%E7%A8%8B) + - [[MrRaindrop](https://github.com/MrRaindrop)的学习经历](#mrraindrophttpsgithubcommrraindrop%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%BB%8F%E5%8E%86) + - [缘起](#%E7%BC%98%E8%B5%B7) + - [项目,下一个项目](#%E9%A1%B9%E7%9B%AE%EF%BC%8C%E4%B8%8B%E4%B8%80%E4%B8%AA%E9%A1%B9%E7%9B%AE) + - [收集癖和知识管理](#%E6%94%B6%E9%9B%86%E7%99%96%E5%92%8C%E7%9F%A5%E8%AF%86%E7%AE%A1%E7%90%86) + - [跟对神](#%E8%B7%9F%E5%AF%B9%E7%A5%9E) + - [读书](#%E8%AF%BB%E4%B9%A6) + - [前端的定位](#%E5%89%8D%E7%AB%AF%E7%9A%84%E5%AE%9A%E4%BD%8D) + - [最后](#%E6%9C%80%E5%90%8E) + - [byr论坛yiyizym的建议](#byr%E8%AE%BA%E5%9D%9Byiyizym%E7%9A%84%E5%BB%BA%E8%AE%AE) + + + # FE-learning +![FE](./img/FE.jpg) + 结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。 -互联网的快速发展和激烈竞争,用户体验成为一个重要的关注点,导致专业前端工程师成为热门职业,各大公司对前端工程师的需求量都很大,要求也越来越高,优秀的前端工程师更是稀缺。个人感觉前端入门相对容易,在打好基础后坚持学习,成为优秀前端工程师也只是时间问题。 +互联网的快速发展和激烈竞争,用户体验成为一个重要的关注点,导致专业前端工程师成为热门职业,各大公司对前端工程师的需求量都很大,要求也越来越高,优秀的前端工程师更是稀缺。个人感觉前端入门相对容易,但是也需要系统地认真学习,在打好基础后坚持学习,成为优秀前端工程师也只是时间问题。 学习任何知识最重要的都是**兴趣**,如果经过一段时间的学习感觉不喜欢,那可能强迫自己学习是很痛苦的,效果也不会好,毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展,前端必然是Web开发人员需要学习的知识,有时候是没有专业前端工程师一起合作的,所以即使不做专门的前端工程师,掌握基本的前端技能为工作带来方便。 -后期邀请了一些同学分享学习经历。如果有同学愿意分享,[请联系我](mailto:qiu_deqing@126.com) +后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push ## 必备基础技能 @@ -14,6 +53,8 @@ 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向,完善技能和知识面。 +[frontend-dev-bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks)是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术,非常全面。 + 以下是个人觉得入门阶段应该熟练掌握的基础技能: - [HTML4](http://www.w3.org/TR/html401/cover.html#minitoc),[HTML5](http://www.w3.org/TR/html5/#contents)语法、标签、语义 @@ -33,8 +74,8 @@ - **文本编辑器**:推荐[Sublime Text](http://www.sublimetext.com/),支持各种插件、主题、设置,使用方便 - **浏览器**:推荐[Google Chrome](http://www.google.cn/chrome/?hl=zh-CN&standalone=1),更新快,对前端各种标准提供了非常好的支持 - **调试工具**:推荐Chrome自带的[Chrome develop tools](https://developer.chrome.com/devtools),可以轻松查看DOM结构、样式,通过控制台输出调试信息,调试javascript,查看网络等 -- **辅助工具**:PhotoShop编辑图片、取色,fireworks量尺寸,AlloDesigner对比尺寸,以及前面的到的Chrome develop tools,这里是一个[简单教程](http://qiu-deqing.github.io/toolpage/front-end-develop-tools.html) -- **翻墙工具**:使用goagent + chrome很方便。遇到问题时找不到合适的中文资料,可以考虑Google搜索对应的英文资料。 +- **辅助工具**:PhotoShop编辑图片、取色,fireworks量尺寸,AlloyDesigner对比尺寸,以及前面的到的Chrome develop tools, +- **翻墙工具**:lantern, ~~壁虎漫步~~(已被和谐) ## 学习方法和学习目标 @@ -55,29 +96,42 @@ 以下是入门阶段不错的书籍和资料 -1. HTML方面[《HTML5 the missing manual》](http://www.amazon.com/HTML5-Missing-Manual-Manuals/dp/1449302394/ref=sr_1_3?s=books&ie=UTF8&qid=1410096659&sr=1-3&keywords=html5+the+missing+manual),个人感觉非常不错,现在已经出了第二版,推荐这本书作为HTML入门 -2. CSS方面[《CSS: The Definitive Guide(css权威指南)》](http://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330/ref=sr_1_1?s=books&ie=UTF8&qid=1410097105&sr=1-1&keywords=css+definitive+guide)是需要反复学习的CSS书籍,对CSS2.1规范中重要的内容进行了详细介绍,可以考虑看中文版方便理解 -3. javascript先看几遍[《Professional JavaScript for Web Developers(javascript高级程序设计)》](http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_1?s=books&ie=UTF8&qid=undefined&sr=1-1&keywords=javascript+professional)然后[《JavaScript: The Definitive Guide(javascript权威指南)》](http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_3?s=books&ie=UTF8&qid=1410097105&sr=1-3&keywords=css+definitive+guide) -4. HTTP自然就是看[HTTP权威指南](http://www.amazon.com/HTTP-Definitive-Guide-Guides/dp/1565925092/ref=sr_1_1?s=books&ie=UTF8&qid=1410097965&sr=1-1&keywords=http+the+definitive+guide) +1. HTML先看[《HTML & CSS: Design and Build Websites》][]1-9章,然后[《HTML5: The Missing Manual》][]1-4章。 +2. CSS先看[《CSS: The Missing Manual》][],然后[《CSS权威指南》][] +3. javascript先看[《javascript高级程序设计》][],然后[《javascript权威指南》][] +4. HTTP看[HTTP权威指南][] 5. 在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合,实际工作中也是这样,一个简单的功能模块都需要三者结合才能实现。 6. 动手是学习的重要组成部分,书籍重点讲解知识点,例子可能不是很充足,这就需要利用搜索引擎寻找一些简单教程,照着教程实现功能。以下是一些比较好的教程网址 - - CSS各种布局[http://blog.html.it/layoutgala/](http://blog.html.it/layoutgala/) - - 可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的[前端面试题](https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese)还有[个人总结的面试题](https://github.com/qiu-deqing/FE-interview)(带参考答案) - - [http://code.tutsplus.com](http://code.tutsplus.com/categories/javascript)有各种各样的教程 - - [MDN](https://developer.mozilla.org/en-US/docs/Web)也有很多教程,更重要的是里面有详细的文档,需要查找某个功能时在Google搜索:xxx site:https://developer.mozilla.org - - [www.html5rocks.com](http://www.html5rocks.com/zh/tutorials/?page=1)也有很多优质教程 - - [www.sitepoint.com](http://www.sitepoint.com/javascript/) - - [http://alistapart.com/](http://alistapart.com/) -7. 原生javascript是学习前端需要重点掌握的技能,在掌握原生javascript的基础上推荐熟练掌握jQuery,在实际工作中用处很大,这方面的书籍有[《Learning jQuery》](http://www.amazon.com/Learning-jQuery-Fourth-Jonathan-Chaffer/dp/178216314X/ref=sr_1_1?s=books&ie=UTF8&qid=1410099243&sr=1-1&keywords=learning+jquery)或者去[jQuery官网](http://api.jquery.com/) -8. 建一个[https://github.com/](https://github.com/)账号,保存平时学习中的各种代码和项目。 -9. 有了一定基础之后可以搭建一个个人博客,记录学习过程中遇到的问题和解决方法,方便自己查阅也为其他人提供了帮助。也可以去[http://www.cnblogs.com/](http://www.cnblogs.com/)或者[http://www.csdn.net/](http://www.csdn.net/)这样的网站注册账号,方便实用 -10. 经常实用Google搜索英文资料应该经常找到来自[http://stackoverflow.com/](http://stackoverflow.com/)的高质量答案,与到问题可以直接在这里搜索,如果有精力,注册一个账号为别人解答问题也能极大提高个人能力。 + - 可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的[前端面试题][]还有[个人总结的面试题][](带参考答案) + - 有各种各样的教程 + - [MDN](https://developer.mozilla.org/en-US/docs/Web)也有很多教程,更重要的是里面有详细的文档,需要查找某个功能时在Google搜索:`xxx site:https://developer.mozilla.org` + - 也有很多优质教程 + - + - +7. 原生javascript是需要重点掌握的技能,在掌握原生javascript的基础上推荐熟练掌握jQuery,在实际工作中用处很大,这方面的书籍有[《Learning jQuery》][]或者去[jQuery官网](http://learn.jquery.com/) +8. 建一个账号,保存平时学习中的各种代码和项目。 +9. 有了一定基础之后可以搭建一个个人博客,记录学习过程中遇到的问题和解决方法,方便自己查阅也为其他人提供了帮助。也可以去或者这样的网站注册账号,方便实用 +10. 经常实用Google搜索英文资料应该经常找到来自的高质量答案,遇到问题可以直接在这里搜索,如果有精力,注册一个账号为别人解答问题也能极大提高个人能力。 11. 经典书籍熟读之后,可以打开前面必备基础技能部分的链接。认真读对应标准,全面掌握知识 + +[《HTML & CSS: Design and Build Websites》]: http://www.amazon.cn/gp/product/B00BMK4GKW/ref=s9_simh_gw_p14_d0_i2?pf_rd_m=A1AJ19PSB66TGU&pf_rd_s=center-2&pf_rd_r=1AH2NF64STS19GY8GR54&pf_rd_t=101&pf_rd_p=108773272&pf_rd_i=899254051 +[《HTML5: The Missing Manual》]: http://www.amazon.cn/HTML5%E7%A7%98%E7%B1%8D-Matthew-MacDonald/dp/B009DFCZAQ/ref=sr_1_1?ie=UTF8&qid=1414740812&sr=8-1&keywords=html5+the+missing+manual +[《CSS: The Missing Manual》]: http://www.amazon.cn/CSS-The-Missing-Manual-Mcfarland-David-Sawyer/dp/0596802447/ref=sr_1_1?ie=UTF8&qid=1414742710&sr=8-1&keywords=css+the+missing+manual+2 +[《CSS权威指南》]: http://www.amazon.cn/CSS%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97-%E8%BF%88%E8%80%B6/dp/B0011F5SIC/ref=sr_1_1?ie=UTF8&qid=1414744248&sr=8-1&keywords=css+%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97 +[《javascript高级程序设计》]: http://www.amazon.cn/JavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1-%E6%B3%BD%E5%8D%A1%E6%96%AF/dp/B007OQQVMY/ref=sr_1_1?s=books&ie=UTF8&qid=1414744358&sr=1-1&keywords=javascript+%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1 +[《javascript权威指南》]: http://www.amazon.cn/O-Reilly%E7%B2%BE%E5%93%81%E5%9B%BE%E4%B9%A6%E7%B3%BB%E5%88%97-JavaScript%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97-%E5%BC%97%E5%85%B0%E7%BA%B3%E6%A0%B9/dp/B007VISQ1Y/ref=sr_1_1?s=books&ie=UTF8&qid=1414744401&sr=1-1&keywords=javascript+%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97 +[HTTP权威指南]: http://www.amazon.cn/HTTP%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97-%E5%90%89%E5%B0%94%E5%88%A9/dp/B008XFDQ14/ref=sr_1_1?s=books&ie=UTF8&qid=1414744440&sr=1-1&keywords=HTTP+%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97 +[前端面试题]: https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese +[个人总结的面试题]: https://github.com/qiu-deqing/FE-interview +[《Learning jQuery》]: http://www.amazon.com/Learning-jQuery-Fourth-Jonathan-Chaffer/dp/178216314X/ref=sr_1_1?s=books&ie=UTF8&qid=1410099243&sr=1-1&keywords=learning+jquery + + + ## 继续提高 有了前面的基础之后,前端基本算是入门了,这时候可能每个人心中都有了一些学习方向,如果还是没有。 -可以参考前面必备技能部分提到的那个项目,从里面选一些进行发展学习。以下是一些不错的方面: +可以参考前面必备技能部分提到的那两个项目,从里面选一些进行发展学习。以下是一些不错的方面: - [Grunt](http://gruntjs.com/):前端自动化工具,提高工作效率 - [less css](http://lesscss.org/):优秀的CSS预处理器 @@ -89,38 +143,10 @@ - [Javascript内存管理](https://developer.chrome.com/devtools/docs/javascript-memory-profiling?hl=figoogle):SPA长期运行需要注意内存泄露的问题 - [High Performance JavaScript(Build Faster Web Application Interfaces)](http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X/ref=sr_1_1?s=books&ie=UTF8&qid=undefined&sr=1-1&keywords=high+performance+javascript) - [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html):重要技能 -- 读jQuery源码 - - -## 书籍推荐 - -以下是一些不错的书籍、网站、教程。 - -- [《Ajax完全手册》](http://www.amazon.cn/Ajax%E5%AE%8C%E5%85%A8%E6%89%8B%E5%86%8C-%E6%B3%A2%E7%BB%B4%E5%B0%94/dp/B001N6R0Q2/ref=sr_1_2?ie=UTF8&qid=1410104972&sr=8-2&keywords=ajax%E5%AE%8C%E5%85%A8%E6%89%8B%E5%86%8C):一本Ajax很不错的书,例子多,实现了一个Ajax库 -- [《Pro AngularJS》](http://www.amazon.com/Pro-AngularJS-Experts-Voice-Development/dp/1430264489/ref=sr_1_1?s=books&ie=UTF8&qid=1410105152&sr=1-1&keywords=pro+angularjs):AngularJS很好的书籍 -- [《Pro jQuery》](http://www.amazon.com/Pro-jQuery-Experts-Voice-Development/dp/1430263881/ref=sr_1_1?s=books&ie=UTF8&qid=1410099103&sr=1-1&keywords=pro+jquery)和[Learning jQuery](http://www.amazon.com/Learning-jQuery-Fourth-Jonathan-Chaffer/dp/178216314X/ref=sr_1_1?s=books&ie=UTF8&qid=1410099243&sr=1-1&keywords=learning+jquery):两本jQuery书籍 -- [《精通CSS:高级web标准解决方法》](http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_1?ie=UTF8&qid=1410137090&sr=8-1&keywords=css+mastery+advanced+web+standards+solutions):CSS实用技能 -- [JavaScript Memory Profiling](https://developer.chrome.com/devtools/docs/javascript-memory-profiling?hl=figoogle) -- [《HTML5 canvas》](http://www.amazon.com/HTML5-Canvas-Steve-Fulton/dp/1449334989/ref=sr_1_1?ie=UTF8&qid=undefined&sr=8-1&keywords=html5+canvas):canvas是HTML5带来的一个很棒的特性,可以做很多事情 -- [《Pro Node.js for Developers》](http://www.amazon.com/Pro-Node-js-Developers-Colin-Ihrig/dp/1430258608/ref=sr_1_1?ie=UTF8&qid=undefined&sr=8-1&keywords=pro+nodejs+for+developers):node发展太快。里面很多API都过时了,尽量参考官方API,不过还是值得一看 -- [《Node.js in Action》](http://www.amazon.com/Node-js-Action-Mike-Cantelon/dp/1617290572/ref=sr_1_1?ie=UTF8&qid=1410138522&sr=8-1&keywords=node+js+in+action):很不错的Node入门书籍 -- [《Single Page Web Applications: JavaScript end-to-end》](http://www.amazon.com/Single-Page-Applications-end---end/dp/1617290750/ref=sr_1_1?s=books&ie=UTF8&qid=1410138650&sr=1-1&keywords=single+page+application):一步步完成简单SPA -- [天镶大神的博客](http://lingyu.wang/#/home) ## 一些个人经历 -### [qiu-deqing](https://github.com/qiu-deqing)的学习经历 - -### [asd123freedom](https://github.com/asd123freedom)的学习经历 - -### [sue891206](https://github.com/sue891206)的学习经历 - -### [Sheetaa](https://github.com/Sheetaa)的学习经历 - -### [suikaxin](https://github.com/suikaxin)的学习经历 - -### [quanxi613](https://github.com/quanxi613)的学习经历 ### [LingyuCoder](https://github.com/LingyuCoder)的学习经历 @@ -145,7 +171,7 @@ + UC二维码:移动端调试扫码必备 + pagespeed,YSlow:页面性能分析和优化插件 + 马克飞象:优秀的在线markdown编辑器,快速写周报,做记录 -* sublime text2:编码方便,插件多,速度快,性能好 +* sublime text3:编码方便,插件多,速度快,性能好 - emmet:提升html编码速度必备 - sublimelinter + 各种语言的lint和hint:代码纠错 - 一些snippets:自动补全,提升开发效率 @@ -153,6 +179,7 @@ * Mark Men:测量、取色、标注利器,拿到视觉稿之后第一个打开的软件 * GFW Fucker:我用红杏,可以的话买个虚拟服务器当梯子 * iHosts:非常优秀的hosts管理软件,轻松修改hosts,开发调试必备 +* Charles:Mac 平台最好用的抓包分析工具 * Rythem:AlloyTeam出品的代理抓包软件,非常轻量,安装简单,移动端(真机)开发调试很好用 * Wunderlist:一个非常不错的Todo List,任务、需求多的时候管理起来很方便 @@ -210,7 +237,7 @@ CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的 一些理念: * 响应式Web * 优雅降级、渐进增强 -* don`t make me think +* don't make me think * 网页可用性、可访问性、其中的意义 * SEO搜索引擎优化,了解搜索引擎的原理 * SPA的好处和问题 @@ -245,7 +272,7 @@ CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的 - git pages - hexo - jekyll - + #####未来 * Web Componets:面向未来的组件化开发方式 - HTML模板 @@ -260,13 +287,14 @@ CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的 * 交流和沟通能力:这个非常重要,前端同时需要与项目经理、产品、交互、后台打交道,沟通不善会导致很多无用功,延缓项目 * 知识管理、时间管理:input和output的平衡,output是最好的input。如何做好分享,参与社区,做好交流,作好记录 * 对新技术的渴望,以及敢于尝试 - + ####入门书 入门可以通过啃书,但书本上的东西很多都已经过时了,在啃书的同时,也要持续关注技术的新动态。这里推几本我觉着不错的书: * 《JavaScript高级编程》:可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看 * 《JavaScript权威指南》:不太适合入门,但是必备,不理解的地方就去查阅一下,很有帮助 -* 《编写可维护的JavaScript》和: +* 《编写可维护的JavaScript》 +* 《JavaScript DOM编程艺术》学习JavaScript和DOM开发的必读之作。 * 《Node.js开发指南》:不错的Nodejs入门书籍 * 《深入浅出Node.js》:Nodejs进阶书籍,必备 * 《JavaScript异步编程》:理解JS异步的编程理念 @@ -303,10 +331,96 @@ CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的 ####历程 以前是做Java SSH的,半路出家做的前端,所以水平比较弱,遇到问题也比较多。基本上入门靠看书和[W3C School](http://www.w3school.com.cn/)上的教程,以及一些前端博客,如[汤姆大叔的博客](http://www.cnblogs.com/TomXu/)。以前也只是使用jQuery,原生js也没有太多的钻研,后来逐渐看了很多本动物书,比如老道的语言精粹等等。从这些书中学到了很多语言层面的知识。但这显然是不够的,所以我经常会去社区上看看大家在谈论什么,然后去看看相关的资料,感兴趣就会多找些资料看看,或者写一写demo。学CSS主要就是通过这种方式。后来开始更多的关注各路大牛的博客和一些比较深的书籍,以及关注一些新的知识和框架,并且不断地练手提交代码到github,这样也学到了很多知识。在实习的过程中,切身参与到实际项目开发之中,能学到很多在学校学不到的理念和思维,这点也有很大的帮助。不说了,我要去搬砖求offer了... -### [zwl4488](https://github.com/zwl4488)的学习经历 ### [MrRaindrop](https://github.com/MrRaindrop)的学习经历 -### [zyr2014](https://github.com/zyr2014)的学习经历 +应[qiu神][1]的邀请分享一下前端学习经验,这里对前端知识体系架构就不做总结了,各位大神们的总结已经相当到位了,我就贡献几个个人认为还比较有用的链接大家研究研究就好,然后主要分享一下我在前端学习过程中遇到的问题和总结的经验教训吧,如果能帮到想要入门的FE初学者(我就姑且假定为本文的读者受众类型了),让他们少走点弯路,每走一步都知道自己下一步的方向,这是最好了。各位大神的总结和分享详见qiu神整理的[FE-learning][2]。 + +先说下,前端这个东西每个人都可以有适合自己的学习方法,这篇仅作参考,写的有点乱,各位凑合看。 + +#### 缘起 + +我是属于误打误撞进了前端,之前一直往做游戏的方向去来着,搞过游戏网站,玩过游戏引擎,比如unity,unreal这种商业引擎,捣鼓了几个游戏原型,不过自打研一进了实验室,直接就被导师派去写了js,导师给了我半个月时间让我写个基于百度地图api的数据展示页面,虽然这个时间还是相当宽裕的,不过之前没怎么写过js,也不会用地图api,于是我就一边啃着[《Javascript权威指南》][3](犀牛书)一边参考实验室前人留下的"代码",总算是把功能都写出来了。那个页面算我的js入门作了,也是我前端学习路线的开始。 + +> 现在想来,虽然指派了去做前端,但是一直做下去并做好还是得靠兴趣维持,当然前端是一个趣味性十足的技术领域,而且社区每天都很"热闹"。 + +#### 项目,下一个项目 + +我个人认为前端的学习,初学阶段你可以完全脱离开书本,以**项目驱动**。虽然我个人是从犀牛书开始啃的,不过如果你没有充足的时间,或者觉得啃大部头乏而无味的话,还是别像我这样。当然了如果决定啃书最好是把书里的例子都跟着敲一遍的。我上研之前没接触过js,4月份还没开学呢就被直接被导师甩了个百度地图api的项目到脸上,接着就是各种ERP,地图数据展示,虽然换着花样来一点不重样,不过基本上都是前端的活,SSH和android开发也打过酱油,整个实验室就我一个人写前端敢信?富客户端SPA时代的后端就是一个restful接口,代码量基本都在前端啊,写的我一个人怎一个爽字了得...期间跟着导师感受了一把创业,每天从7点搞到晚上10点,也算是经历了一段快速成长期。 + +> 掌握一门技术先掌握它的大体框架,想一个能实现的点子,做一个能跑就行的demo,再去完善它的细节,等到demo完成了,对这门技术有了一个感性的认识,再去啃书,收获会大很多。我从开始原生js写到jquery,再到extjs,再到angularjs,从导师指定技术,到自己做技术选型,一个项目接着一个项目的练,就跟打怪升级似的。当然没有项目就去自己创造项目,动手实现自己的想法是件有乐趣和成就感的事。 + +#### 收集癖和知识管理 + +前端学习有个特点,很多东西都很零碎,分散,需要你自己去整理、归纳和总结。在微博、知乎上follow了众多的大神,你不仅仅是为了听八卦,大神们的只言片语有时候留下的是无尽的余味,很有可能一个不经意提到的一个词就成为你下一个学习的目标。**收集这些信息,善用google,提问,思考。**就像游戏里的收集要素,前端学习也是充满搜集要素的一个"游戏",只不过你需要一个知识管理工具来充当物品栏和仓库,我所知道的大牛们无一不是知识管理工具的重度使用者。以前用的oneNote,那时候还没绑定到云存储,现在基本上用evernote,笔记已经累计到1200+篇。书签一直打算用delicious,因为它是基于tag管理的,但一直没用起来。当然重点不在于这些工具,但是趁手的工具可以提高你的学习效率。最关键当然是随时**保持旺盛的学习欲望**,你的目标是了解有关前端的一切(当然不是所有都要掌握,因为毕竟你的精力有限,而且现实的说这也不太可能)。 + +#### 跟对神 + +这个可控性貌似不大...跟对老大这个就不多说了,一定程度要看造化。不过话说回来,多跟身边的高手交流是王道,这个高手不一定要多高,但是一定要对技术有热情。研一的时候热情高涨,每天7点进实验室门,然后发现有个家伙居然比我还早到。后来发现这家伙上午就走了,下午又来了,而且导师对此习以为常,原来这家伙晚上不睡觉通宵写代码,上午才跑回去睡。后来经常和这位神讨论问题,每次感觉经验值蹭蹭蹭的往上涨。然后实验室还有一位神,被前面这位通宵神形容为"只能望其项背,一直在追赶,从来没赶上",两位神的特点都是什么都了解一点,所以什么都能跟你讨论得起来,我有段时间做了个读书计划,从c/c++到vc/mfc再到unix网络编程,最后一路看到java核心技术和MSDN上的C#编程指南,和神们也能扯得很high了。 + +> 总之就是这两位神把我拉进了坑,或者说从一个坑跳进另一坑,虽然两位神都不是搞前端的,不过技术之间总有相通之处。 + +#### 读书 + +读书,多读书,读好书。在[刘未鹏的博客][4]里看到过一个公式,**你第一个月的工资等于之前买过(读过)的技术书价格总和**(这里说的技术书指那些经典的公认的好书)。讨论这个公式的正确性似乎没什么意义,然而它的合理性是毋庸置疑的,那就是多读经典技术书。最极端的一个例子,google的徐宥在[我的大学][5]里面说他扫荡了图书馆的整个TP312书架...对于前端的经典书籍,后面列了一个我收集的[前端书列][13](如果有遗漏的前端经典好书,还请留言告诉我),有条件可以尝试刷一遍这些书,我也是在找完整的时间去啃完它们。之前说的,前端知识点松散,收集零散的知识点,从博客里快速学习等,这些只是前端学习的一个方面,如果你要想深入理解一个知识体系,了解它的来龙去脉,对它建立系统认识,读经典书还是必不可少的。 + +我从最开始啃完犀牛书,然后接着去看了其他一些和前端干系不大的经典技术书,再后来通过实验室的项目和自己弄的一些小项目逐渐对前端领域比较上路以后,又看了《Javascript模式》、《Javascript设计模式》、《编写可维护的Javascript》,后来了解到node并开始用node搞点小玩意儿,又看了本《NodeJS up and run》和《Mongodb权威指南》,不过感觉前者略坑。那会儿朴灵那本深入浅出(晒书么么哒)还没出,后来出了就去图书馆借来看完,这么看下来感觉还不错,不过感觉看的还是偏少了,还需要继续刷(参照上面的书列)。 + +#### 前端的定位 + +前端的定位关乎到你需要吸收什么样的知识和技能,决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面,实现交互和视觉的要求,那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题:前端技术日新月异,范围越扩越宽,标准越来越丰富,似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位?考官给我分析了半天,然后总结成一句话,就是用户和网站的联结者,用户体验的创造者(原话不是这样,但大体是这个意思)。也就是说前端的终极目标其实就是创造用户体验,提升用户体验,**以用户体验为中心**。不管你是从交互设计上下手,还是从性能优化出发,或者改进工作流提升工作流效率,最终都是为了创造和提升用户体验,最终都要体现到用户体验这一点上来。我认为这个总结非常有道理(当然"用户体验"这个词太宽泛了,并且不仅仅是前端工程师的范畴,比如开发后台的时候对一个数据处理过程进行优化,提升了整体性能,这也是对用户体验的一个提升)。 + +现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题,比如前端自动化、图像编程、性能优化等等,再往后推一点就是PHP/JSP/ASP/nodeJs,过去后端模板一般属于后端的范畴,现在随着[前端架构的演进][6],可能会让你去写后端模板的代码,需要用到后端语言(PHP/Java/C#等),这就是所谓**大前端**(然而这与前端的定位并不是相背离的,大前端处理的依然是与用户接触的部分,仍然是对用户体验的优化)。可能最常见或者被谈论最多的就是node,其实这几种技术选型都可以,bat三家据说百度用PHP比较多,阿里用node比较多。 + +玉伯在[他的博客][7]里提过所谓全端是横向的,全栈是纵向的。**全端**即所有的终端说白了都是前端,因为都关乎到用户体验,直接和用户接触。适应多终端的开发,要求你在web前端的基础上,可能还要去扩展android开发和ios开发的知识,好在由于hybrid开发方式的流行,对使用native语言开发的技能会要求的不那么深入。 + +**全栈**可以说是最适合初创公司的一种发展类型,广义上认为是从前端干到后端,从开发干到运维,这种就不说了,一般人应该不会想要去往这个方向发展,想要成为这种意义上的full-stack dev的,可能用不着来看我这篇文章了;而狭义上的全栈特指使用js语言从前端写到架设在nodeJs上的后端,前后端统一语言,统一编程模型,甚至公用同一套代码。更多了解全栈开发可以看看玉伯这篇[说说全栈工程师][8]。 + +以上是我对前端以及衍生出来的技术路线的一些浅薄理解,学习一个领域掌握它的整体上的走向和趋势还是挺重要的。另外如果想要对前端学习方向、职业成长路径有一个整体的认识,推荐看看拔赤总结的这篇[前端开发十日谈][9]。 + +#### 最后 + +贡献几个对前端学习、面试有帮助的链接: + +* [前端面试问题合集(Front-end-Developer-Interview-Questions)][10] +* [前端技能汇总(JacksonTian)][11] +* [另一张前端技能汇总图][12] +* [前端那点事儿(书列)][13] + +[1]: https://github.com/qiu-deqing +[2]: https://github.com/qiu-deqing/FE-learning +[3]: http://book.douban.com/subject/2228378/ +[4]: http://mindhacks.cn/topics/learning-method/ +[5]: http://blog.youxu.info/2009/08/06/my-undergraduate-year/ +[6]: https://github.com/lifesinger/lifesinger.github.com/issues/184 +[7]: https://github.com/lifesinger/lifesinger.github.com/labels/blog +[8]: https://github.com/lifesinger/lifesinger.github.com/issues/185 +[9]: https://github.com/jayli/jayli.github.com/issues/1 +[10]: https://github.com/darcyclarke/Front-end-Developer-Interview-Questions +[11]: https://github.com/JacksonTian/fks +[12]: http://www.f2er.info/ +[13]: http://book.douban.com/doulist/13701898/ + +### byr论坛yiyizym的建议 + +与grunt相比,学习gulp会比较简单 + +做SPA的话,推荐backbone.js和 backbone.marionette.js + +翻墙不用折腾,花十块钱买一个月的 红杏。 + +把基础打扎实了再学这些都没问题。 + +html 没什么好说的,有空学学html5。 + +css 尽量看[文档](http://www.w3.org/TR/CSS21/cover.html#minitoc) ,因为很多中文资料都各执一辞,看多了反而会糊涂。 + +有个[网站](http://caniuse.com/)可以查找html/css标签、属性在各个浏览器中的支持情况,挺好用的。 + +javascript 就看 javascript高级程序设计 。不过这么厚的书看过就会忘。对javascript核心概念的讲解:对象/原型链/ 构造函数/执行上下文/作用域链/闭包/this,[这里](http://weizhifeng.net/javascript-the-core.html)有篇不错的文章。 + +有闲情可以看看 ecmascript 6。[阮一峰的网站](http://es6.ruanyifeng.com/)有入门资料。 + +jquery 有很多 API,[这个网站](http://www.css88.com/jqapi-1.9/)可以方便查到。有时间弄清楚jquery deferred 的用法。 -### [zhangtaibai](https://github.com/zhangtaibai)的学习经历 \ No newline at end of file +多给 sublimetext 装插件,比如说检查代码错误的,新建目录文件的,整理代码的。 diff --git a/img/FE.jpg b/img/FE.jpg new file mode 100644 index 0000000..a48d9df Binary files /dev/null and b/img/FE.jpg differ

AltStyle によって変換されたページ (->オリジナル) /