《編寫可維護的Javascript》學習總結

時間 2019-11-16

原文原文鏈接

第一部分

1、基本規範

1.縮進：通常以四個空格爲一個縮進。javascript

2.語句結尾：最好加上分號，由於雖然「自動分號插入（ASI）」機制在沒有分號的位置會插入分號，可是ASI規則複雜並且會有特殊狀況發生css

// 源代碼
function aaa() {
    return 
    {
         title: 'aaaa',
         id: '2222'
    }    
}

// ASI解析
function aaa() {
    return;
    {
         title: 'aaaa',
         id: '2222'
    }    
}

此時return換行會返回undefined

3.行的長度：不該超過80個字符html

4.換行：通常在運算符（好比逗號）後換行，而後增長兩個層級（一個層級爲四個空格的話，增長的就是八個空格）。java

當給變量賦值時，第二行位置應當和賦值運算符位置保持對齊編程

var result = aaaa + bbbb + ccccc + dddd + eeee + 
             fffffffff + gggggg + hhhh

5.空行：適當空行增長代碼可讀性數組

在方法之間
在方法中的局部變量和第一條語句之間
在多行或單行註釋前
邏輯片斷間

6.命名方法：駝峯式框架

變量：應用名詞進行命名 var name = "skq"函數

函數：應以動詞爲函數名前綴 function doSomething(){}測試

常量：使用大寫字母和下劃線命名 var MAX_COUNT = 10;ui

7. 註釋

單行註釋後要有一個空格 // 註釋
多行註釋，要與前一段代碼前有一個空行

// 這是一個數組
var aaa = [1,2,3,4];

/*
 * 這是一個函數
 * 有一個變量爲aaa
 */

function aaa() { 
　　var aaa = [1,2,3,4]; 
}

2、語句和表達式

1.switch - default

default可省略

2.for - break&&continue

break: 終止本次循環

continue: 跳出本次循環

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var arr = [1, 2, 3, 4];
        var len = 2;

        function aaa(data) {
            console.log(data);
        }

        for (var i = 0; i < arr.length; i++) {
            if (i === len) {
                break;
            }
            aaa(arr[i]); // 1,2
        }

        for (var i = 0; i < arr.length; i++) {
            if (i === len) {
                continue;
            }
            aaa(arr[i]); // 1,2,4
        }

    </script>
</head>
<body>
    
</body>
</html>

避免使用continue，儘可能使用if語句

3.for-in

在使用for-in時，它不只遍歷對象的實例屬性，一樣還遍歷從原型集成來的屬性。當遍歷自定義對象屬性時，每每會由於意外的結果終止。因此用hasOwnProperty()在來for-in循環過濾出實例屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var obj = {
        name: 'aaa',
        age: 11
    }
    for (attr in obj) {
        if (obj.hasOwnProperty(attr)) {
            console.log(obj[attr]);
        }
    }

    </script>
</head>
<body>
    
</body>
</html>

3、變量、函數和運算符

1. var的使用

建議var合併成一條語句

var aaa = 10,
    bbb = aaa + 10,
    ccc,
    ddd;

2.具備強制類型轉換機制：等號（==）

推薦使用 === 和！==，不會涉及強制類型轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    alert(false == 0); // true
    alert(true == 1);  // true
    alert(true == 2);  // false
    </script>
</head>
<body>
    
</body>
</html>

3. eval(), setIterval(), setTimeout(), 和 Funtion中傳入字符串時，均可當作代碼來執行，避免傳入字符串

var myfunc = new Function("alert('Hi')");

4、編程實踐

1. 將css從JavaScript中抽離

用className替代style（除了定位的狀況）

5、事件處理

1.隔離應用邏輯

把應用邏輯單拎出來，這樣就可複用於不少地方了

2.不要分發事件對象（event）

最佳辦法是讓事件處理程序使用event對象來處理事件，而後拿到全部須要的數據傳給應用邏輯

6、避免空比較

一、檢測原始值

檢測類型：Boolean、Number、String、null、undefined

方法：typeof

注意： null不該用於檢測語句，若是要對比的確實爲null，用 === 或者==!來精確判斷

二、檢測引用值（object）

內置引用類型：Object、Array、Date、Error

方法：instanceof (不只檢測對象的構造器，還檢測原型鏈)

* instanceof不使用函數和數組

三、檢測函數

方法：typeof

* typeof 能夠跨幀（frame），可是IE8及更早版本有問題（返回Object）

  /**
　　*  underscore源碼
   */
  if (typeof /./ != 'function' && typeof Int8Array != 'object') {
    _.isFunction = function(obj) {
      return typeof obj == 'function' || false;
    };
  }

四、檢測數組

/**
 * underscore給出的方案
 */
 var nativeIsArray  = Array.isArray;

 _.isArray = nativeIsArray || function(obj) {
    return toString.call(obj) === '[object Array]';
 };

// 書中給出方案　　
function isArray(value) {

   　　 if (typeof Array.isArray === 「function」)  {

        　　return Array.isArray(value);

    　　} else {

       　　 return Object.prototype.toString.call(value) === "[object Array]"

   　　 }

　　}