js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径。
 
我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条“轻松学习js之路”。
 
js给人那种感觉的原因多半是因为它如下的特点:
 
A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。
 
B:本身内容很多,如函数库,对象库就一大堆。
 
C:混合多种编程思想。
 
它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。
 
就好像又是新的一样,让你对曾经学的面向对象产生了怀疑……
 
D:辛苦学习后又看似和实际应用脱节。
 
通常学了很久的js基础之后,变量、函数、对象你也都略知一二,但一到公司开发项目的时候,却又难以下手。
 
因为公司在开发实际项目的时候通常都是直接用它的衍生库,如:jquery,angular,、boostrap,amaze,layui,ueditor等,而这些库又多如牛毛,同时还有自己的难点。
 
让你都不知道该学哪个好,甚至都怀疑自己学的是不是js了,好像有多个版本的js一样,总是学不完……
 
那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验:
 
首先要紧紧抓住它的地位

 
时刻都不能忘记,否则很容易犯“一叶障目不见泰山”的错误。
 
不要学了很久就知道js是编程语言,就是写代码、而且特点就是乱七八糟就完了,那样是学不好js的。
 
要时时抓住它的地位,确切的说是它在整个WEB中的地位:它属于前端的核心,主要用来操控和重新调整DOM,通过修改DOM结构,从而来达到修改页面效果的目的。
 
要用这个中心思想去指导后续的一切js的学习,并且形成条件反射。
 
要有一条清晰的学习路线

 
这个只能是过来人给你提供参考了。
 
我的学习路线如下:
 
A:js基础部分,如:定义变量、函数、数组、字符串等的处理,内置函数、内置对象等。
 
B:js面向过程编程思想,封装出各个函数,试着用这些去做一些常见的小功能,如:选项卡,自定义多选按钮,自定义播放器,3D幻灯片;
 
C:js面向对象编程思想,试着去封装一些你自己的对象,提供出有意义的接口出来;
 
D:学了上述的内容,然后学常用的库,这里必须学jquery;
 
E:学基于Jquery之上的常见插件,如:bootstrap,Layer,富文本编辑器等。
 
F:综合应用上面的多种库写实际项目的模板,多写几套。
 
注意学习方法

 
我的学习方法总结如下:
 
A:多买几本国外的js书籍,不要购买那种20天精通之类的书。
 
否则你是很难学通的,更怕的是:本来你买本好书自学3个月可能学会的,它们硬是能折腾你两年……
 
书籍推荐(仅供参考)
 
《JavaScript DOM编程艺术》
 
《JavaScript权威指南》
 
《javaScript DOM高级程序设计》
 
《JavaScript设计模式》
 
《锋利的jquery》
 
争取把书上的功能都自己练习多次,不是一次。书读百篇,其义自见。
 
B:从多角度去学习和领悟
 
充分调动你所学的东西,从多角度的去做某一功能,如:以前你是从面向过程角度做的,
 
现在改为从面向对象的角度再来做,或者继续做成可以直接使用的插件,提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。
 
这样的好处:既综合应用了你的所学,又能有实际意义。
 
C:一定不要好高骛远
 
不要放过哪怕很小的动手机会,如做一个选项卡。
 
千万不要认为有了类似的甚至更好的插件就不需要自己写了,知识是别人的,不是你的,你即使会用了也对你的技术技能水平没有任何提升。
 
你要多问自己,如果要我来做,我该怎么做?
 
D:脚踏实地的同时,也不要脱离实际
 
多看现在网上已经出现的效果好的功能,让它去激发你的学习热情,尽量去学着模拟,调动你的知识去和实际相结合。
 
E:多写总结
 
这种总结不但包括源代码、显示效果截图,还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。
 
对自己写的总结不是写完了就了事了,要多回顾,多改进,多精简。到做项目的时候,应该是看里面的一两句话就知道是讲什么了,而不要再去看长篇大论了。
 
F:构建知识导图
 
这个可以让你越学越清晰,比如:http://www.phpkhbd.com/sky.html,你可以按你喜欢的任何形式去做,只要自己印象深刻就行。
 
注意:知识导图也应该是经常修改、修正,让它更合理、更清晰。
 
注意事项

 
A:充分利用一切手段
 
很多人总感觉时间紧,没有大块的时间学习。我要说你不会学了,你不应该只是抱怨,而是要利用一切手段去学习,要知道,不一定只有看书才叫学习。
 
当你冷静的坐在某个地方,思考了一下,总结了一下,你也都叫学习,但凡有灵感,就可以记录下来,比如:记录在手机上,等方便了再记录在专门的地方。这都叫学习。
 
B:贵在坚持
 
要沉的下心。没有一蹴而就的成功,否则那也不是成功,只能叫“侥幸”。
 
不但要老老实实的把每个功能都试着去实现,而且要精益求精的不断去修正,这个过程是漫长的,也是考验一个人是否是人才的标准。
 
C:注意培养信心
 
此时的你,不适合一来就看很复杂很炫的网页效果的源代码,也不适合一来就学jquery,angular,vue,bootstrap这些东西。
 
这些内容包含了很多深奥的知识在里面,在没有任何基础的情况下直接学这些,会严重打击你的自信心。
 
而此时你是弱小的,你需要的是培养信心,而不是反过来,否则结局很可能是“夭折”,离学有所成也就遥遥无期了。
 
D:多跟学的好的过来人学习
 
站在巨人的肩上,才能看的更远。
 
E:不要浪费在工具的不停选择上
 
js的编辑工具很多,如果无从下手,建议使用:sublime,或者使用Hbuilder;很多公司里的技术人员都用这些,你直接用这个也减少了和别人之间的沟通问题。
 
我也是用这个,感觉很好。
 
总结

 
感觉js学起来“杂而乱”的原因是因为你太“聪明”了,一开始就管的太宽,利害得失也计算的太精细。
 
要求太完美则心里承受能力下降,很容易出现“障”。此时,你应该“笨”一些,不要考利那么长远,“傻人有傻福”,只要做好今天就够了。
 
一些不合理的学习方法和心态也让你迷失了自我:如:心浮气躁、眼高手低、好高骛远,这些都会让你在“乱七八糟”的js面前深陷迷雾、不能自拔。
 
此时,你应该重新定位自己的位置,重新去认识js,放下包袱,方能轻松上阵。把杯子先倒空,才能灌新水……
 
其实,js是前端的核心。影响越来越深的互联网+会渴求越来越多的js人才,只有经历过真正刻骨铭心的学习经历,才能造就出赢得未来的真正精英。
 
 
本文转载自分针网

分针网—每日分享: 怎么轻松学习JavaScript的更多相关文章

  1. 分针网—每日分享:HTML解析原理

    标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理   这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了...   以下部分来自hand ...

  2. 分针网——每日分享: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  3. 分针网—IT教育:调皮的JavaScript

    JavaScript是一门有趣的语言,不仅有趣而且调皮,不同的内核的浏览器在解析的时候表现会有些差异,今天主要是抛砖引玉,和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScr ...

  4. 分针网—IT教育:作为PHP开发人员容易忽视的几个重点

    无论是学习什么样的一个开发.ASP开发.java开发.当学习还不是很久的时候,一般都是不知道它们的精华是在哪里,而现在很多的php程序员也是不知道PHP的精华所在,为什么perl在当年在商界如此的出名 ...

  5. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  6. 分针网—IT教育: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  7. 分针网—IT教育: Html / CSS常见问题的解决方案

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  8. 轻松学习 JavaScript——第 6 部分:JavaScript 箭头函数

    JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语 ...

  9. 轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

随机推荐

  1. 最短路径之BF算法+线性规划(图片格式)

  2. 【树莓派】制作树莓派最小镜像:img裁剪瘦身

    制作树莓派镜像,可以参考这篇文章:http://blog.csdn.net/talkxin/article/details/50456282 摘录部分要点内容如下(如果作者不允许转载,请联系即删除): ...

  3. cuda编程学习5——波纹ripple

    /共有DIM×DIM个像素,每个像素对应一个线程dim3 blocks(DIM/16,DIM/16);//2维dim3 threads(16,16);//2维kernel<<<blo ...

  4. redis CONFIG REWRITE介绍

    可用版本为>= 2.8.0 CONFIG REWRITE 命令对启动 Redis 服务器时所指定的 redis.conf 文件进行改写: 因为 CONFIG SET 命令可以对服务器的当前配置进 ...

  5. Unity 3D Framework Designing(4)——设计可复用的SubView和SubViewModel(Part 2)

    在我们设计和开发应用程序时,经常要用到控件.比如开发一个客户端WinForm应用程序时,微软就为我们提供了若干控件,这些控件为我们提供了可被定制的属性和事件.属性可以更改它的外观,比如背景色,标题等, ...

  6. MCMC(二)马尔科夫链

    MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链 MCMC(三)M-H采样和Gibbs采样(待填坑) 在MCMC(一)蒙特卡罗方法中,我们讲到了如何用蒙特卡罗方法来随机模拟求解一些复杂的连续积分或 ...

  7. JAVA-实例方法被覆盖,静态方法被隐藏Explain

    被覆盖比较好理解,类似于多态的实现. 被隐藏是指静态方法的访问是根据当前对象的表面类型来决定的,比如 Supers = new Sub(); s.greeting()访问的是Super的静态方法,如果 ...

  8. 关于ng的路由的几点想法(ui-view)

    在配置路由的时候,我们可以选择ng框架自带的路由,也可以使用第三方路由插件ui-router 注意: (1)在使用angular-ui-router的时候,必须先引入angular-ui-router ...

  9. CSS3学习笔记(4)-CSS3函数

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  10. Grafana中多租户设置

    Grafana中通过设置不同的组织,以及将用户分配到不同组织,来做到多租户,类似门户的概念. Grafana默认是不允许非管理员用户创建新的组织的,这个可以通过修改配置文件以允许非管理员用户创建组织: ...