web前端工做五年了，我来告诉你如何系统的学习如今的JavaScript

1、入门

1：熟悉DIV+CSS布局

使用DIV+CSS布局标准网页，可使前端XHTML代码更少、结构更清晰，这有利于轻松用JavaScript操做DOM

好比，要展现一个3行3列的列表，若是用传统的表格布局，如今要你用JavaScript动态生成这个列表，那么就须要一个循环嵌套

若是采用li结构加CSS浮动布局，一次循环就行了。固然，WEB标准化不是必定不能使用表格，个人意思是结构清晰的XHTML更易于把JavaScript效果或功能整合到项目中。

2：掌握几种开发测试工具

做为一个开发人员，熟悉测试工具是必须的，这有助于提升你发现问题和解决问题的效率，对于特别大的项目更是如此。JavaScript学我推荐用Hbuilder

3.熟悉JavaScript每个方法的做用

这一要求听起来彷佛有点不太实际，我想这个要求对于像C#、JAVA这些大型语言来讲确实是，由于这些语言类库实在太庞大了，相信没有人能够全面记住它，并且也是没有必要所有记住，好比用JAVA作网页与手机开发所关注的类库是不同的。

而JavaScript则不是，它的内置方法函数真的很少，先全面熟悉一下，开发起来也将驾轻就熟，而大部分方法都是JavaSCript框架中用其基本的函数实现的。

好比trim()这个不少语言都有的去行头行尾空格的方法，就是在jQuery中实现的。

再好比，若是你是从其它比较强大的语言转过来玩JavaScript，你又可能认为JavaScript应该有MD5加密的方法，固然这也是没有的，但有人用JavaScript实现了这样的方法，即JavaScript MD5。说到底JavaScript内置方法少的可怜，但不少牛人写了一些新方法增长JavaScript功能，好比prototype框架主要是对JavaScript基础函数进行原型扩展的。

4.了解DOM编程

了解DOM编程算是学习JavaScript过程必须掌握，且比较重要的课程，由于JavaScript除了编写一些纯数据处理的逻辑外，更多的是在动态更改XHTML的结构和内容，以达到界面动态更新的目的，而这些工做都要依赖DOM编程。jQuery框架在这方面封装的至关好，提供了丰富的DOM操做方法，可让你轻松找到页面任何地方的一个DOM节点（XHTML标签），而后进行相关操做（增、删、改、查）。对于有过用其它语言操做XML文档经验的朋友，相信这一块很快上手。

5.接触并使用AJAX

Ajax的优势就是异步交互

AJAX对于用户以及服务器来讲都是有好处的，对于用户，提供更好的用户体验，最典型的一个应用场景：注册页面的用户名可用性预检测，传统的可能会遇到这样的问题：用户填写了一堆资料后提交表单，结果被服务器告知这个用户被注册了，要用户从新填写资料注册，这对于大型多用户网站那是很致命的，由于用户输10个用户名可能有一半已被使用了。对于服务器来讲，减小网页流量，由于AJAX后，通常是按需加载数据的，不会由于局部更新而从新加载整个页面。好比一个网页占三屏高，咱们能够默认只加载第一屏的内容，当用户拉动滚动条往下的时候，再加载二三屏的内容。另外像WEB在线地图应用也是AJAX使用的典范。

2、提升

1. 深刻理解JavaScript this关键字

JavaScript this的做用与指向跟不少真正面向对象的开发语言是有很大差异的，它不始终指向当前对象，是会变化的。若是不注意这个问题，就有可能遇到看似没错的代码报错或不执行等问题。

2.学习JavaScript OOP编程

OOP是个好东西，它使程序员思考问题更有组织性，代码的组织也更清晰。JavaScript 也能够OOP，但与一些传统的OOP语言一样存在较大差异，因此要真正用熟JavaScript OOP也是须要下点功夫的。

3.了解闭包

JavaScript闭包也是被谈得比较多的一个话题，闭包使JavaScript变量做用域变得复杂起来，但这一特性又使这门语言变的更灵活了。

4.学习规范开发

团队精神相信你们是听过很多了，就任一个公司作开发，固然离不开团队，团队要想合做愉快，每一个成员的编码必需符合必定规范，这也是每一个公司对程序员的基本要求。关于规范一般指变量命名、文件组织、注释规范等，这方面知识与其它语言的规范是有相通性的。

5.找本算法的书读一读

我认为学会并使用一门语言并非什么难事，难的应该是用语言这基本的语法与语句去解决一些复杂的问题。要解决一些复杂的问题，可能会用上一些算法，有些算法实现多是一个团队在作的，好比中科院中文分词的具体实现，另外像游戏经常使用自动寻径A*算法等。也许你认为你不可能在JavaScript开发上遇到这么复杂的问题，其实这还要看你在作什么项目，若是你是在开发大型网页游戏，一般面临更多具备挑战性的难题，若是你有读过一些算法书籍，了解一些常见问题的解决方法，在开发过程当中天然会如虎添翼。另外，熟悉算法显然对于你往后接触其它开发语言也是有帮助的。

3、习惯

1. 兼容、BUG问题作好笔记

CSS与JavaScript浏览器兼容问题最好作好笔记，由于这些问题，或者说BUG是比较诡异的，这些问题浏览器不会提示你错在哪里，IDE也不会提示你，特别是CSS兼容问题，这就会致使你在开发过程碰到这样的问题会卡老半天得不到解决。即便以前解决过同类问题，之后可能又会碰上，结果以前没有作好笔记增强记忆，注定你要再受罪一次，由于这些兼容问题不是一两个，临时记忆效果是不明显的。以我经验，不少问题是在IE6下发生的，如今IE6连微软本身都但愿加速它灭亡，这对于前端开发的咱们来讲固然是一个好消息。

2.阅读优秀的代码，好比jQuery

阅读优秀代码绝对也是自我提升的好方法，这不只能够了解优秀代码的组织规范，更能够了解一些功能的实现思路。好比jQuery就是一个很是值的学习的JavaScript框架。固然了，要阅读这样专业的JavaScript框架，JavaScript基础要扎实，否则看的过程当中会遇到太多疑问，甚至对本身的信心也是一种打击。

注意

1. 在JavaScript入门以前避免直接使用JavaScript框架作开发

若是你没有任何JavaScript基础，请不要直接使用JavaScript框架作开发，我认为这可能会误导你对一门语言的认识，好比你直接使用了jQuery用点连起来的语句写法，你是否会认为这是JavaScript语法的一种呢？再好比你使了prototype你不要把框架扩展后的基类方法认为是JavaScript内置的。我认为JavaScript框架是用来提升效率的，它绝对不是JavaScript入门应该学习的。

2.网上找的不少例子可能不是跨浏览器兼容的

有不少JavaScript效果源码是N年前某网友写的，N年前是IE的天下，因而一些前端懒得解决脚本跨浏览器兼容问题，使写出来的脚本只适用于IE。当你获得这样的一段代码，请不要说垃圾，也不要为此发牢骚，由于这些代码并非没有一点价值的，若是你了解JavaScript跨浏览器兼容问题，相信你能够很轻松经过少需修改使代码有更好的兼容性。

 

web前端/H5/javascript学习群：250777811

欢迎你们关注个人微信号公众号，公众号名称：web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧（长按下面的二维码图片、并选择识别图中的二维码）