最全的Javascript编码规范(推荐)_javascript技巧

1.嵌入规则

Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来。Javascript代码若不是该页面专用的,则应尽量避免在页面中直接编写Javascript代码。

2.对齐缩进与换行

a) 缩进

在同一系统中应采用同一种缩进标准,本文提倡缩进大小为4个空格。各编译器对Tab键所代替的空白大小定义不同。建议在设置开发环境时,将编辑器里的Tab快捷键重新设置成4个空格。多数编译器提供了此功能。否则建议按4次空格来进行缩进。

b) 换行

在以下位置必须换行:

每个独立语句结束后;

if、else、catch、finally、while等关键字前;

运算符处换行时,运算符必须在新行的行首。

对于因为单行长度超过限制时产生的换行,参考行长度中的策略进行分隔。

1).字符串过长截断

每行代码应小于80个字符。若代码较长应尽量换行,换行应选择在操作符和标点符号之后,最好是在分号“;”或逗号“,”之后。下一行代码相对上一行缩进4个空格。这样可以有效防止复制粘贴引起的代码缺失等错误并增强可读性。

按一定长度截断字符串,并使用+运算符进行连接。分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开。特别的,对于HTML片段的拼接,通过缩进,保持和HTML相同的结构:

也可使用数组来进行拼接,相对+运算更容易调整缩进:

2).三元运算符过长

三元运算符由3部分组成,因此其换行应当根据每个部分的长度不同,形成3种不同的情况:

不得出现以下情况:

3).过长的逻辑条件组合

当因为较复杂的逻辑条件组合导致80个字符无法满足需求时,应当将每个条件独立一行,逻辑运算符放置在行首进行分隔,或将部分逻辑按逻辑组合进行分隔。最终将右括号)与左大括号{放在独立一行,保证与if内语句块能容易视觉辨识。如:

4).过长的JSON和数组

如果对象属性较多导致每个属性一行占用空间过大,可以按语义或逻辑进行分组的组织,如:

通过5个一组的分组,将每一行控制在合理的范围内,并且按逻辑进行了切分。 对于项目较多的数组,也可以采用相同的方法,如:

5).return语句

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

示例:

3.命名

命名的方法通常有以下几类:

a).命名法说明

1).camel命名法,形如thisIsAnApple

2).pascal命名法,形如ThisIsAnApple

3).下划线命名法,形如this_is_an_apple ·

4).中划线命名法,形如this-is-an-apple

根据不同类型的内容,必须严格采用如下的命名法:

b).变量名:必须使用camel命名法

c).参数名:必须使用camel命名法

d).函数名:必须使用camel命名法

e).方法/属性:必须使用camel命名法

f).私有(保护)成员:必须以下划线_开头

g).常量名:必须使用全部大写的下划线命名法,如IS_DEBUG_ENABLED

h).类名:必须使用pascal命名法

i).枚举名:必须使用pascal命名法

j).枚举的属性:必须使用全部大写的下划线命名法

k).命名空间:必须使用camel命名法

l).语义:命名同时还需要关注语义,如:

变量名应当使用名词;

boolean类型的应当使用is、has等起头,表示其类型;·

函数名应当用动宾短语;

类名应当用名词。

4.注释

注释要尽量简单,清晰明了。着重注释的意思,对不太直观的部分进行注解:

(当然这种直接定义一堆全局变量的做法不推荐)

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

另:复制粘贴应注意注释是否与代码对应。

5.声明

1).变量的声明

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

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

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

2).函数的声明

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

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

内部函数声明示例:

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

时间: 2024-09-20 11:57:52

最全的Javascript编码规范(推荐)_javascript技巧的相关文章

深入理解JavaScript函数参数(推荐)_javascript技巧

前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数. arguments javascript中的函数定义并未指定函数形参的类型,函数调用也未对传入的实参值做任何类型检查.实际上,javascript函数调用甚至不检查传入形参的个数 function add(x){ return x+1; } console.log(add(1));//2 console.log(add('1'));/

5款JavaScript代码压缩工具推荐_javascript技巧

推荐5款优秀的JavaScript代码压缩工具.代码压缩(也称代码最小化)是一个从源代码中消除所有不必要的字符的过程,包括删除所有不必要的空格字符.新行字符.评论等.代码压缩不影响源代码的功能,却提高加载时间(和web应用程序的性能),因为,要下载的文件的大小减少了. 以下是5款优秀的JavaScript代码压缩工具,我相信,他们定可以将你的脚本变得更轻巧,代码性能更出色. 一.YUI Compressor Yahoo出品!YUI Compressor是一个用Java编写,帮你最小化JavaSc

Javascript 学习书 推荐_javascript技巧

Aaron Gustafson著,李松峰 李雅雯 等译.感觉绝对是一本值得看的书.感兴趣的朋友可以看一下.下面是我从其中抽出来的javascript常见陷阱和对象的概念整理出来的.希望对大家能有一些帮助. Ø Javascript语法中常见的陷阱 ² 区分大小写 ² 单引号和双引号实际上是没有特殊的区别的,这点我是从看了这本书才开始真正的知道,虽然在以前写程序时写过''号的字符串形式,但是却没有先觉性的发现"哦,原来这样也可以." 另外大多数情况下还都是用''来表示字符串的,因为XHT

当前流行的JavaScript代码风格指南_javascript技巧

JavaScript 没有一个权威的编码风格指南,取而代之的是一些流行的编码风格: 复制代码 代码如下: Google的JavaScript风格指南(以下简称Google) http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml NPM编码风格(以下简称NPM) https://npmjs.org/doc/coding-style.html Felix的Node.js风格指南(以下简称Node.js) http:

JavaScript 模块化编程(笔记)_javascript技巧

一直对JS都是一知半解,最近遇到这方面问题,所以在网上学习了一下,现在还没有完全明白,先贴出笔记; 第一章 JavaScript模块化编程 (一):模块的写法 一 原始写法// 模块就是实现特定功能的一组方法;只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块;     function m1(){         // ...     }     function m2(){         // ...     } // 上面的函数m1()和m2(),组成一个模块;使用时直

web性能优化之javascript性能调优_javascript技巧

JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用.随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且以后会越来越多.JavaScript 作为一个解释执行的语言,以及它的单线程机制,决定了性能问题是 JavaScript 的软肋,也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题,尤其是针对 Web 2.0 的应用.绝大多

js全选按钮的实现方法_javascript技巧

本文实例讲述了js全选按钮的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下:   具体代码如下 <html> <head> <title>复选框checked属性</title> <script language="JavaScript" type="text/javascript"> function changeState(isChecked) { var chk_list=documen

javascript 异常处理使用总结_javascript技巧

JavaScript中的异常可以用try..catch..finally语句来处理,也可以手动的来抛出异常. 1.使用try..catch..finally语句来处理异常 js代码在执行过程中如果出现异常,会手动创建一个异常类对象,该异常类对象将被提交给浏览器,这个过程称为"抛出异常".当浏览器接收到一场对象时,会寻找能处理这一异常的代码并把当前异常对象提交给其处理,这一过程被称为"捕获异常".try..catch..finally语句的基本语法格式为: 复制代码

纯javascript实现自动发送邮件_javascript技巧

描述: 此JavaScript将帮助你的电子邮件的人.只要按一下电子邮件,有人!和JavaScript会要求的电子邮件地址,主题,等等然后你,新的邮件,是向你打开了. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function mailsome1(){ who=prompt("Enter recipient's email address: ","antispammer@earthling.net