使用制表符进行缩进,推荐使用 4 个空格字符作为一个缩进层级。
建议每条语句以分号结尾,虽然
JavaScript
有自动分号插入(ASI) 机制,但是它的插入规则非常复杂难以记住,所以不推荐省略分号。为了代码的可读性,建议将一行代码的长度保持在 80 字符以内。
-
当代码达到了单行最大字符限制时,需要将代码手动拆成两行,通常在元算符换行的时候,下一行最好增加两个层级的缩进。
callFunction(elementOne, elementTwo, elementThree, elementFour, elementFive);
而且最好将一个运算符放置到行尾,这样的话,ASI
就不会自作主张的在行尾添加分号,也就避免了错误的发生。当然如果是在给变量赋值的时候换行,那么第二行的位置应当和赋值运算符的位置保持对齐。
var result = elementOne + elementTwo + elementThree +
elementFive;
- 合理的使用空行将让你的代码更加易于阅读。在以下场景中添加空行是非常不错的主意。
- 在方法之间
- 在方法中的局部变量和第一条语句之间
- 在单行或多行注释之前
- 在方法的逻辑片段之间
下面是以上原则的实践。
if (true) {
for (var i = 0; i < Things.length; i++) {
var p = 1,
q = 2;
if (true) {
}
}
}
命名是一门艺术,更是一门技术,通常来讲命名长度应当尽可能的短,并且抓住要点。为变量命名时,其前缀应该是名词。为函数命名时前缀应当是动词,比如
can, has, is, set, get
等。对于常量的命名,最好使用大写字母和下划线的组和来命名,比如说MAX_LENGTH
。-
null
是一个特殊值,但是千万不要和undefined
搞混,在下列场景中应当使用null
。用来初始化一个变量,这个变量可能赋值为一个对象。
var person = null;-
用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。
var person = getPerson();if (person !== null) { doSomething(); }
-
当函数的参数期望是对象时,用作参数传入。
function printPerson(person) {
if (person !== null) {// print person } } printPerson(null);
当函数的返回值期望是对象时,用作返回值传出。
function getPerson() {
if (condition) {
return new Person("Hwaphon");
} else {
return null;
}
}
-
我们通常将
undefined
和null
搞混, 那是因为undefined == null
的结果是true
, 然而这二者的用途却各有不同。那些没有被初始化的变量都有一个初始值,即defined
, 表示这个变量等待被赋值。有一点值得注意的是,用typeof
去检测变量,如果这个变量声明了没有初始化会返回undefined
, 二如果这个变量根本就没声明也会返回undefined
。
var person;console.log(typeof person); // undefined console.log(typeof animal); // undefined
-
JavaScrtipt
支持两种不同类型的注释,单行注释和多行注释。关于单行注释,有三种使用方式。-
独占一行的注释,用来解释下一行代码。这行注释之前总是有一个空行,且缩进层级和下一行代码保持一致。
if (condition) {// This is a single line comment doSomething(); }
在代码行的尾部进行注释。 代码结束到注释之间至少有一个缩进。注释(包括之前的代码部分)不应该超过但行的最大字符数( 80 ) 限制,如果超过了,就将这条注释放置于当前代码行的上方。
if (condition) {
doSomething(); // This is a single line comment
}被注释掉的是一大段代码。
// if (condition) {
// doSomething();
// }
-
关于多行注释,,是通过 /* */
来实现的,不过最好还是使用下面这样的风格实现多行注释。
/*
* First line
* Second line
* Third line
*/
至于什么时候使用注释,有一条指导原则,当代码不够清晰时添加注释,而当代码很明了时不应当添加注释。在以下情况会最好添加注释。
- 难于理解的代码
- 可能被误认为错误的代码
- 浏览器特性 hack
使用
if
或者for
语句时,不论块语句包含多行代码还是单行代码,都应当使用花括号。-
在
switch
语句中, 尽量不要使用case
语句的连续执行,如果非要使用的话,最好添加注释。至于default
, 即使其什么都不做,最好也不腰省略,比如下面这样。
switch(condition) {
case "first":
break;case "second": break; default: // no logic here }
尽量不要使用
continue
, 用if
语句替代continue
的功能。for-in
循环是用来遍历对象属性的,可是存在一个问题,它不仅遍历对象的实例属性,同样还遍历从原型继承来的属性。 所以最好使用hasOwnProperty()
方法来为for-in
循环过滤出实例属性。推荐在函数顶部使用单
var
语句声明接下来可能会使用到的变量,而且没有初始值的变量应该出现在var
语句的尾部。推荐先声明函数再使用函数。
不推荐使用全局的严格模式,推荐使用局部的严格模式。
-
将
CSS
从JavaScript
中分离,当需要通过JavaScript
来修改元素样式的时候,最佳的方法是操作CSS
的className
。
// original style
element.className += " className";// HTML5 style element.classList.add("className");
将
JavaScript
从HTML
中抽离。可以自己创造一个addListener()
函数添加行为,而不是在HTML
结构中使用onclick
之类的内嵌JavaScript
代码。
function addListener(target, type, handler) {
if (target.addEventListener) {
target.addEventListener(type, handler, false);
} else if(target.attachEvent) {
target.attachEvent("on" + type, handler);
} else {
target["on" + type] = handler;
}
}用
typeof
检测原始值, 用instanceof
检测引用值。 在使用这两个运算符的时候不要加括号,那样会让它们看起来像函数。检测函数最好使用typeof
,下面是检测数组的一种方法。
function isArray(value) {
if (typeof Array.isArray === "function") {
return Array.isArray(value);
} else {
return Object.prototype.toString.call(value) === "[object Array]";
}
}-
对于一个对象,如果你想检测某个属性是否存在,有以下两种方式。
var person = {
name: "hwaphon",
age: 21
};// Example one if ("name" in person) { console.log("Exsits"); } // Example two if (person.hasOwnProperty("name")) { console.log("Exsits"); }