使用制表符進(jìn)行縮進(jìn)，推薦使用 4 個(gè)空格字符作為一個(gè)縮進(jìn)層級(jí)。
建議每條語(yǔ)句以分號(hào)結(jié)尾，雖然
JavaScript有自動(dòng)分號(hào)插入(ASI) 機(jī)制，但是它的插入規(guī)則非常復(fù)雜難以記住，所以不推薦省略分號(hào)。為了代碼的可讀性，建議將一行代碼的長(zhǎng)度保持在 80 字符以內(nèi)。
-
當(dāng)代碼達(dá)到了單行最大字符限制時(shí)，需要將代碼手動(dòng)拆成兩行，通常在元算符換行的時(shí)候，下一行最好增加兩個(gè)層級(jí)的縮進(jìn)。
callFunction(elementOne, elementTwo, elementThree, elementFour, elementFive);
而且最好將一個(gè)運(yùn)算符放置到行尾，這樣的話，ASI 就不會(huì)自作主張的在行尾添加分號(hào)，也就避免了錯(cuò)誤的發(fā)生。當(dāng)然如果是在給變量賦值的時(shí)候換行，那么第二行的位置應(yīng)當(dāng)和賦值運(yùn)算符的位置保持對(duì)齊。
var result = elementOne + elementTwo + elementThree +
elementFive;
- 合理的使用空行將讓你的代碼更加易于閱讀。在以下場(chǎng)景中添加空行是非常不錯(cuò)的主意。
- 在方法之間
- 在方法中的局部變量和第一條語(yǔ)句之間
- 在單行或多行注釋之前
- 在方法的邏輯片段之間
下面是以上原則的實(shí)踐。
if (true) {
for (var i = 0; i < Things.length; i++) {
var p = 1,
q = 2;
if (true) {
}
}
}
命名是一門(mén)藝術(shù)，更是一門(mén)技術(shù)，通常來(lái)講命名長(zhǎng)度應(yīng)當(dāng)盡可能的短，并且抓住要點(diǎn)。為變量命名時(shí)，其前綴應(yīng)該是名詞。為函數(shù)命名時(shí)前綴應(yīng)當(dāng)是動(dòng)詞，比如
can, has, is, set, get等。對(duì)于常量的命名，最好使用大寫(xiě)字母和下劃線的組和來(lái)命名，比如說(shuō)MAX_LENGTH。-
null是一個(gè)特殊值，但是千萬(wàn)不要和undefined搞混，在下列場(chǎng)景中應(yīng)當(dāng)使用null。用來(lái)初始化一個(gè)變量，這個(gè)變量可能賦值為一個(gè)對(duì)象。
var person = null;-
用來(lái)和一個(gè)已經(jīng)初始化的變量比較，這個(gè)變量可以是也可以不是一個(gè)對(duì)象。
var person = getPerson();if (person !== null) { doSomething(); } -
當(dāng)函數(shù)的參數(shù)期望是對(duì)象時(shí)，用作參數(shù)傳入。
function printPerson(person) {
if (person !== null) {// print person } } printPerson(null); 當(dāng)函數(shù)的返回值期望是對(duì)象時(shí)，用作返回值傳出。
function getPerson() {
if (condition) {
return new Person("Hwaphon");
} else {
return null;
}
}
-
我們通常將
undefined和null搞混， 那是因?yàn)?undefined == null的結(jié)果是true， 然而這二者的用途卻各有不同。那些沒(méi)有被初始化的變量都有一個(gè)初始值，即defined， 表示這個(gè)變量等待被賦值。有一點(diǎn)值得注意的是，用typeof去檢測(cè)變量，如果這個(gè)變量聲明了沒(méi)有初始化會(huì)返回undefined， 二如果這個(gè)變量根本就沒(méi)聲明也會(huì)返回undefined。
var person;console.log(typeof person); // undefined console.log(typeof animal); // undefined -
JavaScrtipt支持兩種不同類型的注釋，單行注釋和多行注釋。關(guān)于單行注釋，有三種使用方式。-
獨(dú)占一行的注釋，用來(lái)解釋下一行代碼。這行注釋之前總是有一個(gè)空行，且縮進(jìn)層級(jí)和下一行代碼保持一致。
if (condition) {// This is a single line comment doSomething(); } 在代碼行的尾部進(jìn)行注釋。 代碼結(jié)束到注釋之間至少有一個(gè)縮進(jìn)。注釋（包括之前的代碼部分）不應(yīng)該超過(guò)但行的最大字符數(shù)( 80 ) 限制，如果超過(guò)了，就將這條注釋放置于當(dāng)前代碼行的上方。
if (condition) {
doSomething(); // This is a single line comment
}被注釋掉的是一大段代碼。
// if (condition) {
// doSomething();
// }
-
關(guān)于多行注釋，，是通過(guò) /* */ 來(lái)實(shí)現(xiàn)的，不過(guò)最好還是使用下面這樣的風(fēng)格實(shí)現(xiàn)多行注釋。
/*
* First line
* Second line
* Third line
*/
至于什么時(shí)候使用注釋，有一條指導(dǎo)原則，當(dāng)代碼不夠清晰時(shí)添加注釋，而當(dāng)代碼很明了時(shí)不應(yīng)當(dāng)添加注釋。在以下情況會(huì)最好添加注釋。
- 難于理解的代碼
- 可能被誤認(rèn)為錯(cuò)誤的代碼
- 瀏覽器特性 hack
使用
if或者for語(yǔ)句時(shí)，不論塊語(yǔ)句包含多行代碼還是單行代碼，都應(yīng)當(dāng)使用花括號(hào)。-
在
switch語(yǔ)句中， 盡量不要使用case語(yǔ)句的連續(xù)執(zhí)行，如果非要使用的話，最好添加注釋。至于default， 即使其什么都不做，最好也不腰省略，比如下面這樣。
switch(condition) {
case "first":
break;case "second": break; default: // no logic here } 盡量不要使用
continue, 用if語(yǔ)句替代continue的功能。for-in循環(huán)是用來(lái)遍歷對(duì)象屬性的，可是存在一個(gè)問(wèn)題，它不僅遍歷對(duì)象的實(shí)例屬性，同樣還遍歷從原型繼承來(lái)的屬性。 所以最好使用hasOwnProperty()方法來(lái)為for-in循環(huán)過(guò)濾出實(shí)例屬性。推薦在函數(shù)頂部使用單
var語(yǔ)句聲明接下來(lái)可能會(huì)使用到的變量，而且沒(méi)有初始值的變量應(yīng)該出現(xiàn)在var語(yǔ)句的尾部。推薦先聲明函數(shù)再使用函數(shù)。
不推薦使用全局的嚴(yán)格模式，推薦使用局部的嚴(yán)格模式。
-
將
CSS從JavaScript中分離，當(dāng)需要通過(guò)JavaScript來(lái)修改元素樣式的時(shí)候，最佳的方法是操作CSS的className。
// original style
element.className += " className";// HTML5 style element.classList.add("className"); 將
JavaScript從HTML中抽離?？梢宰约簞?chuàng)造一個(gè)addListener()函數(shù)添加行為，而不是在HTML結(jié)構(gòu)中使用onclick之類的內(nèi)嵌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檢測(cè)原始值， 用instanceof檢測(cè)引用值。 在使用這兩個(gè)運(yùn)算符的時(shí)候不要加括號(hào)，那樣會(huì)讓它們看起來(lái)像函數(shù)。檢測(cè)函數(shù)最好使用typeof，下面是檢測(cè)數(shù)組的一種方法。
function isArray(value) {
if (typeof Array.isArray === "function") {
return Array.isArray(value);
} else {
return Object.prototype.toString.call(value) === "[object Array]";
}
}-
對(duì)于一個(gè)對(duì)象，如果你想檢測(cè)某個(gè)屬性是否存在，有以下兩種方式。
var person = {
name: "hwaphon",
age: 21
};// Example one if ("name" in person) { console.log("Exsits"); } // Example two if (person.hasOwnProperty("name")) { console.log("Exsits"); }
