看了这,迫切想知道如何提高我的JS编程能力

JavaScript011

看了这,迫切想知道如何提高我的JS编程能力,第1张

1,学习js分几个阶段,没入门,入门初学者,中级水平,高级水平,ppt水平。

2,没入门的如何学习?

我当初是先学jquery,有css和html基础,有css基础看jq的语法很简单,就是选择符,jq的api懂高中英语就够了,猜也猜的出来意思,然后下载基本jq的chm手册,对着挨个看一遍。(这个挨个看一遍的意思就是一行一句的逐个看一遍,看不懂的别死扣,先看完再说)。

看完一遍之后,心中有数,哦,原来有个ajax函数可以访问网络资源,有个success可以写回调方法,超时怎么办?几个一起同时发怎么办?不管了,用到再说。哦,原来有个find函数可以查找dom节点,哦,原来有个serialize函数可以序列化表单值,哦,原来有个toggle函数可以做切换用,哦,有个fn可以挂着写插件用,哦,切换cls这样做就行了,哦,请求json数据这样配置参数就可以了。

做到了解,你就成功了,用到的时候知道jq能干什么,不能干什么,干什么的时候去看哪一章,再去仔细研究,做东西开始有点慢,做起来几个东西之后就手熟了。

同理,我学习yui2,kissy,mootools,nodejs,react,ng,甚至swift部分也是这样对着手册来的,反复几遍就可以了。

入门的意思就是概括一下,我知道有哪些api能干什么,具体怎么干,用的时候再说。

2,入门初学者。

我看完手册了,也写了几个小项目了(切换切换class,套几个jq插件,ajax取完数据又html放到指定位置了类似这种需求)。我感觉我可牛逼啦,终于会写交互js啦,感觉什么都不怕啦,其实就是刚入门而已。

我们来看看入门初学者怎么提升js编程技巧,个人经验,切勿照搬模仿,我们会使用框架工具库完成简单需求的同时,我们无法理解一些复杂功能的开发原理。比如一个简单的放大镜特效,一个裁切头像大小的功能,一个轮播组件,一个搜索智能提示,一个at圈人功能,甚至一个回到顶部的fixed按钮,或者输入框计数,表单验证组件,动态表格,长连接聊天功能,浮出层,移动端的swiper,动画函数,选择器,字符串模板,富文本编辑器?太多啦?一点也不多,我还没说全呢,几乎所有你在网页里见到的一些现成交互,其实有个学名,慢慢看,挨个写一遍,两遍,三遍,先不谈封装成组件,api是否优美,就说能不能写出来,刚入门的人一定say no。

说白了,经验的积累是前端开发非常重要的一条,有些东西你没写过你还真就是不会写,或者你知道怎么写,但是你没写过也别轻易说自己会,因为兼容问题,很多东西细节上你还是没有体会。所以,我第一次工作写一个头像裁切功能,我想了好多个夜晚,也没弄明白原理,查了好多文章,又写了许多demo,最后还是做了出来,但是会有一些极限情况下的bug?一个组件一个组件的撸,一遍又一遍的撸,是初学者最好的提升方法。

等你做到基本网页里任何一个功能看一眼就知道怎么写或者都亲自写过的时候(不是demo级别,是上线级别),你就已经不是初学者了,大概这个速度快也要1年左右时间,这也就是为什么一些功能招聘都要3年以上的原因了,经验包的积累不是看几本书就搞的定的。

3,中级水平。

你发现你在编写javascript功能时已经没什么好怕的东西了,也就是说,衡量一个需求时,你从来不会说no,而只是预估时间的时候,基本就已经达到中级水平了,这个时候你明确的知道自己在写的是什么,也能读懂别人写的是什么,而且拥有了一些自己平时积累所写得插件,组件,并封装的好好的,那么,就完美了么?你发现你遇到了瓶颈,不知道如何提高自己了,打开了知乎,可能问下了这个问题:《如何提高javascript编程高级技巧》

这个时候你需要往高级一步了,你可能熟练使用jq或者某一框架,基于某些框架二次开发了非常炫酷的插件组件,并且了解了设计模式,一些高大上的名词,业务需求无法满足你,自动化工具grunt和gulp用的妥妥的,总之,很多事情在你眼里自己无所不能,哎呀我操,为什么呢,我是不是凯瑞了全场?

这个时候,你需要的是开始思考,从最开头开始撸你的东西了,比如我们往往喜欢使用jq或者zepto,我们的插件往往是基于他们或者说我们的经验都是在某一个领域框架下实现的,回过头来看,这些东西真的好吗,他们是如何实现的?为什么要这样设计,一个超过5000行的抽象类怎么组织,设计模式你真的理解吗,js的奇淫技巧你会几样,有没有见过一些根本看不懂的js代码,那些大牛们到底在说什么呀,es6的api到底有多少个呀,那些新手都看得懂jq(真的懂?),为毛自己写不出来?grunt到底是怎么运行的啊,v8的源码是什么样的啊,测试用例是什么鬼啊?

很多时候,我在读一个库的源码时,在看devDependencies的时候,意外又发现了数个不懂的东西,有时候见到一段代码会会心一笑,有时候又会大喊卧槽,从感觉自己什么都知道,到感觉自己什么都不知道,可能就是你突破瓶颈的时候了。

4,高级水平。

我们公司也有高级工程师的技术序列要求,我刚好评过,基本考察点都不在你如何实现一个技术细节了,而是考察你如何从0到1的这个过程,以及可能涉及到2,3,4的预判能力。还有就是在业界都在传一些东西很好很强大的时候,你已经可以把他转换为实际的生产力了,能发现一些好的东西里面不足的地方,并能自己改进,永远不满足,不崇拜大牛,因为自己就是大牛。说白了,你写的东西要能让很多人解决一些经常解决不了的问题,比如怎么能让你的系统更快,依赖更少,代码更小,开发起来更爽,新人如何更好的上手,api设计的美不美,实现的每一行代码都精雕细琢,review别人得东西总能提出自己的看法,总之,Legendary啦!

页面要想实现好的互动性Java是必不可少的,特别是在一些网站专题页面对于互动性要求更高,中级和高级web前端工程师js是必须要掌握的,下面为大家详细介绍一下Java。

虽然仍有一些人对 Java 的批评特别是对Java 用于后端任务心存疑虑,但这些并不妨碍Java成为广泛用于客户端的语言,成为前端开发必不可缺少的工具。Java和html一样都是客户端(浏览器执行)的语言,通常Java脚本是通过嵌入在HTML中来实现功能的。

下面为大家介绍java的特点:

1、java是一种解释性脚本语言不进行预编译,而c、c++等编程语言都是先编译后执行,java是逐行解释运行的。

2、基于对象的语言,它不仅可以创建对象,也能使用现有的对象。

3、以嵌入HTML页面,也可写成单独的js文件。

4、多平台运行,在大部分浏览器浏览器的支持下,可以在多种平台下运行比如Android、iOS等。

那么,怎么才能在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个月可能学会的,它们硬是能折腾你两年......

书籍推荐(仅供参考)

《Java DOM编程艺术》

《Java权威指南》

《java DOM高级程序设计》

《Java设计模式》

《锋利的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人才,只有经历过真正刻骨铭心的学习经历,才能造就出赢得未来的真正精英。

一、 让代码简洁:一些简略的表达方式也会产生很好的优化\x0d\x0aeg:x=x+1在不影响功能的情况下可以简写为x++\x0d\x0a二、 变量名方法名尽量在不影响语意的情况下简单。(可以选择首字母命名)\x0d\x0aeg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength。\x0d\x0a三、 关于JS的循环,循环是一种常用的流程控制。\x0d\x0aJS提供了三种循环:for()、while()、for(in)。在这三种循环中for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for()、while()循环的性能基本持平。当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或_运算符。\x0d\x0a四、 如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中,避免多次查询数组长度。\x0d\x0a因为我们常常要根据字符串、数组的长度进行循环,而通常这个长度是不变的,比如每次查询a.length,就要额外进行一个操作,而预先把var len=a.length,则就少了一次查询。\x0d\x0a五、 尽量选用局部变量而不是全局变量。\x0d\x0a局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成员,而局部变量是放在函数的栈里的。\x0d\x0a六、 尽量少使用eval。\x0d\x0a每次使用eval需要消耗大量时间,这时候使用JS所支持的闭包可以实现函数模板。\x0d\x0a七、 减少对象查找\x0d\x0a因为JavaScript的解释性,所以a.b.c.d.e,需要进行至少4次查询操作,先检查a再检查a中的b,再检查b中的c,如此往下。所以如果这样的表达式重复出现,只要可能,应该尽量少出现这样的表达式,可以利用局部变量,把它放入一个临时的地方进行查询。\x0d\x0a八、 字符串连接。\x0d\x0a如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。\x0d\x0a如果要连接多个字符串,应该少使用+=,如s+=as+=bs+=c应该写成s+=a + b + c;\x0d\x0a而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下\x0d\x0avar buf = new Array()for(var i = 0i String() >.toString() >new String() \x0d\x0a尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。\x0d\x0aString()属于内部函数,所以速度很快,而.toString()要查询原型中的函数,所以速度逊色一些,new String()用于返回一个精确的副本。\x0d\x0a2. 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用的时间,速度是最快的。\x0d\x0a3. 对于自定义的对象,如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高\x0d\x0a十、 尽量作用JSON格式来创建对象,而不是var obj=new Object()方法。\x0d\x0a因为前者是直接复制,而后者需要调用构造器,因而前者的性能更好。\x0d\x0a十一、 当需要使用数组时,也尽量使用JSON格式的语法,\x0d\x0a使用JSON格式的语法即直接使用如下语法定义数组:[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。\x0d\x0a十二、 对字符串进行循环操作,例如替换、查找,就使用正则表达式。\x0d\x0a因为JS的循环速度比较慢,而正则表达式的操作是用C写成的API,性能比较好。\x0d\x0a十三、 插入HTML\x0d\x0a很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个div或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。\x0d\x0a十四、 对象查询\x0d\x0a使用[“”]查询要比.items()更快\x0d\x0a十五、 定时器\x0d\x0a如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval。setTimeout每次要重新设置一个定时器。\x0d\x0a十六、 尽量减少DOM调用\x0d\x0a在Web开发中,JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的,因为这会导致浏览器执行回流 (reflow)操作。我们应该尽可能的减少DOM操作。