知识大全 JavaScript脚本编写规范

Posted 2022-07-20 函数

篇首语：我们要像海绵一样吸收有用的知识。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 JavaScript脚本编写规范相关的知识，希望对你有一定的参考价值。

JavaScript脚本编写规范 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　对于熟悉 C/C++ 或 Java 语言的工程师来说 JavaScript 显得灵活简单易懂对代码的格式的要求也相对松散很容易学习并运用到自己的代码中也正因为这样 JavaScript 的编码规范也往往被轻视开发过程中修修补补最终也就演变成为后续维护人员的恶梦软件存在的长期价值直接与编码的质量成比例编码规范能帮助我们降低编程中不必要的麻烦而 JavaScript 代码是直接发送给客户浏览器的直接与客户见面编码的质量更应该受到关注本文浅谈 JavaScript 编程中关于编码规范的问题分析其中缘由希望引起更多 Web 开发人员对 JavaScript 编码规范问题的关注和对软件产品质量问题的重视前言提及 C/C++ 和 Java 编码规范相信许多工程师并不生疏但说到 JavaScript 语言的编码规范也许您会忍俊不禁 JavaScript 不是语法很灵活吗？变量随时用随时可以声明语句结束符可以不要字符串和数字也可以相加参数多一个少一个也不会报错没错当您从 C/C++ 和 Java 严格的语法规定之下转向 JavaScript 语言会觉得自由了很多轻松了很多语法松散是 JavaScript 重要的特征它灵活易懂给开发人员带来了很多方便但如果编写过程中不注意代码的调试成本和维护成本则会无形地增加 JavaScript 编码会随应被直接发送到客户端的浏览器代码规范不只是代码质量的保证也影响到产品的长期信誉希望 JavaScript 编程语言的规范问题也能同样引起更多朋友的关注 JavaScript 编码规范建议本文就 JavaScript 编码过程中涉及的排版命名声明作用域及一些特殊符号的使用等方面根据个人在学习工作中的总结给出自己的一些建议并分析其中缘由以供参考 JavaScript 文件引用 JavaScript 程序应该尽量放在 js 的文件中需要调用的时候在 HTML 中以 <script src="filename js"> 的形式包含进来 JavaScript 代码若不是该 HTML 文件所专用的则应尽量避免在 HTML 文件中直接编写 JavaScript 代码因为这样会大大增加 HTML 文件的大小无益于代码的压缩和缓存的使用另外 <script src="filename js"> 标签应尽量放在文件的后面这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间代码排版行长度每行代码应小于个字符如果代码较长应尽量选择换行下一行代码应缩进个空格这样可以使代码排版整齐减轻阅读代码的疲劳感换行缩进个空格可以和代码段的缩进个空格区分开以增强代码的可阅读性行结束 JavaScript 语句应该以分号结束但大多数浏览器允许不写分号只要在本应是分号的地方有一个换行符就行但是如果代码行较长需要换行的时候有哪些注意事项呢？换行应选择在操作符和标点符号之后最好是在逗号’ ’之后而不要在变量名字符串数字或’)’ ’]’ ’++’ ’ ’等符号之后换行这样可以有效的防止拷贝粘贴而引起的错误并可有效地增强代码的可阅读性请见清单代码的输出符合我们的期望但就写法而言对 valueB 的赋值语句是在变量 valueA 之后进行的换行这很容易被误解为 valueB=ValueA 给阅读造成障碍而对 valueC 的复制语句是在’+’之后进行的换行就容易理解的多这也是本文所提倡的换行方式清单行结束的位置缩进关于缩进的问题不只是 JavaScript 几乎所有的语言编写的时候都会提及缩进的问题缩进几乎是代码编写规范的第一课是代码可阅读性判断的直接因素代码缩进的好处是不言而喻的但是对于如何缩进则没有标准而言最受欢迎的是方便使用 TAB 键缩进也有些喜欢用个个个空格进行缩进这样缩进风格不一也同样给代码的阅读带来障碍本文提倡用个空格来进行缩进并在同一产品中采用同一种缩进标准不支持用 TAB 键进行缩进这是因为直到现在还没有统一的标准来定义 TAB 键所代替的空白大小有些编辑器解析为个空格大小有些则解析为个因而用不同的编辑器查看代码可能造成格式混乱当然 TAB 简单易用为解决这个问题建议在设置开发环境时将编辑器里的 TAB 快捷键重新设置为个空格据了解 Eclipse Vi Nodepad++ Editplus UltraEdit 等流行的编辑器均提供了此功能

　　注释

　　代码中的注释很重要自然也是毋庸置疑的通常我们会强调代码中注释数量的多少而轻视了对注释质量的提高编码是及时添加注释会给后续代码的维护人员带来很大的便利但是如果注释不注意更新或者由于拷贝粘贴引起的错误的注释则会误导阅读人员反而给阅读带来障碍

　　除了注释要及时更新外我们还应对注释的内容要特别关注注释要尽量简单清晰明了避免使用含混晦涩的语言同时着重注释的意义对不太直观的部分进行注解请见清单

　　清单有意义的注释

　　这样的注释方式在 JavaScript 代码中经常见到 "initialize valueA to be sero" 这样的注释有什么用呢？难道阅读程序的工程师从"var valueA = ;"复制语句中看不出来么？"set timeout to be s"这条注释不只是因拷贝粘贴引起的时间大小的错误同时也误导了程序员对这条语句的理解 setTimeout() 函数的作用并非是设置函数执行的超时时间而是等待一定时间后执行所调用的函数害人匪浅呀这样的注释内容宁可删掉

　　此外 JavaScript 的注释有两种"//" 和"/* */" 建议"//"用作代码行注释 "/* */"形式用作对整个代码段的注销或较正式的声明中如函数参数功能文件功能等的描述中

　　标识符命名

　　JavaScript 中的标识符的命名规则

以字母下划线 _ 或美元符号 $ 开头
允许名称中包含字母数字下划线 _ 和美元符号 $
区分大小写

　　变量参数成员变量函数等名称均以小写字母开头构造器的名称以大写字母开头下划线 _ 开头的变量一般习惯于标识私有 / 局部成员而美元符号 $ 开头的变量习惯于标识系统相关比如系统进程等应避免用下划线 _ 或美元符号 $ 来命名标识符尽可能地降低代码的阅读负担

　　声明

　　变量的声明

　　尽管 JavaScript 语言并不要求在变量使用前先对变量进行声明但我们还是应该养成这个好习惯这样可以比较容易的检测出那些未经声明的变量避免其变为隐藏的全局变量造成隐患

　　在函数的开始应先用 var 关键字声明函数中要使用的局部变量注释变量的功能及代表的含义且应以字母顺序排序每个变量单独占一行以便添加注释这是因为 JavaScript 中只有函数的表明作用域用 var 关键字声明的局部变量只在函数内有效而未经 var 声明的变量则被视为全局变量我们来看下清单

　　清单局部变量声明

　　从上例的输出惊奇地发现用 var 声明过的变量 valueA 和没有声明的变量 valueB 是有区别的特别需要注意的是在函数内部用 var 声明的变量为局部变量这样可以有效地避免因局部变量和全局变量同名而产生的错误

　　函数的声明

　　函数也应在调用前进行声明内部函数应在 var 声明内部变量的语句之后声明可以清晰地表明内部变量和内部函数的作用域

　　此外函数名紧接左括号 ( 之间而右括号 ) 和后面的之间要有个空格以清楚地显示函数名以其参数部分和函数体的开始若函数为匿名 / 无名函数则 function 关键字和左括号 ( 之间要留空格否则可能误认为该函数的函数名为 function

　　清单内部函数声明 <script language="javascript"> var innerA = ; function outF() var innerA = ; function _inF() alert("valueA="+innerA); _inF(); outF(); //output: valueA= _inF(); //error: innerF is not defined </script> 从清单的输出可以看出 inF() 函数仅在 outF() 函数的内部生效局部变量 innerA 对内部函数的作用域生效这样的编码方式使得变量和函数的作用域变得清晰语句对于简单语句而言需要提及的仍然是分号必要性同时一行最多有一个语句如果一个赋值语句是用函数和对象来赋值可能需要跨多行一定切记要在赋值语句末加上分号这是因为 JavaScript 中所有表达式都可以当语句遇换行符时会解析为表达式的结束此时不规范的换行和分号的丢失可能引入新的错误对于复合语句 if for while do switch try … catch 等代码体函数定义的函数体对象的定义等都需要放在花括号’’里面 ’’ 应在行末标志代码块的开始 ’’ 应在一行开头标志代码块的结束同时需要和’’所在行的开始对齐以表明一个完整的复合语句段这样可以极大地提高代码的可阅读性控制逻辑能清晰地表现出来被包含的代码段应该再缩进个空格即使被包含的代码段只有一句也应该用花括号’’包含尽管不用花括号代码也不会错但如若需要增加语句的话则较容易因花括号遗漏而引起的编译错误或逻辑错误 return语句在使用时也需慎重如果用表达式的执行作为返回值请把表达式和 return 放在同一行中以免换行符被误解析为语句的结束而引起返回错误 return 关键字后若没有返回表达式则返回 undefined 构造器的默认返回值为 this 清单 return 表达式在清单中显示了因返回表达式没有和 return 关键字放在同一行而引起的返回错误需重视特殊符号空白符适当的空白行可以大大提高代码的可阅读性可以使代码逻辑更清晰易懂同时在表达式中适当的留空白也会给代码的阅读带来方便关键字的后面如有括号则最好在关键字和左括号’(’之间留空白如 for if while 等而函数名和括号之间则不宜留空白但若是匿名函数则必须在 function 和左括号’(’之间留空白否则编辑器会误认为函数名为 function 在表达式中二元运算符 ( 除左括号’(’ 左方括号’[’ 作用域点’ ’) 和两个操作数之间最好留空白一元运算符（若不是词 typeof 等）和其操作数之间不宜留空白逗号’ ’的后面需要留空白以显示明确的参数间隔变量间隔等分号’;’之后通常表明表达语句的结束而应空行在 for 的条件语句中分号之后则应该留空白和 [ ] 在 JavaScript 中如需定义空对象和空数组通常很自然地想到用 new Object() 和 new Array() 的方法其实花括号’’和方括号’[]’可以直接用来定义一个空对象和一个空数组这种书写方法可以使代码看起来简单易懂 == 和 === 判断"逻辑等"在代码里太平常的不过事情了但 JavaScript 与其他熟知的编程语言不同的是除了可以使用两个等号’==’来作判断以为还可以使用三个等号’===’来进行逻辑等判断两者的不同是’==’作逻辑等判断时会先进行类型转换后再进行比较 ’===’则不会因而 ’==’进行的判断结果可能产生偏差 ’!=’与’!==’的区别亦是如此本文提倡尽量使用’===’来进行逻辑等的判断用’!==’进行逻辑不等的判断清单 === 的使用 <script language="javascript"> var valueA = " "; var valueB = ; if ( valueA == valueB) alert("Equal"); else alert("Not equal") //output: "Equal" if ( valueA === valueB) alert("Equal"); else alert("Not equal") //output: "Not equal" </script> 清单中 valueA 和 valueB 两个变量的值显然是不相等的起码 valueA 是个字符串而 valueB 是一个数字但用’==’进行判断是程序却输出相等的字样这是因为编译器对两个变量进行比较时因为他们的类型不同而自动地将 valueB 转换成字符串而后再和 valueA 进行比较的用’===’得到的判断结果正和预期的结果相符 + 加号’+’也同样是程序员所熟知的操作符之一 JavaScript 和其他编程语言不同的是在 JavaScript 中 ’+’除了表示数字值相加字符串相连接以外还可以作一元运算符用把字符串转换为数字因而如果使用不当则可能与自增符’++’混淆而引起计算错误这一点在清单中可以清楚地看出清单巧用 + 号 <script language="javascript"> var valueA = ; var valueB = " "; alert( valueA + valueB); //ouput: alert( valueA + (+valueB)); //output: alert( valueA + +valueB); //output: alert( valueA ++valueB); //Compile error </script> 总结本文就 JavaScript 代码的排版命名声明语句和一些特殊字符的使用等方面谈了自己对 JavaScript 编程规范的建议此外还有许多方面需要深入了解研究如 with eval 语句和 this 对象的使用等等我们在认识其普遍性的同时也需要注意其特殊性在编写代码时多用心留意以创造更多更优质的程序代码

cha138/Article/program/Java/JSP/201311/20238