Airbnb公司版JavaScript 風格指南/編碼規範

時間  2021-01-15
欄目 硅谷 简体版
原文   原文鏈接

我弄得xmind的更加的清晰全面，還有很多備註，想要思維導圖的直接評論發郵鞋就好，我會發給你。


  • 基本類型：當你訪問基本類型時，你是直接對它的值進行操作。
    • string
    • number
    • boolean
    • null
    • undefined
      1
      2
      3
      4
      5
      6
      var foo = 1 ,
      bar = foo ;
       
      bar = 9 ;
       
      console . log ( foo , bar ) ; // => 1, 9
  • object
  • array
  • function
1
2
3
4
5
6
var foo = [ 1 , 2 ] ,
bar = foo ;
 
bar [ 0 ] = 9 ;
 
console . log ( foo [ 0 ] , bar [ 0 ] ) ; // => 9, 9

對象

  • 使用字面量語法來創建對象
  • 1
    2
    3
    4
    5
    // bad
    var item = new Object ( ) ;
     
    // good
    var item = { } ;
  • 不要使用保留字作爲「鍵值」，因爲在IE8不能運行。More info
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    var superman = {
       default : { clark : & #039;kent' },
       private : true
    } ;
     
    // good
    var superman = {
       defaults : { clark : & #039;kent' },
       hidden : true
    } ;
  • 使用容易理解的同義詞來替代保留字
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    var superman = {
       class : & #039;alien'
    } ;
     
    // bad
    var superman = {
       klass : & #039;alien'
    } ;
     
    // good
    var superman = {
       type : & #039;alien'
    } ;

  • 數組

  • 使用字面量語法來創建數組
  • 1
    2
    3
    4
    5
    // bad
    var items = new Array ( ) ;
     
    // good
    var items = [ ] ;
  • 如果你不知道數組長度，數組添加成員使用push方法。
  • 1
    2
    3
    4
    5
    6
    7
    var someStack = [ ] ;
     
    // bad
    someStack [ someStack . length ] = & #039;abracadabra';
     
    // good
    someStack . push ( & #039;abracadabra');
  • 當你需要複製一個數組時，使用數組的slice方法。jsPerf
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var len = items . length ,
         itemsCopy = [ ] ,
         i ;
     
    // bad
    for ( i = 0 ; i & lt ; len ; i ++ ) {
       itemsCopy [ i ] = items [ i ] ;
    }
     
    // good
    itemsCopy = items . slice ( ) ;
  • 當你需要把「類似數組對象」轉爲數組時，使用數組的slice方法。
  • 1
    2
    3
    4
    function trigger ( ) {
       var args = Array . prototype . slice . call ( arguments ) ;
       . . .
    }

  • 字符串

  • 字符串使用單引號‘’
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    var name = & quot ; Bob Parr & quot ; ;
     
    // good
    var name = & #039;Bob Parr';
     
    // bad
    var fullName = & quot ; Bob & quot ; + this . lastName ;
     
    // good
    var fullName = & #039;Bob ' + this.lastName;
  • 大於80個元素的字符串需要通過分隔符進行多行操作。
  • 注意：如果在長字符串中過度使用分隔符會影響性能。. jsPerf & Discussion
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // bad
    var errorMessage = & #039;This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
     
    // bad
    var errorMessage = & #039;This is a super long error that was thrown because
    of Batman . When you stop to think about how Batman had anything to do
    with this , you would get nowhere
    fast . & #039;;
     
    // good
    var errorMessage = & #039;This is a super long error that was thrown because ' +
       & #039;of Batman. When you stop to think about how Batman had anything to do ' +
       & #039;with this, you would get nowhere fast.';
  • 通過編程的方式創建字符串，應該使用數組的join方法，而不是字符串鏈接方法。特別是對於IE而言。 jsPerf.
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    var items ,
         messages ,
         length ,
         i ;
     
    messages = [ {
       state : & #039;success',
       message : & #039;This one worked.'
    } , {
       state : & #039;success',
       message : & #039;This one worked as well.'
    } , {
       state : & #039;error',
       message : & #039;This one did not work.'
    } ] ;
     
    length = messages . length ;
     
    // bad
    function inbox ( messages ) {
       items = & #039;<ul>';
     
       for ( i = 0 ; i & lt ; length ; i ++ ) {
         items += & #039;<li>' + messages[i].message + '</li>';
       }
     
       return items + & #039;</ul>';
    }
     
    // good
    function inbox ( messages ) {
       items = [ ] ;
     
       for ( i = 0 ; i & lt ; length ; i ++ ) {
         items [ i ] = messages [ i ] . message ;
       }
     
       return & #039;<ul><li>' + items.join('</li><li>') + '</li></ul>';

  • 函數

  • 函數表達式
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // anonymous function expression
    var anonymous = function ( ) {
       return true ;
    } ;
     
    // named function expression
    var named = function named ( ) {
       return true ;
    } ;
     
    // immediately-invoked function expression (IIFE)
    ( function ( ) {
       console . log ( & #039;Welcome to the Internet. Please follow me.');
    } ) ( ) ;
  • 不要直接在非函數塊（if，while等）裏聲明一個函數，最好將函數賦值給一個變量。雖然瀏覽器允許你在非函數塊中聲明函數，但是由於不同的瀏覽器對Javascript的解析方式不同，這樣做就很可能造成麻煩。
  • 注意：ECMA-262 將塊定義爲一組語句，而函數聲明不是語句。Read ECMA-262′s note on this issue
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    if ( currentUser ) {
       function test ( ) {
         console . log ( & #039;Nope.');
       }
    }
     
    // good
    var test ;
    if ( currentUser ) {
       test = function test ( ) {
         console . log ( & #039;Yup.');
       } ;
    }
  • 不要將參數命名爲arguments，它將在每個函數的作用範圍內優先於arguments對象。
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    function nope ( name , options , arguments ) {
       // ...stuff...
    }
     
    // good
    function yup ( name , options , args ) {
       // ...stuff...
    }

  • 屬性

  • 使用點符號 . 來訪問屬性
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var luke = {
       jedi : true ,
       age : 28
    } ;
     
    // bad
    var isJedi = luke [ & #039;jedi'];
     
    // good
    var isJedi = luke . jedi ;
  • 當你在變量中訪問屬性時，使用[ ]符號
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var luke = {
       jedi : true ,
       age : 28
    } ;
     
    function getProp ( prop ) {
       return luke [ prop ] ;
    }
     
    var isJedi = getProp ( & #039;jedi');

  • 變量

  • 使用var來聲明變量，否則將聲明全局變量，我們需要儘量避免污染全局命名空間，Captain Planet這樣警告過我們。
  • 1
    2
    3
    4
    5
    // bad
    superPower = new SuperPower ( ) ;
     
    // good
    var superPower = new SuperPower ( ) ;
  • 多個變量時只使用一個var聲明，每個變量佔一新行。
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    var items = getItems ( ) ;
    var goSportsTeam = true ;
    var dragonball = & #039;z';
     
    // good
    var items = getItems ( ) ,
         goSportsTeam = true ,
         dragonball = & #039;z';
  • 最後再聲明未賦值的變量，這對你之後需要依賴之前變量的變量賦值會有幫助。
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // bad
    var i , len , dragonball ,
         items = getItems ( ) ,
         goSportsTeam = true ;
     
    // bad
    var i , items = getItems ( ) ,
         dragonball ,
         goSportsTeam = true ,
         len ;
     
    // good
    var items = getItems ( ) ,
         goSportsTeam = true ,
         dragonball ,
         length ,
         i ;
    ·
  • 在範圍內將變量賦值置頂，這有助於避免變量聲明和賦值提升相關的問題
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    // bad
    function ( ) {
       test ( ) ;
       console . log ( & #039;doing stuff..');
     
       //..other stuff..
     
       var name = getName ( ) ;
     
       if ( name === & #039;test') {
         return false ;
       }
     
       return name ;
    }
     
    // good
    function ( ) {
       var name = getName ( ) ;
     
       test ( ) ;
       console . log ( & #039;doing stuff..');
     
       //..other stuff..
     
       if ( name === & #039;test') {
         return false ;
       }
     
       return name ;
    }
     
    // bad
    function ( ) {
       var name = getName ( ) ;
     
       if ( ! arguments . length ) {
         return false ;
       }
     
       return true ;
    }
     
    // good
    function ( ) {
       if ( ! arguments . length ) {
         return false ;
       }
     
       var name = getName ( ) ;
     
       return true ;
    }

  • 提升

  • 變量聲明在範圍內提升，但賦值並沒有提升
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // we know this wouldn't work (assuming there
    // is no notDefined global variable)
    function example ( ) {
       console . log ( notDefined ) ; // => throws a ReferenceError
    }
     
    // creating a variable declaration after you
    // reference the variable will work due to
    // variable hoisting. Note: the assignment
    // value of `true` is not hoisted.
    function example ( ) {
       console . log ( declaredButNotAssigned ) ; // => undefined
       var declaredButNotAssigned = true ;
    }
     
    // The interpreter is hoisting the variable
    // declaration to the top of the scope.
    // Which means our example could be rewritten as:
    function example ( ) {
       var declaredButNotAssigned ;
       console . log ( declaredButNotAssigned ) ; // => undefined
       declaredButNotAssigned = true ;
    }
  • 匿名函數表達式提升變量名，但函數賦值並沒有提升，
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    · function example ( ) {
       console . log ( anonymous ) ; // => undefined
     
       anonymous ( ) ; // => TypeError anonymous is not a function
     
       var anonymous = function ( ) {
         console . log ( & #039;anonymous function expression');
       } ;
    }
  • 命名函數表達式提升變量名，但函數名字和函數體並沒有提升。
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function example ( ) {
       console . log ( named ) ; // => undefined
     
       named ( ) ; // => TypeError named is not a function
     
       superPower ( ) ; // => ReferenceError superPower is not defined
     
       var named = function superPower ( ) {
         console . log ( & #039;Flying');
       } ;
    }
     
    // the same is true when the function name
    // is the same as the variable name.
    function example ( ) {
       console . log ( named ) ; // => undefined
     
       named ( ) ; // => TypeError named is not a function
     
       var named = function named ( ) {
         console . log ( & #039;named');
       }
    }
  • 函數聲明能提升他們的函數名和函數體
  • 1
    2
    3
    4
    5
    6
    7
    function example ( ) {
       superPower ( ) ; // => Flying
     
       function superPower ( ) {
         console . log ( & #039;Flying');
       }
    }
  • 更多的信息在JavaScript Scoping & Hoisting by Ben Cherry

 

  • 條件表達式和相等

  • 條件表達式強制使用 ToBoolean方法進行解析，並遵從以下簡單的規則Object ：返回 true
  • Undefined： 返回 false
  • Null： 返回 false
  • Booleans ：返回 boolean的值
  • Numbers ：如果是+0, -0, or NaN返回 false, 其他則 true
  • Strings ：空字符串''返回 false 其他返回true
  • 1
    2
    3
    4
    if ( [ 0 ] ) {
       // true
       // An array is an object, objects evaluate to true
    }
  • 使用簡易方式
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // bad
    if ( name !== & #039;') {
       // ...stuff...
    }
     
    // good
    if ( name ) {
       // ...stuff...
    }
     
    // bad
    if ( collection . length & gt ; 0 ) {
       // ...stuff...
    }
     
    // good
    if ( collection . length ) {
       // ...stuff...
    }
  • 更多的信息查看 Truth Equality and JavaScript by Angus Croll

塊

  • 在多行塊中使用大括號
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// bad
if ( test )
   return false ;
 
// good
if ( test ) return false ;
 
// good
if ( test ) {
   return false ;
}
 
// bad
function ( ) { return false ; }
 
// good
function ( ) {
   return false ;
}

註釋

  • 多行註釋使用 /** ... */ ，包括描述，指定類型、所有參數的值和返回值
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // bad
    // make() returns a new element
    // based on the passed in tag name
    //
    // @param <String> tag
    // @return <Element> element
    function make ( tag ) {
     
       // ...stuff...
     
       return element ;
    }
     
    // good
    /**
    * make() returns a new element
    * based on the passed in tag name
    *
    * @param <String> tag
    * @return <Element> element
    */
    function make ( tag ) {
     
       // ...stuff...
     
       return element ;
    }
  • 單行註釋使用 //, 在註釋的內容前另起一行進行單行註釋，並在註釋前留一空行。
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // bad
    var active = true ;    // is current tab
     
    // good
    // is current tab
    var active = true ;
     
    // bad
    function getType ( ) {
       console . log ( & #039;fetching type...');
       // set the default type to 'no type'
       var type = this . _type || & #039;no type';
     
       return type ;
    }
     
    // good
    function getType ( ) {
       console . log ( & #039;fetching type...');
     
       // set the default type to 'no type'
       var type = this . _type || & #039;no type';
     
       return type ;
    }
  • 在你的註釋加上FIXME或TODO的前綴可以幫助其他開發者迅速理解你指出的問題和需要的幫助，以及你建議需要完善的解決問題，這跟常規註釋不一樣因爲其具有可行動性，FIXME——是需要解決的而TODO——是需要完善的
  • 使用// FIXME: 來標記問題
  • 1
    2
    3
    4
    5
    6
    7
    function Calculator ( ) {
     
       // FIXME: shouldn't use a global here
       total = 0 ;
     
       return this ;
    }
  • 使用 // TODO：給待解決問題進行標註
  • 1
    2
    3
    4
    5
    6
    7
    function Calculator ( ) {
     
       // TODO: total should be configurable by an options param
       this . total = 0 ;
     
       return this ;
    }

  • 空格

  • 使用tabs設置兩個空格
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    function ( ) {
    ∙∙∙∙ var name ;
    }
     
    // bad
    function ( ) {
    ∙ var name ;
    }
     
    // good
    function ( ) {
    ∙∙ var name ;
    }
  • 分支前面空一格
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // bad
    function test ( ) {
       console . log ( & #039;test');
    }
     
    // good
    function test ( ) {
       console . log ( & #039;test');
    }
     
    // bad
    dog . set ( & #039;attr',{
       age : & #039;1 year',
       breed : & #039;Bernese Mountain Dog'
    } ) ;
     
    // good
    dog . set ( & #039;attr', {
       age : & #039;1 year',
       breed : & #039;Bernese Mountain Dog'
    } ) ;
  • 操作符前後空一格
  • 1
    2
    3
    4
    5
    // bad
    var x = y + 5 ;
     
    // good
    var x = y + 5 ;
  • 文件末尾用換行符結束
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    ( function ( global ) {
       // ...stuff...
    } ) ( this ) ;
     
    // bad
    ( function ( global ) {
       // ...stuff...
    } ) ( this ) ;
     
    // good
    ( function ( global ) {
       // ...stuff...
    } ) ( this )
  • 使用長方法鏈時使用縮進
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // bad
    $ ( & #039;#items').find('.selected').highlight().end().find('.open').updateCount();
     
    // good
    $ ( & #039;#items')
       . find ( & #039;.selected')
         . highlight ( )
         . end ( )
       . find ( & #039;.open')
         . updateCount ( ) ;
     
    // bad
    var leds = stage . selectAll ( & #039;.led').data(data).enter().append('svg:svg').class('led', true)
         . attr ( & #039;width',  (radius + margin) * 2).append('svg:g')
         . attr ( & #039;transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
         . call ( tron . led ) ;
     
    // good
    var leds = stage . selectAll ( & #039;.led')
         . data ( data )
       . enter ( ) . append ( & #039;svg:svg')
         . class ( & #039;led', true)
         . attr ( & #039;width',  (radius + margin) * 2)
       . append ( & #039;svg:g')
         . attr ( & #039;transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
         . call ( tron . led ) ;

  • 逗號

  • 不要在句首使用逗號
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // bad
    var once
       , upon
       , aTime ;
     
    // good
    var once ,
         upon ,
         aTime ;
     
    // bad
    var hero = {
         firstName : & #039;Bob'
       , lastName : & #039;Parr'
       , heroName : & #039;Mr. Incredible'
       , superPower : & #039;strength'
    } ;
     
    // good
    var hero = {
       firstName : & #039;Bob',
       lastName : & #039;Parr',
       heroName : & #039;Mr. Incredible',
       superPower : & #039;strength'
    } ;
  • 不要使用多餘的逗號，這在IE6/7 和 IE9的混雜模式中會造成問題，同樣，在ES3中有些實現，如果使用多餘的逗號將增加數組的長度，這在ES5中有闡明(source):
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // bad
       var hero = {
         firstName : & #039;Kevin',
         lastName : & #039;Flynn',
       } ;
     
       var heroes = [
         & #039;Batman',
         & #039;Superman',
       ] ;
     
       // good
       var hero = {
         firstName : & #039;Kevin',
         lastName : & #039;Flynn'
       } ;
     
       var heroes = [
         & #039;Batman',
         & #039;Superman'
       ] ;

  • 分號

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // bad
    ( function ( ) {
       var name = & #039;Skywalker'
       return name
    } ) ( )
     
    // good
    ( function ( ) {
       var name = & #039;Skywalker';
       return name ;
    } ) ( ) ;
     
    // good (guards against the function becoming an argument when two files with IIFEs are concatenated)
    ; ( function ( ) {
       var name = & #039;Skywalker';
       return name ;
    } ) ( ) ;

  • 轉型&強制

  • 在語句的開頭執行強制轉型。
  • Strings:

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //  => this.reviewScore = 9;
     
    // bad
    var totalScore = this . reviewScore + & #039;';
     
    // good
    var totalScore = & #039;' + this.reviewScore;
     
    // bad
    var totalScore = & #039;' + this.reviewScore + ' total score';
     
    // good
    var totalScore = this . reviewScore + & #039; total score';

  • 使用parseInt對Numbers型進行強制轉型。

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var inputValue = & #039;4';
     
    // bad
    var val = new Number ( inputValue ) ;
     
    // bad
    var val = + inputValue ;
     
    // bad
    var val = inputValue & gt ; & gt ; 0 ;
     
    // bad
    var val = parseInt ( inputValue ) ;
     
    // good
    var val = Number ( inputValue ) ;
     
    // good
    var val = parseInt ( inputValue , 10 ) ;

  • 如果出於某種原因你需要做些特別的事，而parseInt是你的瓶頸，出於性能考慮你需要使用位移，那麼留下你的註釋來解釋原因。

  • 1
    2
    3
    4
    5
    6
    7
    // good
    /**
    * parseInt was the reason my code was slow.
    * Bitshifting the String to coerce it to a
    * Number made it a lot faster.
    */
    var val = inputValue & gt ; & gt ; 0 ;

  • 注意：小心位移操作符，Numbers代表着64位的值，而位移操作符只能返回32位的整型，位移對於大於32位的整型的值會有不好的影響，32位最大的有符號整型是2,147,483,647。
  • （有關討論：Discussion）

  • 1
    2
    3
    2147483647 & gt ; & gt ; 0 //=> 2147483647
    2147483648 & gt ; & gt ; 0 //=> -2147483648
    2147483649 & gt ; & gt ; 0 //=> -2147483647

  • Booleans:

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var age = 0 ;
     
    // bad
    var hasAge = new Boolean ( age ) ;
     
    // good
    var hasAge = Boolean ( age ) ;
     
    // good
    var hasAge = ! ! age ;

  • 命名規則

  • 不要使用一個字母命名，而應該用單詞描述

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    function q ( ) {
       // ...stuff...
    }
     
    // good
    function query ( ) {
       // ..stuff..
    }

  • 使用駝峯法來給對象、函數、實例命名。

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // bad
    var OBJEcttsssss = { } ;
    var this_is_my_object = { } ;
    function c ( ) { }
    var u = new user ( {
       name : & #039;Bob Parr'
    } ) ;
     
    // good
    var thisIsMyObject = { } ;
    function thisIsMyFunction ( ) { }
    var user = new User ( {
       name : & #039;Bob Parr'
    } ) ;

  • 使用駝峯式大小寫給構造函數和類命名。

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // bad
    function user ( options ) {
       this . name = options . name ;
    }
     
    var bad = new user ( {
       name : & #039;nope'
    } ) ;
     
    // good
    function User ( options ) {
       this . name = options . name ;
    }
     
    var good = new User ( {
       name : & #039;yup'
    } ) ;

  • 使用下劃線前綴_來命名私有屬性。

  • 1
    2
    3
    4
    5
    6
    // bad
    this . __firstName__ = & #039;Panda';
    this . firstName_ = & #039;Panda';
     
    // good
    this . _firstName = & #039;Panda';

  • 儲存this的引用使用_this

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // bad
    function ( ) {
       var self = this ;
       return function ( ) {
         console . log ( self ) ;
       } ;
    }
     
    // bad
    function ( ) {
       var that = this ;
       return function ( ) {
         console . log ( that ) ;
       } ;
    }
     
    // good
    function ( ) {
       var _this = this ;
       return function ( ) {
         console . log ( _this ) ;
       } ;
    }

  • 給你的函數命名，這有助於堆棧重寫

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    var log = function ( msg ) {
       console . log ( msg ) ;
    } ;
     
    // good
    var log = function log ( msg ) {
       console . log ( msg ) ;
    } ;

  • 注意：IE8以下還有一些關於命名函數表達式的怪癖。詳情見http://kangax.github.io/nfe/

 

  • 訪問器

  • 如果你創建訪問函數使用getVal() 和 setVal(‘hello’)
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // bad
    dragon . age ( ) ;
     
    // good
    dragon . getAge ( ) ;
     
    // bad
    dragon . age ( 25 ) ;
     
    // good
    dragon . setAge ( 25 ) ;

如果這個屬性是boolean，使用isVal() 或者 hasVal()

 

1
2
3
4
5
6
7
8
9
// bad
if ( ! dragon . age ( ) ) {
   return false ;
}
 
// good
if ( ! dragon . hasAge ( ) ) {
   return false ;
}

.也可以使用get() 和 set()函數來創建，但是必須一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
function Jedi ( options ) {
   options || ( options = { } ) ;
   var lightsaber = options . lightsaber || & #039;blue';
   this . set ( & #039;lightsaber', lightsaber);
}
 
Jedi . prototype . set = function ( key , val ) {
   this [ key ] = val ;
} ;
 
Jedi . prototype . get = function ( key ) {
   return this [ key ] ;
} ;

    • 構造器

    • 給原型對象添加方法，相比用新對象重寫原型，重寫原型會有繼承問題。如果你要重寫原型方法，請重寫基礎方法。
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      function Jedi ( ) {
         console . log ( & #039;new jedi');
      }
       
      // bad
      Jedi . prototype = {
         fight : function fight ( ) {
           console . log ( & #039;fighting');
         } ,
       
         block : function block ( ) {
           console . log ( & #039;blocking');
         }
      } ;
       
      // good
      Jedi . prototype . fight = function fight ( ) {
         console . log ( & #039;fighting');
      } ;
       
      Jedi . prototype . block = function block ( ) {
         console . log ( & #039;blocking');
      } ;
    • 方法返回this有助於方法鏈
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      // bad
      Jedi . prototype . jump = function ( ) {
         this . jumping = true ;
         return true ;
      } ;
       
      Jedi . prototype . setHeight = function ( height ) {
         this . height = height ;
      } ;
       
      var luke = new
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程