浅谈JavaScript编程语言的编码规范(3)

作者:王丹丹 来源:IBM 时间:2010-08-18 12:08:00 

清单 4. 内部函数声明

<script language="javascript"> 
 var innerA = 1; 
 function outF() { 
   var innerA = 2; 
   function _inF() { 
       alert("valueA="+innerA); 
   } 
   _inF(); 
 } 
 outF();                         //output: valueA=2 
 _inF();                         //error: innerF is not defined 
 </script> 

从清单 4 的输出可以看出,inF() 函数仅在 outF() 函数的内部生效,局部变量 innerA 对内部函数的作用域生效。这样的编码方式使得变量和函数的作用域变得清晰。

语句

对于简单语句而言,需要提及的仍然是分号必要性,同时,一行最多有一个语句。如果一个赋值语句是用函数和对象来赋值,可能需要跨多行,一定切记要在赋值语句末加上分号。

这是因为 JavaScript 中,所有表达式都可以当语句,遇换行符时会解析为表达式的结束,此时不规范的换行和分号的丢失,可能引入新的错误。

对于复合语句,if, for, while, do, switch, try … catch 等代码体,函数定义的函数体,对象的定义等都需要放在花括号'{}'里面。

  • '{' 应在行末,标志代码块的开始。

  • '}' 应在一行开头,标志代码块的结束,同时需要和'{'所在行的开始对齐,以表明一个完整的复合语句段。这样可以极大地提高代码的可阅读性,控制逻辑能清晰地表现出来。

  • 被包含的代码段应该再缩进 4 个空格。

  • 即使被包含的代码段只有一句,也应该用花括号'{}'包含。尽管不用花括号代码也不会错,但如若需要增加语句的话,则较容易因花括号遗漏而引起的编译错误或逻辑错误。

return语句在使用时也需慎重,如果用表达式的执行作为返回值,请把表达式和 return 放在同一行中,以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式,则返回 undefined。构造器的默认返回值为 this。

清单 5. return 表达式


 

在清单 5 中显示了因返回表达式没有和 return 关键字放在同一行而引起的返回错误,需重视。

特殊符号

空白符

适当的空白行可以大大提高代码的可阅读性,可以使代码逻辑更清晰易懂。同时,在表达式中适当的留空白,也会给代码的阅读带来方便。

关键字的后面如有括号,则最好在关键字和左括号'('之间留空白,如 for, if, while 等。而函数名和括号之间则不宜留空白,但若是匿名函数,则必须在 function 和左括号'('之间留空白,否则,编辑器会误认为函数名为 function。

在表达式中,二元运算符 ( 除左括号'(',左方括号'[',作用域点'.') 和两个操作数之间最好留空白。一元运算符(若不是词 typeof 等)和其操作数之间不宜留空白。

逗号','的后面需要留空白,以显示明确的参数间隔,变量间隔等。

分号';'之后通常表明表达语句的结束,而应空行。在 for 的条件语句中,分号之后则应该留空白。

{ } 和 [ ]

在 JavaScript 中,如需定义空对象和空数组,通常很自然地想到用 new Object() 和 new Array() 的方法。其实花括号'{}'和方括号'[]'可以直接用来定义一个空对象和一个空数组。这种书写方法可以使代码看起来简单易懂。

== 和 ===

判断"逻辑等"在代码里太平常的不过事情了,但 JavaScript 与其他熟知的编程语言不同的是,除了可以使用两个等号'=='来作判断以为,还可以使用三个等号'==='来进行逻辑等判断。两者的不同是'=='作逻辑等判断时,会先进行类型转换后再进行比较。'==='则不会。因而,'=='进行的判断结果可能产生偏差。'!='与'!=='的区别亦是如此。本文提倡尽量使用'==='来进行逻辑等的判断,用'!=='进行逻辑不等的判断。

清单 6. === 的使用

<script language="javascript"> 
 var valueA = "1"; 
 var valueB = 1; 
 if ( valueA == valueB) { 
   alert("Equal"); 
 } 
 else { 
   alert("Not equal") 
 } 
 //output: "Equal"
 if ( valueA === valueB) { 
   alert("Equal"); 
 } 
 else { 
   alert("Not equal") 
 } 
 //output: "Not equal"
 </script> 

清单 6 中,valueA 和 valueB 两个变量的值显然是不相等的,起码 valueA 是个字符串,而 valueB 是一个数字。但用'=='进行判断是,程序却输出相等的字样。这是因为编译器对两个变量进行比较时,因为他们的类型不同,而自动地将 valueB 转换成字符串,而后再和 valueA 进行比较的。用'==='得到的判断结果正和预期的结果相符。

+

加号'+'也同样是程序员所熟知的操作符之一。JavaScript 和其他编程语言不同的是,在 JavaScript 中,'+'除了表示数字值相加,字符串相连接以外,还可以作一元运算符用,把字符串转换为数字。因而如果使用不当,则可能与自增符'++'混淆而引起计算错误。这一点,在清单 7 中可以清楚地看出。

清单 7. 巧用 + 号

<script language="javascript"> 
 var valueA = 20; 
 var valueB = "10"; 
 alert( valueA + valueB);     //ouput: 2010 
 alert( valueA + (+valueB)); //output: 30 
 alert( valueA + +valueB);    //output:30 
 alert( valueA ++valueB);     //Compile error 
 </script> 

总结

本文就 JavaScript 代码的排版、命名、声明、语句、和一些特殊字符的使用等方面,谈了自己对 JavaScript 编程规范的建议。此外,还有许多方面需要深入了解研究,如 with, eval 语句和 this 对象的使用等等。我们在认识其普遍性的同时也需要注意其特殊性,在编写代码时多用心留意,以创造更多更优质的程序代码。


 

<script language="javascript"> 
 function F1() { 
   var valueA  = 1; 
   var valueB  = 2; 
   return valueA + valueB; 
 } 
 function F2() { 
   var valueA  = 1; 
   var valueB  = 2; 
   return 
       valueA + valueB; 
 } 
 alert( F1() );  //output: 3 
 alert( F2() );  //ouput: undefined 
 </script> 
<script language="javascript"> 
 var valueA  = "a"; 
 var valueB  = "b"; 
 function f1() { 
   var valueA = "c"; 
   alert("valueA="+valueA);        //output: valueA=c 
   valueB = "d"; 
   alert("valueB="+valueB);        //output: valueB=d 
 } 
 f1(); 
 alert("valueA="+valueA);            //output: valueA=a 
 alert("valueB="+valueB);            //output: valueB=d 
 </script> 
<script language="javascript"> 
 //following section is used to initialize golbal variables             (good) 
 var valueA = 0;     //initialize  valueA to be sero                       (bad) 
 var valueB = 1; 
 ... 
 //call f1 function after waiting for 50 seconds.                         (good) 
 setTimeout(f1,50000); //set timeout to be 20s                     (copy error) 
 ... 
 </script> 
<script language="javascript"> 
 var valueA = 1; 
 var valueB = valueA         ///bad 
       +1; 
 var valueC = valueB +      ///good 
       valueA; 
 alert(valueB);              //output: valueB=2 
 alert(valueC);//output: valueC=3 
 </script> 

转载:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608

标签:javascript,编程,编码
0
投稿

猜你喜欢

  • Django Auth用户认证组件实现代码

    2022-05-02 18:06:01
  • Dreamweaver MX技巧之超链接

    2009-05-29 18:40:00
  • python基础之定义类和对象详解

    2023-06-15 05:35:12
  • Go语言TCP从原理到代码实现详解

    2024-02-21 17:11:29
  • python读取dicom图像示例(SimpleITK和dicom包实现)

    2023-07-06 14:08:10
  • 主流浏览器性能比较

    2009-10-19 14:34:00
  • 深入浅析Python数据分析的过程记录

    2022-05-04 02:56:27
  • 分享20个数据库设计的最佳实践

    2024-01-24 09:28:53
  • tensorflow 1.X迁移至tensorflow2 的代码写法

    2023-07-19 08:30:54
  • Go并发控制WaitGroup的使用场景分析

    2024-04-23 09:36:30
  • Django修改端口号与地址的三种方式

    2023-06-22 00:48:27
  • python3爬虫怎样构建请求header

    2023-04-17 19:01:45
  • 30个出色的分页设计

    2009-05-12 17:49:00
  • Python求解排列中的逆序数个数实例

    2021-07-28 15:17:27
  • MySQL 原理与优化之Limit 查询优化

    2024-01-15 04:44:26
  • Python Pygame实现落球游戏详解

    2021-06-23 00:54:38
  • 详解JavaScript中的Object.is()与"==="运算符总结

    2024-04-22 12:50:25
  • JS原型继承四步曲及原型继承图一览

    2024-06-13 14:56:04
  • CMD命令操作MSSQL2005数据库(命令整理)

    2024-01-21 11:14:49
  • 浅谈golang并发操作变量安全的问题

    2024-04-26 17:22:23
  • asp之家 网络编程 m.aspxhome.com