如何编写高质量的Javascript代码

一、如何编写高质量的Javascript代码

1、避免全局变量，因为全局变量容易发生名称上的冲突，可维护性不好。

扩展原型的构造函数，可以提供一些很强大的功能，但是有时候他太强大了。

有时候你会去扩展Object(),Array(),Fucntion()的原型方法，这样会导致可维护性的问题，因为这会让你的代码的移植性变差。其他的开发人员使用你的代码的时候，可能只需要原生的方法，并不需要额外的功能。

另外，你添加进去的方法，如果在循环的时候没有使用hasOwnProperty方法就会被遍历出来，这会让人很迷惑。

所以，最好还是不要扩展基本的对象。除非是下面的情况：

a.你确定在将来根据ECMAScript规范，浏览器会添加相应的原型方法，那么是可以的，你只不过是提前实现了这个功能。

b.你确定的你要实现的方法不存在–或许有时候在代码的其他的地方实现了，或者有的浏览器支持，这都是不行的。

c.有非常清晰的文档，并且与团队成员沟通过

Javascript在你比较两个变量的时候会进行类型的转换，这就是为什么 false== 0或者”"== 0会返回true。

为了避免这种隐藏的类型转换带来的迷惑，最好使用===或者!==操作符来比较：

如果在你的代码中使用eval()，那么要记住”eval() is evil”。这个方法会将传入的字符串当做js代码来执行。如果代码是在运行前就确定的，那么没有必要使用eval()。如果代码是在运行时动态确定的，那么也有其他更安全的办法。例如使用方括号形式访问元素的属性：

alert(eval("obj."+ property));

使用eval()还有安全问题，比如运行网络上的一段代码，而这段代码又被别人篡改了。在处理Ajax请求返回的JSON数据的时候，最好还是使用浏览器内建的处理方法，如果对于低端的浏览器不支持的，可以从JSON.org上下载对应的处理库。

使用parseInt()你可以将字符串转为数字。这个方法支持第二个表示进制的参数，常常被忽略。问题常常在处理一段以0开始的字符串的时候。在ECMAS3标准中，以0开始表示八进制，但是在ES5中又改了，所以为了避免麻烦，最好还是标明第二个参数。

编码的时候遵循一定的规范，可以让代码增强可移植性，并且更加便于阅读和理解。加入团队的新人，在阅读了代码规范之后，可以更加快速的溶入团队，并理解其他人员开发的代码。

代码如果没有缩进，那基本上没法阅读了。比这更糟的是不规范的缩进，看着好像缩进了，但是乱七八糟摸不着头脑。所以缩进的使用必须规范。团队遵循统一的规范

应该使用大括号，尤其在那些可用可不用的地方，如果你的if语句或者for循环只有一句话，那么大括号不是必须的，但是这种时候最好用大括号。这可以让代码保持一致，并且便于升级。

可以提高代码移植性和可维护性的一个方面是命名规范。也就是说，在取变量名的时候总是采取一贯的做法。

必须给代码写注释，就算它看起来不会被别人接手。有时候，研究完一个问题，然后你看着代码觉得那是显而易见的，但是过一两周之后回头再看，你也会摸不着头脑的。

二、如何系统地学习 JavaScript

1、自从AJAX开始流行后，人们发现利用JavaScript可以给用户带来更好的体验，甚至利用这一优点开发了大型网页游戏，于是这门小语言被重视了起来。现在，很多公司会招专门的JavaScript工程师，通常JavaScript是WEB前端开发的必备技能。简单介绍了JavaScriptr的好处，并不代表大家就会去学习甚至把它学好，兴趣是很关键的，我认为兴趣是最好的老师，它是你专心做一件事并把它做好的动力。另外，大家要相信小语言有大作为，我就曾用Greasemonkey写过一些非常实用的工具，比如你可以用JavaScript+Greasemonkey写在线网页游戏的外挂程序。下面说说本人学习JavaScript的历程和心得吧。

2、使用DIV+CSS布局标准网页，可以使前端XHTML代码更少、结构更清晰，这有利于轻松用JavaScript操作DOM，比如，要展示一个3行3列的列表，如果用传统的表格布局，现在要你用JavaScript动态生成这个列表，那么就需要一个循环嵌套，如果采用li结构加CSS浮动布局，一次循环就好了。当然，WEB标准化不是一定不能使用表格，我的意思是结构清晰的XHTML更易于把JavaScript效果或功能整合到项目中。

3、作为一个开发人员，熟悉测试工具是必须的，这有助于提高你发现问题和解决问题的效率，对于特别大的项目更是如此。JavaScript和XHTML开发测试利器我就先推荐两个最常用的，它们是：Web Developer和Firebug。

4、熟悉JavaScript每一个方法的作用

5、这一要求听起来似乎有点不太实际，我想这个要求对于像C#、JAVA这些大型语言来说确实是，因为这些语言类库实在太庞大了，相信没有人可以全面记住它，而且也是没有必要全部记住，比如用JAVA做网页与手机开发所关注的类库是不一样的。而JavaScript则不是，它的内置方法函数真的不多，先全面熟悉一下，开发起来也将得心应手，比如，你一开始可能认为JavaScript有trim()这个很多语言都有的去行头行尾空格的方法，当你了解JavaScript内置函数库后你会发现原来在JavaScript中这些方法是要自己去实现。再比如，如果你是从其它比较强大的语言转过来玩JavaScript，你又可能认为JavaScript应该有MD5加密的方法，当然这也是没有的，但有人用JavaScript实现了这样的方法，即JavaScript MD5。说到底JavaScript内置方法少的可怜，但很多牛人写了一些新方法增加JavaScript功能，比如prototype框架主要是对JavaScript基础函数进行原型扩展的。

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

7、在今天，学习了JavaScript而不使用AJAX，那是埋没JavaScript优势了（AJAX本身并不能算是JavaScript内容）。AJAX对于用户以及服务器来说都是有好处的，对于用户，提供更好的用户体验，最典型的一个应用场景：注册页面的用户名可用性预检测，传统的可能会遇到这样的问题：用户填写了一堆资料后提交表单，结果被服务器告知这个用户被注册了，要用户重新填写资料注册，这对于大型多用户网站那是很致命的，因为用户输10个用户名可能有一半已被使用了。对于服务器来说，减少网页流量，因为AJAX后，一般是按需加载数据的，不会因为局部更新而重新加载整个页面。比如一个网页占三屏高，我们可以默认只加载第一屏的内容，当用户拉动滚动条往下的时候，再加载二三屏的内容。另外像WEB在线地图应用也是AJAX使用的典范。

8、提高深入理解JavaScript this关键字

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

10、OOP是个好东西，它使程序员思考问题更有组织性，代码的组织也更清晰。JavaScript也可以OOP，但与一些传统的OOP语言同样存在较大差别，所以要真正用熟JavaScript OOP也是需要下点功夫的。

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

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

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

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

15、阅读优秀代码绝对也是自我提高的好方法，这不仅可以了解优秀代码的组织规范，更可以了解一些功能的实现思路。比如jQuery就是一个非常值的学习的JavaScript框架。当然了，要阅读这样专业的JavaScript框架，JavaScript基础要扎实，不然看的过程中会遇到太多疑问，甚至对自己的信心也是一种打击。

16、注意在JavaScript入门之前避免直接使用JavaScript框架做开发

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

18、网上找的很多例子可能不是跨浏览器兼容的

19、有很多JavaScript效果源码是N年前某网友写的，N年前是IE的天下，于是一些前端懒得解决脚本跨浏览器兼容问题，使写出来的脚本只适用于IE。

三、如何写好JavaScript

在实际工作中，我们应该经常会看到一些功能上没有问题，但编码风格和规范却十分糟糕的代码，这往往会让人不敢再往下阅读，甚至会影响阅读者一天的心情。这些代码不仅不易阅读，而且难以维护，它们一般会出自刚入门的编程新手，也会出自工作了好几年的老程序员手下。因此本文的目的在于帮助那些没有养成良好的编码风格，缺乏相应编码规范意识的JavaScript学习者们改善他们的编码形象。

以上我提出了编码形象的概念，我个人认为：

一个良好的编码形象就等于一个穿着得体的青年，对于程序员来说这是同行了解你优秀能力的最直接最简单的方式。

我们来看一下一段糟糕的编码形象：

var age=18,sex='man';

var greeting='hello';

if(age<=18&&sex=='man'){

console.log(greeting+'little boy')

上方代码整体缩在了一起，缺乏规范意识，阅读体验很差，不忍直视。

if(age<= 18&& sex==='man'){

console.log(greeting+'little boy');

上方的代码是不是感觉舒服多了？

由此可见养成一个良好的编码形象是至关重要的，而本文主要讲解的是基于JavaScript的编码形象，即基于JavaScript的编码风格和编码规范。

那么什么是编码风格，什么是编码规范，两者的区别又是什么？

首先编码风格既然是风格，就没有对错之分。就好比每个人的穿着打扮不同，有的人穿的比较得体，有的人穿的比较随意而已。

而在JavaScript编码风格中，也有一套比较得体的风格，尤其在团队开发中，我们不能随意的书写属于自己的风格。

下面就列举几种随意的编码风格，并将其与良好的编码风格进行对比。

var name='劳卜';//代码和注释之间没有间隔

var name='劳卜';//代码和注释之间有间隔

var name='劳卜';//等号和两侧之间没有间隔

console.log('hello');

var name='劳卜';//等号和两侧之间有间隔

console.log('hello');

3.合理缩进//不推荐的写法：没有合理缩进

4.合理空行//不推荐的写法:代码功能块之间没有空行

console.log('hello');

}//推荐的写法：代码功能块之间有空行

console.log('hello');

var getName='劳卜';//变量命名前缀为动词

console.log('hello');

var name='劳卜';//变量命名前缀为名词

console.log('hello');

6.合理声明//不推荐的写法：函数在声明之前使用

console.log('hello');

}//推荐的写法：函数在声明之后使用

console.log('hello');

7.合理结尾//不推荐的写法：没有使用分号结尾

console.log('hello');

以上主要列举了7个比较常见的编码风格的例子进行了比较，在推荐的写法和不推荐的写法中两者并没有对错之分，只是推荐的写法相比较而言更容易阅读和维护，更适用于团队开发，也是良好编码形象的体现。

对于编码规范，既然是规范，那我们就应该按照一定的规则来编写。随意编写违反编码规范的代码，可能会导致程序的出错和潜在的bug，因此其相对于编码风格来说应该更加严谨，也有人会把编码风格包含在编码规范之中。

下面就列举几个常见的实例代码：

1.比较参数//不推荐的写法：==和!=比较时会进行类型转换，应尽量避免使用

} else if(num!='321'){

}//推荐的写法：使用===和!==来进行比较

} else if(num!=='321'){

2.包裹if语句//不推荐的写法：if语句不用大话号包裹会出现潜在bug

console.log(num);//推荐的写法：if语句用大话号包裹

3.慎用eval//不推荐的写法：应避免使用eval，不安全，非常耗性能（一次解析成js语句，一次执行）

var json='{"name":"劳卜","func": alert("hello")}';

eval('('+ json+')');//弹出“hello”//推荐的写法

var json='{"name":"劳卜","func": alert("hello")}';

4.判断类型//不推荐的写法：用typeof来判断构造函数创建的对象

var str= new String('劳卜');

console.log(typeof str);//'object'//推荐的写法：用instanceof来判断构造函数创建的对象

var str= new String('劳卜');

console.log(str instanceof String);// true

5.检测属性//不推荐的写法：使用undefined和null来检测一个属性是否存在

if(obj['name']!== undefined){

console.log('name属性存在');//若obj.name为undefined时则会导致判断出错

if(obj['name']!== null){

console.log('name属性存在');//若obj.name为null时则会导致判断出错

}//推荐的写法：使用in运算符来检测对象属性是否存在，使用hasOwnProperty方法来检测不包含原型链上的对象属性是否存在

console.log('name属性存在');

if(obj.hasOwnProperty('name')){

console.log('name属性存在');

以上主要列举了5个常见的编码规范的例子，合理地规范自己的代码能够很大程度上减少不必要的维护成本和潜在的bug风险，对于JavaScript学习者来说应该铭记于心。

“程序是写给人读的，只是偶尔让计算机执行一下。”我们不能为了贪图一时的方便而亲手毁了自己的代码形象，这会给他人和整个项目带来不必要的麻烦。

本文内容参考自《编写可维护的JavaScript》一书。