天天看點

js編碼規範總結

前言:javascript編碼規範的制定讓代碼變得簡潔易讀的同時也可以友善許久之後代碼的維護和他人的閱讀。
           

一、javascript 書寫位置

1.引入外部 js 檔案

格式:

注:

  • html和jsp頁面中不允許将後面那個标簽去掉
  • ECMA第五版規定 type 屬性不寫時預設為 type=”text/javascript”,是以省略這個屬性。

2.自己寫js 代碼

<script>
  // 自定義的 js 代碼
</script>
           

3.标簽的位置

如果将 <script> 标簽放到 <head> 标簽中,等待外部js 檔案全部下載下傳、解析并執行完之後才能解析 <body> 中的元素,這會造成打開頁面時會出現短暫的吃頓現象。
    是以我們要求将 <script> 标簽放到 <body> 元素中,并且置于 <body> 元素中的 html 代碼的最下面。
           

4.推薦

将 html 代碼和 js 代碼分離,也就是将 js 代碼全部寫到一個獨立的以 *.js 的檔案中,再通過引入外部js 的方式引入到頁面中。可以增加代碼的美觀性和友善後期代碼維護。
           

二、命名規範

1.區分大小寫

Javascript 中的一切(如:變量、函數名和操作符)都區分大小寫。
           

如:

  • 變量名 test 和變量名 Test 就是兩個變量。
  • typeof 作為關鍵字不能作為變量名,但typeOf就可以作為變量名了,因為它是一個新的變量。

2.辨別符

辨別符:變量、函數、屬性和函數參數的名字。
           

推薦命名規則:

  • 第一個字元必須是字母或下劃線(_)或美元符号($);
  • 其它字元可以是字母或下劃線或美元符号或數字;
  • 用全英文命名的,采用駝峰大小寫格式。即第一個字母小寫,後面每個有意義的首字母大寫。

    如:firstSecond myCar

  • 辨別符不能是關鍵字、保留字、true、false、null。

3.關鍵字和保留字

在使用中有不熟悉的關鍵字和保留字可查詢下表:
           

關鍵字有:(javascript 中有意義的單詞)ECMA第五版

break do instanceof typeof
case else new var
catch finally return void
continue for switch while
debugger function this with
default if throw try
delete in

保留字有:(javascript 中暫時沒有意義,以後可能被用作關鍵字的單詞)ECMA第三版

abstract enum(枚舉) int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
double implements protected volatile
yield import public let

三、注釋

1.單行注釋

// 單行注釋
           

2.多行注釋

/*
 * 這是一個多行注釋
 * 多行注釋的第二行
 */     
           

3.方法注釋

方法的注釋一般應注明方法是幹什麼用的,注意事項是什麼,參數含義,傳回資料資訊。
           
/**
 * 主要功能:生成随機數
 * 注意事項:此方法隻能生成11-15位的随機數
 *
 * @param size 生成随機數的長度,範圍在數字11~14之間
 * @return number 随機數
 */
function getRandom (size) {

    return Math.random().toString().substr(, size);
}
           

四、嚴格模式

'use strict';

    嚴格模式 可以将js 代碼中的一些不确定行為得到處理,對某些不安全的操作也會抛出錯誤,強制性的将js 代碼變得更加規範和不容易出錯。
    上述看似字元串的xx 實際上是一個編譯訓示,用于告訴Javascript 引擎切換到嚴格模式。     
           

五、語句

1.分号的使用

每一句代碼的結尾推薦加上”;”,盡管在 javascript 中代碼結束不加分号也不會報錯。

加分号”;”的好處有:

  • 避免錯誤,諸如不完整的輸入;
  • 可以通過删除多餘的空格來壓縮js 代碼,代碼結尾沒有分号會導緻壓縮錯誤;
  • 增進代碼性能。解析器不必花時間推測應該從哪裡插入分号來結束語句。

2.代碼塊的使用

如:if條件語句中,如果代碼塊中隻有一條語句

if (test) 
alert(test);
           

上述代碼不會導緻錯誤,但不推薦使用。推薦使用的方式如下:

if (test) {
    alert(test);
} 
           

六、編寫規範

1.對于條件語句

if (條件) {
    // 條件語句
}
           

注:if 與 () 和 {} 之間的空格

2.對于循環語句

for (var i = ; i < ; i++) {
    // 循環語句
}
           

注:for的括弧内每個分号後面要空一格

3.對于方法

function test (param1, param2) {
    // 方法體
}
           

注意:參數中逗号後面有個空格

4.js 代碼中盡量使用單引号。

七、變量

1.使用var 定義變量

javascript 裡的變量是松散類型的,也就是即可以用 var 定義字元串類型的,也可以用var 定義整數類型的。

2. var message;

像這樣隻定義沒有初始化值的,預設會儲存一個特殊的值 —— undefined
           

3.同一個變量不推薦接收多種資料類型的值

var hhh = 'hello';
hhh = ;
           

像這種首先用 hhh 變量接收字元串類型的值,再用 hhh 變量接收整型的值,文法上沒有錯誤,但我們不推薦這樣使用。

4.認識局部變量

function test () {
    var message = 'hello';
}
test();
alert(message);
           

這裡的message 是用 var 定義的局部變量,在調用方法test() 時被建立出來,在方法結束的時候也同時銷毀了,是以alert(message) 會報錯。

5.認識全局變量

function test () {
    message = 'hello';
}
test();
alert(message);
           
這裡的message 沒有用var 定義,在調用方法 test() 時被建立出來,沒有用var 定義的變量屬于全局變量,是以就算方法執行完畢也不會被回收器回收,所有 alert(message) 時就會彈出 ‘hello’。
           

6.用 var 可以同時定義多個變量,中間用逗号”,”隔開。

如:

var aaa = 'hi',
    bbb = ,
    ccc = true;
           

7.嚴格模式下注意事項

嚴格模式下變量名不能為 eval 和 arguments ,盡管這兩個詞既不是關鍵字也不是保留字,但就是不能使用,否則報文法錯誤。
           

繼續閱讀