編寫可維護的JavaScript-程式設計風格

Presbyterian發表於2018-03-15

可以使用JSHint對程式碼進行檢查。程式碼規範可以是使開發更高效。

基本的格式化

縮排層級

  1. 使用製表符進行縮排。Tab
  2. 使用空格進行縮排。

語句結尾

是不是使用分號看個人喜好,書上推薦是不使用;但是jshint等工具,還有Google 的JavaScript風格指南推薦使用。

行的長度

單行長度限定在80個字元之內。
1. Java規定單行長度不超過80個字元;
2. Android不超過100個字元;
3. Ruby規定不超過80個字元;
4. Python不超過79個字元;
所以在JavaScript中,推薦單行長度限定在80個字元之內。

換行

這一段挺多的,我就寫幾個例項吧。

 var tasks = [openDocument, writeText, closeDocument, updateUIcloseDocument,writeText, 
             updateUIcloseDocument, updateUI];

if (options & OPTION_D||tioDay===20|start!==1000&&
        (window.t.s(num))) {
        //do something
        console.log(options);
    }

空行

書上建議

  • 在方法之間(我比較認同);
  • 在方法中的區域性變數和第一條語句之間。
  • 在多行或單行註釋之前;
  • 在方法內的邏輯片段之間傳入空行,提高可讀性。
    本人建議慎用空行

命名

小駝峰命名(大家都知道的)myName

變數和函式

函式名前應該是動詞:getCount;單純名詞是變數:myName。
count、length、size儘量是數字;
name、title、message儘量是字串;
以can、has、is儘量是布林。
set開頭儘量來儲存一個值。

常量

大寫字母和下劃線來表示常量 var MAX_COUNT=10;

建構函式

使用大駝峰命名法。

    function Person(name) {
        this.name=name;
    }
    Person.prototype.myName=function () {
        alert(this.name)
    }
    var me=new Person("Jack")

字串和數字

字串單引號和雙引號看你自己的喜好,數字10進位制,且如果有小數部分,請寫全;不要10..23這種。

null

使用場景
- 用來初始化一個變數,這個變數可能賦值為一個物件。
- 用來和一個已經初始化的變數比較,這個變數可以是也可以不是一個物件
- 當函式的引數期望是物件時,做引數使用;/**/
- 當函式的返回值期望是物件的時候。作返回值使用。
不要使用場景

  • 不要使用null來檢查是否傳入了某個引數。
  • 不要用null來檢測一個未初始化的變數。

undefined

沒有被初始化的變數都有一個初始值,即undefined;表示這個變數等待被賦值。

//b未被宣告
    var f;
    console.log(typeof f);
    console.log(typeof b);

建議此時將f賦值為null;然後typeof 運算null之後,返回“object”,這樣可以和undefined區分了。

註釋

單行註釋

//
  • 獨佔一行,用來解釋下一行程式碼。這行註釋之前總是有一個空行,且縮排層級和下一行程式碼保持一致。
  • 在程式碼行的尾部註釋,程式碼結束到註釋之間至少有一個縮排。

多行註釋

/*   */

多行的時候,要加*,且有空格

    /*
    * 78787 
    * 和哦窘迫
    */

文件註釋

     /**
     @param :一個物件引數
     @param :一個物件引數
     **/
  • 對方法、期望的引數和可能的返回值新增註釋。
  • 對自定義型別和期望的引數新增註釋。
  • 如果一個物件包含一個或多個附帶文件註釋的方法,那麼這個物件也應當適當的針對文件生成工具新增文件註釋。

語句和表示式

所有的塊語句都應當使用花括號:
- if
- for
- while
- do…while
- try…catch…finally

for迴圈

注意break;和continue的使用。

for-in迴圈

最好使用hasOwnProperty();方法來為for-in迴圈過濾出例項屬性。

    var obj={value: 310, name: '郵件營銷'};
    var item;
    for(item in obj){
        if(obj.hasOwnProperty(item)){
            console.log(item);
            console.log(obj[item]);
        }
    }

變數、函式、運算子

變數宣告

變數宣告提前

    function dos() {
        var res=10+val;
        var val=10;
        return res;
    }

此時由於變數宣告提前;列印出來的是NaN;其中的原因是瀏覽器自己理解為

    function dos() {
        var res;
        var val;
        res=10+val;
        val=10;
        return res;
    }

建議儘量將變數宣告放到最頂部。

函式宣告

  1. 先宣告函式,在使用函式。
  2. 函式宣告不要在條件語句的內部。

嚴格模式避免放入到全域性作用域中。
儘量使用====!==而不是==和!=;


eval();function();setInterval(); setTimeout()傳入字串來立即生成js程式碼去執行的,儘量避免使用。

相關文章