说到前端开发,它涉及的知识面太广,知识点太杂,所以在前端学习的过程中难免会有一段迷茫期,现在我们就来讨论一下如何度过这段迷茫期,让自己的前端开发生涯有条不紊。

首先,我们要清楚前端开发需要掌握哪些东西,说到前端技术,一个学习过编程的人都知道HTML+CSS+JavaScript,这足以看出这三种技术在前端开发中的基础地位,如果连这些都不会,那么如何去从事前端开发?对前端开发有一定了解的人会知道,除了这三种最基本的技术,还有很多杂七杂八的技术,比较常见的就是jQuery,Bootstrap,NodeJs,React,Vue,AngularJs等等,除此之外,前端开发人员还应该掌握网站优化、浏览器兼容、设备兼容、开发和调试等方面的技术知识。现如今,web app、微信小程序等新型技术也层出不穷,html5的使用也更加广泛。可以看出,前端开发人员需要掌握的东西太多了,所以每一个前端开发人员都会遇到同样一个问题,那就是如何在有限的时间里高效地去学习如此五花八门的技术。

夯实基础。最重要的是夯实前端基础,也就是html+css+js。很多人觉得html和css很简单,其实不然,html是超文本标记语言,用来构建网页的元素,也许每个人都用标签写页面,但是稍微深入一点可能就不是所有人都会了,如果你觉得自己html掌握得很好,那么请问 contentEditable、isContentEditable属性你知道怎么用吗?怎么样用原生的html和css写一个导航菜单?也许离开了ant design很多人就不知道导航菜单怎么写的了。这叫真正的掌握吗?很显然不是的。如果作为前端开发人员,到现在你都没有系统性地把html和css教程看过一遍,那你能说自己真正掌握了这再简单不过的前端基础吗?再说JavaScript,几乎所有的前端框架和技术都是源于js,而js要学习的东西有很多,要系统性的掌握js还是需要一定的时间,真正的js绝对不是一个简单的基础教程就能讲解完全和透彻的,js学习阶段可以分为初级-中级-高级,建议一开始学习js可以从基础教程入手,对js的原理,数据类型,函数这些最基本的东西有一个全面的学习掌握,推荐w3c这样的官方网站学习初级的js教程,当基础js掌握了以后,可以进行一些开发实践,在最初阶段可以只学会如何去用,会写程序即可,对js的原理可以不求甚解,因为这个时候要理解内部原理还有一定困难,当自己的代码开发量达到一定的程度,平时的积累到达一定的量,就可以渐渐去深入学习js。

下面讨论如何深入全面学习js等编程技术:

(以下部分的内容借鉴于:http://caibaojian.com/toutiao/6851)

一、书是进步之阶梯。

(1)看书的好处是什么?

好处应该是不言而明的,书看多了,基础会逐渐夯实起来。看多了,自己的判断力,自然就上来了。看别人的文章,就能很快判断出,对方每块儿讲得对不对,哪块儿又是自己不清楚的,模棱两可的。当然也为看源码,分析源码提供了基础。

10本书读2遍的好处,应该大于一本书读20遍。10本书的交集,那就是基础知识的核心,而并集那就是所有的知识。好书当然要多读,反复读。但是只读一本是不行的。因为每本书的侧重点都不一样。从不同的侧面,去理解一个知识点,是很有意义的。所以特别佩服印度人,他跟你讲英文,你一个词语没听懂,他会蹦出n个同一意思的单词,你听懂一个就行了。看书也是这样的,某一块讲得不透彻,不用担心,其他书籍可以帮助你来了解。

(2)什么书值得我们去看?

网上关于学习js的推荐书籍有很多,简单总结如下:

《javascript面向对象编程指南》,风格轻松易懂,比较适合初学者,原型那块儿讲得透彻,12种继承方式。
《js权威指南》、《js高级程序设计》,这两本书经典是经典,但是太厚,适合把其中任意一章都当成一本书来读。洋洋洒洒,很难一口气看完。比较适合当做参考书。
《你不知道的javascript》狙击js核心细节,闭包、原型、this讲得都还清楚。目前上中下册都出了。
《js设计模式与开发实践》js设计模式,这本书把js的设计模式讲得非常清晰,一点不晦涩,看起来没多少难度。
《正则指引》,分析源码时,如果正则表达式不懂,没法进行下去的。此书相对来说讲得比较清晰。
《基于MVC的JavaScript web富应用开发》,看完后,基本能写出自己的mvc框架了。是本好书。
《javascript函数式编程》,js是一门函数式语言,此书是函数式编程一个入门。
《js忍者秘籍》,jq作者写的,没有传说中的那么难读,话说就算你看完并理解所有知识点,也不会达到世界高手级别的。因为你还没有做到随心所欲。
《javascript框架设计》,如果初看此书,会觉得此书有罗列代码之嫌。在我看来,此书讲究的是框架的全局观。
以上书籍是我认为是成就高手之路上必须看的,也需要反复看。

css相关的书籍,说实话我看得比较少,总共有六七本吧。有两本必须推荐一下:
《css权威指南》,css基础知识点那是讲得非常清楚的。如层叠优先级、line-height等。不是随便一本书都敢叫“权威指南”的。
《css揭秘》此书我也是不断的看,此书才不屑于全面讲css3各属性呢。css规范文档能讲的,它只会讲你最不在意的。此书解决的47问题,解决思路和解决方案同等重要,很有启发性。以上各书你都可以不买,至少买本此书吧。

(3)看书的正确方法?

想必很多人都想看书,但是很难看下去。文字部分相对来说还能看看,一遇到代码,头皮就发麻了。此问题一开始时我也遇到的。说一个学习理论。比如说学英语,有个开水理论。词汇量必须达到6000才行,如果没达到,英文水平不会上去的,这跟烧开水一样,没事烧烧,放着凉凉,从来没烧到100度,那么此水是永远不能喝的。一旦煮沸过,就可以随时喝了。
20本书你看不下去,说明什么呢?
任何一本书,你都没看完过。熟悉的,永远只是前三章。别笑,我原先也是这样的。
那么现在的问题是,怎么把一本书看完呢?
很简单,敲。
《基于MVC的JavaScript Web富应用开发》这本书我看时,就是这样,终于有一天,我下定决心要把此书从头到尾敲一遍。
文字加代码都敲,然后就一章一章得看完了。代码敲一遍后,你会发现,没之前看起来的那么难。
如果你属于一看书就犯困那种同学。强烈建议你把《javascript面向对象编程指南》此书从头到尾敲一遍。

坚持看完一本书后,信心就上来了。先保证看完一本再说。看完3本后,基本应该能做到几天就能看一本了。万事开头难,加油吧。

书看完后,要自己总结,要与其他书籍对比看。有同学同时对比着看《权威指南》和《高设》来的。

随便拿出个知识点,你都能闭着眼睛说得头头是道,说明水平够了。

二、源码学习,作为程序员,一定要注重源码的学习,所以精湛的代码都离不开学习,不是人人都有爱因斯坦的大脑,但是只要你愿意学习,取人之长补己之短,你就能写出漂亮的代码。好的创造灵感源于不断学习。

看框架源码之前,想说一件事情:dom的api不懂,没问题,你可以百度。但是正则一定要先研究研究。不然大多数人去尝试分析源码时,遇到的挫折都在于此。

怎么去阅读源码呢?
敲,照着敲。

有哪些代码值得去敲呢?
优秀框架或者库的源码都值得你去敲。
但是拿jq来敲,来入门,那不行的。原因:太他么长了。八九千行呢!!

个人觉得underscore.js库是不错的第一个选择。原因都是工具方法,敲完以后自己的水平应该略有小成吧。
其实有一些api的实现,你要把它当成getElementById一样,深深的印在脑海里。比如extend方法,必须张口就来。
敲完underscore库后,可以考虑去看看《javascript函数式编程》这本书了。

jq的源码不好敲。那么zepto的源码比较少1800多行,敲一天应该敲完了。
敲几遍后,把所有不懂的地方,都百度清楚,然后就可以写自己的类jq的库了。
然后就可以作为一项技能写进自己的简历里。比如“创建过自己的jquery库”。
当然敲的过程,还能帮助自己对jq的api认识。

然后是backbone.js,因为此框架是以类jq和underscore为基础的mvc框架。代码也没多少行。敲吧。
spine.js与backbone类似。可以在敲其之前,先看看那本《基于MVC的JavaScript Web富应用开发》。
希望你的简历可以添加这么一笔,“创建过自己的mvc框架”。

其他的,我也敲过一些。包括jq.validate.js,包括一些插件。
如果你愿意的话,bootstrap你可以去敲敲啊。源码挺多的,可以按插件逐个来敲。
分析明白了,轮播、分页、下拉框等等的插件那还不是分分钟随手就写一个了。
最起码看看人家api接口是怎么设计的也是极好的。话说个人在阅读其css代码中,也学到了不少东西。
说到插件,有两个必须提提,一个是表格插件,一个是树。都敲完,简历里可以这么写上,“创建过自己的UI框架”。

当然了,你也可以敲你喜欢的框架代码,重要的是明白其实现原理,最好理解其为啥那么设计,如果对设计模式比较熟悉的话,会经常发现原来是这么回事。。。
照着敲只是分析源码的入门,用途也是为了学习,最后能用在自己的项目中,那是才是正道。

就算没啥用,也是打发时间的好方式,比看电视剧强多了。我闲着无聊时,就背着敲underscore源码。。。

三、green hand 们怎么办?

看书和分析源码是重要的提高方式,但不适合新手。
新手需要的是能快速的入门和入行,能快速的上手工作。
一种快捷的学习方式就是看视频。正如有的同学说得那样,知道有哪些东西,怎么用就可以了。

看视频是有好处的,首先它是一种被动学习方式。
我最开始的入门也是看视频来的,只需要看就行了。
一遍没懂,再放一遍,我基本上是1.5倍数去看的。
而读书是一种主动方式,需要自己一页一页翻。需要自己主动的去理解。
而很多东西,也许只是视频老师一句话,就能突出的重点,需要我们自己去解读。
还有另一件事情是,比如发现自己某个知识点不太清楚,可以单独去百度。
比如this,文章很多的。这种学习方式也是快速掌握知识点的好办法。

书籍需要技术评审,那么看文章一定要看看评论。不过视频就不好说了,视频一般都不会讲得太深入,偶尔也有讲错的。

当年我也曾被一些视频误导过,建议找不错的视频看看。各大网站培训机构的免费视频挺多的。

四、看书和分析源码的时机

当已经工作一年半载时,正是提高的好时候,此时可以去看书了。全面系统的梳理知识点,扫清自己的盲区。如果只是靠项目经验是不够的,通过项目来学习,那肯定是必须的,工作本身就是一个学习的过程。但是工作三年不看书的话,学又能学到多少呢?更何况每个项目都很类似,一直处在舒适区,那真就是5年经验重复第一年的了。
所以我不认同这句话:面试时强调自己的学习能力是工作能力不强的表现。

3年经验的水平,完全有可能超过5年的。

五、时间和兴趣?

没有时间去学习?
如果你还没毕业,就已经天天在本站混了。其实你领先了一大步。
都是混过大学的。天天充斥着lol和电视剧的陪伴,我只想说进入社会是要还的。
最可怕的是什么呢?该还、还不还(这几个字别念错了)。时间是有的,就看你愿意付出不。

下班后学习,周末学习,节假日别人玩的时候,在家敲代码。这样才能领先别人。

兴趣问题?
兴趣和擅长是一个良性迭代循环。你擅长某件事情,就会越喜欢它,越喜欢,就越愿意花时间,进而越擅长。
此道理都懂,只是缺乏一个trigger。如果你喜欢玩游戏的话,其实你可能非常适合做前端。
玩游戏就是一个反馈机制,前端工作的反馈,相对其他工作来说也是非常及时的。代码一改,网页一刷,就看到效果了。

擅长、优越感、成就感通常都是连在一起的。每看完一本书,我都觉得很有成就感。每敲完一个库,也有成就感。

以上的部分都是我借鉴于另一篇博客(http://caibaojian.com/toutiao/6851),在我探索如何学习前端技术的时候在网上看到的这篇博客给我很大启发,我自己把它总结过来一方面是想方便查看,另一方面想把作者的学习思想传播给更多想要学习的开发人员。

最后,我想说一下如何坚持:

我一个朋友问我,如何才能去坚持一件事情,因为他发现自己总是无法去坚持完成一件有意义的事情,比如健身,学习自己喜欢的乐器,每天看一个小时书等等。要如何才能做到坚持。为什么自己总是坚持了一两天或者三五天就放弃了?

我想说的是,坚持本身是一件比较困难的事情,常人都很难去坚持一件事情,这很正常,如果每个人说坚持就能坚持,那么不是人人都变成专家了。

但是,坚持又是一件简单的事情,为什么这么说呢?因为只要你有想要坚持的想法,你就有可能做到。这好像是一句废话,但是你想一想,如果你自己都没有过坚持的想法,那不是完全没有救了吗?至少你有坚持的想法,你就还有机会。为什么难坚持?因为没有兴趣,没有计划,没有环境,懒惰等等,原因有很多,但是坚持本身并不难,难的是我们没有用对方法。如果你想知道怎么坚持,不要去徒劳地找方法,先问问那些坚持下来的人,为什么他们能坚持下来。只要你和几个有恒心和毅力的人深入沟通交流过,你一定会有一定收获。

坚持需要环境,没有怎么办?很简单,自己去创造环境。我们主要讨论一下学习上的坚持。就像我朋友说的,每天坚持看一个小时书,如何做到?其实很简单,营造一个看书的环境,然后每天在这个环境中待一个小时,就很容易做到。如果你在手机和床的旁边去坚持看书,那真是一种煎熬。因为看到手机就想玩,床在旁边就忍不住睡觉。这个时候如何给自己创造看书的环境?我建议可以去附近的书店,或者一个僻静的公园角落,总之只要你能安心看书的地方就没问题。如果手机影响你看书,那么每天抽一个很少人会联系你的时间,关掉手机或者干脆不带手机,去杜绝这种影响。给自己创造环境的方法有很多,我前面说的找地方只是一个方法,还可以和志同道合的朋友一起去坚持做一件事情,这样会比较有动力。坚持还要有计划和目标,比如看书,要有一个看书的计划,短期或长期的学习内容。并且还要有目标,坚持的目的是什么?如果你的坚持毫无目的,那这样的坚持就毫无意义,没有意义的坚持那是浪费时间和生命,还不如不做。反之,如果你的坚持有目标,有计划,那你就会有源源不断的动力去坚持。特别是当你完成一个计划和达成一个目标的时候,你的自信心就会蓬勃起来。

此外,短期的坚持靠环境和计划、目标。长期的坚持离不开兴趣、信心和乐趣。如果从做一件事中得到了快乐,喜欢上了这件事,那么长期的坚持就会自然而然,如果一直不喜欢这件事,那么即使短期能坚持,长久之际要坚持也难于登天。所以兴趣还是相当重要的,很多事情看起来索然无味,但是深入研究你就会发现它的乐趣。就像计算机编程看起来繁琐困难,没有什么乐趣,似乎没有人会喜欢,但是恰恰相反,很多人深入钻研编程以后,一天不看代码就会浑身不自在。其实坚持后的感觉是什么,如何从索然无味到充满乐趣,很难说清楚,只有真正坚持过,尝试过的人才有发言权。不要以没有兴趣为借口而不去坚持,如果没有坚持过就否定了自己的兴趣,那叫懒惰。如果你真的想在计算机领域做出一番成就来,就好好坚持去完成你的计划和目标,未来其实掌握在自己的手中。

如果你坚持,前端的世界是丰富多彩的!

关于前端开发学习的反思与规划相关推荐

  1. ul 原点显示_web前端开发学习教程,CSS HTML - ul li列表原点如何相连

    原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连 目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...

  2. 老前端工程师现身说法,2021Web前端开发学习路线图

    导读:2021Web前端开发学习路线图 三大件学习 现在每年依旧有很多初级入门的前端开发.所以对初入门的朋友也给出一点意见. 刚入门的朋友,我觉得不应该一开始就学习像Vue.TypeScript.We ...

  3. 前端开发学习路线图,完整学习教程+工具+框架

    回看近年的前端发展,不管是之前的散装前端时代,还是后来插件化.模块化的演进,亦或是现如今如火如荼的前端工程化迭代,发展速度实在是太快了,各种框架层出不穷,这些难免会让我们这些学习者眼花缭乱,满腹疑团. ...

  4. 前端开发学习笔记(一):HTML

    前端开发学习笔记(一):HTML 文章目录 前端开发学习笔记(一):HTML 一. HTML的文档结构 二.标签属性 2.1. 标签属性 2.2. 文字格式化标签 2.3. html实体转义 三. t ...

  5. 前端开发学习及工具网站(持续更新)

    前端开发学习及工具网站 该文章主要是记录前端开发中好的学习网站或者工具网站 大部分实用网站来源抖音鱼皮大佬分享,这里分享给大家 1.w3cschool(编程狮) 这个网站适合0基础学前端的同学,内容简 ...

  6. 2018web前端学习路线,详谈web前端开发学习路线

    近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景 ...

  7. Web前端开发学习【1】-----大学生如何购买学生版的阿里云服务器,或免费领取半年的阿里云服务器

    Web前端开发学习[1]-----大学生如何购买学生版的阿里云服务器,或免费领取半年的阿里云服务器目录 一.进入阿里云官网.注册阿里云账号 1.百度搜索关键词[阿里云服务器],然后进入官网 2.免费注 ...

  8. 重磅推出:分享阿里云大学前端开发学习路线链接

    重磅推出:分享阿里云大学前端开发学习路线链接 这是一份阿里云大学推出前端开发学习路线,适合入门.也适合刚入职场一两年的小伙伴,来一个基础知识进行加深视频学习.内容言简意赅,通过demo练习等来理解学习 ...

  9. 送给大家一套完整的web前端开发学习路线

    本文来源:千锋web前端开发 近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的 ...

最新文章

  1. WINCE6.0+S3C6410串口驱动
  2. python出现Unknown label type: ‘continuous‘
  3. Android Coroutines Channels
  4. GridView实现删除时弹出确认对话框
  5. 要毕业了,我应该做点啥?
  6. 深度学习——用向量重新组织输入数据
  7. RN PickerView组件
  8. 博士和博士后的有什么区别?
  9. layui.use 在a标签内onclick调用
  10. 50个超实用的生活小点子
  11. Fortran: namelist
  12. K8S-四层负载均衡-Service解读
  13. nginxWebUI :nginx可视化配置工具---实践
  14. 程序员的三大难题:秃顶、面试、找女朋友
  15. 2014一年开发技术资料收藏整理(一)
  16. 数据结构之内部排序--希尔排序
  17. linux文字命令窗口怎样截图,命令行中截图的小工具 - Linux就该这么学的个人空间 - OSCHINA - 中文开源技术交流社区...
  18. linux 字符界面
  19. 马斯克晒SpaceX星际飞船概念图,运载能力达250吨,要飞往另一个恒星系统...
  20. rm -rf !(file)命令不能执行的解决办法

热门文章

  1. SNS能否成为“人脉搜索”的平台
  2. 应届生软件面试自我介绍(合集)
  3. response.setHeader(Content-Type)与response.setContentType()
  4. springboot整合jpa+h2
  5. 企业微信2020年度大会:微盛·企微管家荣获年度优秀合作伙伴
  6. 通俗易懂,值得收藏的 java 设计模式实战,装饰者模式 之 你不用改变,就让你的能力变强了
  7. Java对接Zebra斑马打印机打印条形码相关
  8. 一个IT从业者的课外读物___经济管理篇
  9. 艾维邑动(Avazu Inc.)作为一个全球数字广告公司,如何在一个可预见的未来里,在受众定向和再定向广告市场中保持竞争力?
  10. QQ拒绝添加php,PHP在线挂QQ系统设置不当致个人隐私泄漏