編寫可維護性的js讀書筆記

第一部分：格式要求

 

1. 4個空格縮進。

2. 行的長度不要超過80個字符，

3. 語句超過的換行4個空格縮進（2個縮進）記住標點符號處不能換到下一行，

4. 定義變量換行則換至等號後

 

5. 添加適當的空行

   * for if每一個流控制語句以前

   * 單行多行註釋

   * 方法之間

   * 方法中局部變量與第一條語句

   * 方法中邏輯片斷添加空行，提升可讀性

 

6. 命名

   * 變量以名詞命名

   * 函數小駝峯命名，以動詞開頭，常見的動詞約定

    * 常量用大寫命名，分割用 _ （下劃線）

    * 構造函數已大駝峯命名

 7. null和undefined

 

 

 

8. 對象直接量

 

 9. 數組直接量

 10. 註釋

    * 單行註釋有空行，每一個// 之間有一個空格，縮進相同

   * 多行註釋

     

    * 文檔註釋要用/**    **/表示

 

11. 語句與表達式

  1> 塊語句間隔

      

  2> switch語句

       每一個case前加一空行

       若是沒有defalut，添加註釋 // 沒有default ，前面加空行

  3> for循環

      * 避免使用continue（只是退出本次循環迭代），可使用if語句判斷避免使用，避免使用with

      * 普通for循環是對數組進行遍歷

      * for in是循環遍歷對象屬性，並返回屬性名，在自定義中要使用hasOwnProperty()進行判斷，若想查找原型 

         鏈能夠不用判斷可是須要添加註釋說明

 

12. 變量、函數、運算符聲明

  1> 將全部變量聲明到頭部

     

      var語句合併成一句，每一個變量獨佔一行，賦值符號對齊，未初始化變量放在後面

   2> 當即調用函數

       dosomething(item);   不用空格，與塊語句分開

       將匿名函數複製給變量或屬性，用括號括起來

      

    3>嚴格模式 "use strict"

       最好不要全局做用域中

       屢次使用嚴格模式 

       

    4>相等時使用===和！==（最好都是用它）

    5>禁止使用eval(()除了在Json中使用，禁止使用Function構造函數

         setTimeout()和setInterval()禁止傳入字符串，要用匿名函數傳值

    6>儘可能不使用原始包裝類型（Number,String,Boolean）,直接使用var a = "ada";

    7>  三元操做符應該用在條件賦值語句中    例如：var a = b ? c : d; //對的    b ? c : d //很差的

 

13. 優化循環 

    1>不從i= 0開始，從最大值開始

    2>使用do while更高效

    3>展開循環，使用Duff或者優化Duff對於大型數據來講

    5>原生方法更快，switch更快，位運算更快

    6>最小化現場更新

        * 建立DOM樹時  *  使用事件代理   * 注意HTMLCollection先使用變量聲明

        * 在狀況對getElementsByTagName()調用時    * 獲取childNodes屬性時

        * 獲取attributes屬性時     * 訪問特殊屬性時，如document.forms,document.images

 

第二部分

 

1. ui層的鬆耦合

   1>將js從css中抽離，在css中禁用expression函數嵌套js語句

   2>將css從js中抽離，將css樣式用類名組裝

   3>將js從html中抽離，在html中添加onclick事件等

   4>將html從js中抽離，使用模板，能夠本身寫一個簡單的模板，也可使用handlebars模板

 

2. 避免使用全局變量 

    1>避免意外的全局變量，在聲明是var a = 1;b = 2;      b爲全局變量了

    2>使用命名空間 var a = {}; a.b = {};  a.c = {} 或使用模塊

 

3. 事件處理

在處理事件時，將應用邏輯隔離（這樣其餘事件能夠進行復用回調函數）而且 在傳參時，不要傳入事件對象event，代碼邏輯不清晰

 

4.檢測類型

   1>檢測基本類型：

     * typeof獨特之處在於 判斷未定義的變量和值爲undefined  都會返回undefined

     * typeof a === ’string’    b === ‘number’      c === ‘boolean’ && c      d === ‘undefined'

   2>引用值：

      * typeof {}   [2, 3]   new Date()  new RegExp()  都爲object

      * null：也爲   object

      * function ：返回function

   3>檢測引用值(檢測引用值使用instanceof)

       * value instanceof Object     value instanceof Array   value instanceof Date 

          value instanceof RegExp   value instanceof Error

        * instanceof不只只檢測構造這個對象的構造器，還檢測他的原型鏈

           var a = new Date();

           a instanceof Object  //true   a instance Date  //true

        * 檢測自定義類型,也是惟一的方法

          function Person(name) { this.name = name}      var me = new Person(’nana’);

          me instanceof Object   me instanceof Person //me

        * 缺點：不能跨幀使用

    4>檢測function

         * func instanceof Function //不能跨幀

         * typeof func   //能夠frame可是在ie8以前有限制

            例如： console.log(typeof document.getElementById);  //object

            是由於瀏覽器對DOM的實現由差別，致使將函數識別爲對象,  因此使用

         * if(「querySelectAll」 in document) {}   使用querySelectAll判斷在ie8以後使用，這是最安全的作法

    5>檢測數組；

        js中最古老的跨域問題之一就是在frame之間來回傳遞數組，每一個frame之間都有各自的Array構造函數，所以一個frame的實例在另外的個 frame中沒法識別。因此可使用下面的方法判斷數組

       * Object.prototype.toString.call(value) === 「[Object Array]"

         由於某個值的內置toString()方法都在全部瀏覽器返回標準的字符串結果

       * es5中的 * Array.isArray()

    6>檢測屬性

       * a in obj 

       * obj.hasOwnProperty()

    7>當獲取節點時，若是dom節點不存在則經過document.getElementById()獲得的值爲null，能夠用=== 和!==判斷

 

5. 將配置數據從代碼中分離出來

   對於url，須要展示給用戶的字符串，重複的值，設置（好比每頁的配置項），任何可能發生變動的值均可以將數據抽離出來，也利於後期的維護

 

6. 使用try catch

   try{

        //有些代碼已發了錯誤

   } catch(ex) {

       //處理錯誤

    }

   能夠避免js代碼出錯時，整個程序都不執行，必要的時候能夠進行添加

 

7. 不是你的對象不要動

   1> 不覆蓋方法

       例如：document.getElementById = function() {return null;} //這樣會使js庫以及依賴的方法都失效 

   2> 不新增方法:

        例如：document.a = function() {} Array.prototype.a = function() {} YUI.a = function() {},不要在dom上、原生對象上、以及庫對象上添加方法，會致使命名衝突

   3> 不刪除方法

        例如：document..getElementById = null;

         delete document.getElementById 不受影響，由於document.getElementById()是原型上的一個方法，使用delete沒法刪除

   4>更好的途徑，經過繼承

         * 基於對象的繼承：使用Object.create()，能夠更改原有的方法,一旦已這種方式建立了一個新對象，該新對象就能夠隨意修改

        * 基於類型的繼承：這種方式是經過構造函數實現的而非對象，對於開發者定義了構造函數的狀況下，基於類型的繼承最合適。

        *若是繼承知足不了那就可使用門面模式，用不一樣的接口來包裝已存在的對象，也就是將內容封裝起來

 

8. 阻止修改

   1>防止擴展（禁止添加屬性方法）：

       * 使用Object.preventExtension(obj)  ，能夠用Object.isExtensible()進行判斷是否被鎖定

       * 在非嚴格模式下新增方法會悄無生息的添加失敗，嚴格模式下回拋出錯誤

   2>密封（禁止刪除屬性方法）：

        * 使用Object.seal(obj)  ，能夠用Object.isSealed(obj)進行判斷是否被密封，規則同上

        * 被密封的對象同時也是不可擴展的，因此調用Object.isExtensible(obj)也是false

   3>凍結（禁止修改屬性方法）

       * 使用Object.freeze(obj)  ，能夠用Object.isFrozen()進行判斷是否被鎖定，規則同上

        * 被凍結的對象同時不可擴展和密封，因此都會返回false

 

9. Jenkins是目前最普遍使用的CI系統之一，一個基於java的web應用程序，用於多個版本的管理，集成了多個源代碼控制庫，Jenkins原生支持Ant和Shell腳本

 

10. 瀏覽器特性檢測