JS书写规范
慢慢积累
JS 变量命名
命名方法:小驼峰式命名
命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)
命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字符串类型。
示例
// 好的命名方式 var maxCount = 10; var tableTitle = 'LoginTable';
// 不好的命名方式 var setCount = 10; var getTitle = 'LoginTable';
JS 函数命名
命名方法:小驼峰式命名法
命名规范:前缀应当为动词
命名建议:可使用常见动词约定
动词 | 含义 | 返回值 |
can | 判断是否可执行某个动作(权限) | 函数返回一个布尔值。true:可执行;false:不可执行 |
has | 判断是否含有某个值 | 函数返回一个布尔值。true:含有此值;false:不含有此值 |
is | 判断是否为某个值 | 函数返回一个布尔值。true:为某个值;false:不为某个值 |
get | 获取某个值 | 函数返回一个非布尔值 |
set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象 |
load | 加载某些数据 | 无返回值或者返回是否加载完成的结果 |
JS 常量命名命名方法:名称全部大写
命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词
示例
var MAX_COUNT = 10; var URL = 'http://www.runoob.com';
JS 文件命名
使用短线(-)或句点(.)作为分隔符号,推荐使用句点,最好使用小写英文字符,不要使用其他符号和扩展字符,如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"
使用 .js 扩展名,这个扩展名的兼容性最好。其实任何扩展名都可以,只要是 text 类型、编码正确即可
用句点分隔表示名称中的从属关系,范围大的在前,如jQuery 的表单插件 Form既可以命名为jquery.form.js
js 注释格式
使用多行注释,以/*开头,*/结尾
js 注意事项
书写格式
-
JS 换行缩进:采用tab(打散为4个空格)
-
结束行需添加分号`;`
性能
-
尽量选用局部变量而不是全局变量
-
尽量使用链式写法
-
尽量减少DOM调用
-
将js脚本放到页面底部
-
使用jquery的data来存取数据,减少对dom的操作
-
使用on方法绑定事件,这是jquery的推荐使用
-
选择器的选择:尽量不用标签选择器,能用ID选择器的就不用class选择器
大括号的位置
最流行的有两种。一种是起首的大括号另起一行;另一种是起首的大括号跟在关键字的后面。
Javascript要使用后一种,因为Javascript会自动添加句末的分号,导致一些难以察觉的错误:代码的原意,是要返回一个对象,但实际上返回的是undefined,因为Javascript自动在return语句后面添加了分号。
return { key:value; };
圆括号
圆括号(parentheses)在Javascript中有两种作用,一种表示调用函数,另一种表示不同的值的组合(grouping)。我们可以用空格,区分这两种不同的括号。
- 调用函数的时候,函数名与左括号之间没有空格。
- 函数名与参数序列之间,没有空格。
- 所有其他语法元素与左括号之间,都有一个空格。
按照上面的规则,下面的写法都是不规范的:
foo (bar) return(a+b); if(a === 0) {...} function foo (b) {...} function(x) {...}
分号
分号表示语句的结束。大多数情况下,如果你省略了句尾的分号,Javascript会自动添加。
因此,有人提倡省略句尾的分号。但麻烦的是,如果下一行的第一个字元(token)是下面这五个字符之一,Javascript将不对上一行句尾添加分号:"("、"["、"/"、"+"和"-"。因此不要省略。
x = y
(function (){
...
})();
等同于:
x = y(function (){...})();
with语句
with可以减少代码的书写,但是会造成混淆。
with (o) { foo = bar; }
上面的代码,可以有四种运行结果:
o.foo = bar; o.foo = o.bar; foo = bar; foo = o.bar;
这四种结果都可能发生,取决于不同的变量是否有定义。因此,不要使用with语句。
相等和严格相等
"相等"运算符会自动转换变量类型:
0 == ''// true 1 == true // true 2 == true // false 0 == '0' // true false == 'false' // false false == '0' // true " \t\r\n " == 0 // true
因此,不要使用"相等"(==)运算符,只使用"严格相等"(===)运算符。
语句的合并
不要将不同目的的语句,合并成一行。有些程序员追求简洁,喜欢合并不同目的的语句。
var a = b = 0;
以为这行代码等同于
var a = 0, b = 0;
实际上不是,它的真正效果是下面这样:
b = 0; var a = b;
变量声明
Javascript会自动将变量声明"提升"(hoist)到代码块(block)的头部。
- 所有变量声明都放在函数的头部。
- 所有函数都在使用之前定义。
全局变量
Javascript最大的语法缺点,可能就是全局变量对于任何一个代码块,都是可读可写。这对代码的模块化和重复使用,非常不利。因此,避免使用全局变量;如果不得不使用,用大写字母表示变量名,比如UPPER_CASE。
new命令
Javascript使用new命令,从建构函数生成一个新对象。
var o = new myObject();
这种做法的问题是,一旦你忘了加上new,myObject()内部的this关键字就会指向全局对象,导致所有绑定在this上面的变量,都变成全部变量。因此,不要使用new命令,改用Object.create()命令。
如果不得不使用new,为了防止出错,最好在视觉上把建构函数与其他函数区分开来。例如:建构函数的函数名,采用首字母大写(InitialCap);其他函数名,一律首字母小写。
自增和自减运算符
自增(++)和自减(--)运算符,放在变量的前面或后面,返回的值不一样,很容易发生错误。
事实上,所有的++运算符都可以用"+= 1"代替。
区块
总是使用大括号表示区块。比如一些if语句。