1.傳遞對象參數(shù)代替過長的參數(shù)列表

有時候一個函數(shù)有可能接收多個參數(shù)，而參數(shù)的數(shù)量越多，函數(shù)就越難理解和使用。使用該函數(shù)的人首先得搞明白全部參數(shù)的含義，在使用的時候，還要小心翼翼，以免少傳了某個參數(shù)或者把兩個參數(shù)搞反了位置。如果我們想在第3個參數(shù)和第4個參數(shù)之中增加一個新的參數(shù)，就會涉及許多代碼的修改，代碼如下：

        var setUserInfo = function( id, name, address, sex, mobile, qq ){
            console.log( 'id= ' + id );
            console.log( 'name= ' +name );
            console.log( 'address= ' + address );
            console.log( 'sex= ' + sex );
            console.log( 'mobile= ' + mobile );
            console.log( 'qq= ' + qq );
        };

        setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 );

這時我們可以把參數(shù)都放入一個對象內(nèi)，然后把該對象傳入setUserInfo函數(shù)，setUserInfo函數(shù)需要的數(shù)據(jù)可以自行從該對象里獲取?，F(xiàn)在不用再關(guān)心參數(shù)的數(shù)量和順序，只要保證參數(shù)對應(yīng)的key值不變就可以了：

        var setUserInfo = function( obj ){
            console.log( 'id= ' + obj.id );
            console.log( 'name= ' + obj.name );
            console.log( 'address= ' + obj.address );
            console.log( 'sex= ' + obj.sex );
            console.log( 'mobile= ' + obj.mobile );
            console.log( 'qq= ' + obj.qq );
        };

        setUserInfo({
            id: 1314,
            name: 'sven',
            address: 'shenzhen',
            sex: 'male',
            mobile: '137********',
            qq: 377876679
        });

2.盡量減少參數(shù)數(shù)量

如果調(diào)用一個函數(shù)時需要傳入多個參數(shù)，那這個函數(shù)是讓人望而生畏的，我們必須搞清楚這些參數(shù)代表的含義，必須小心翼翼地把它們按照順序傳入該函數(shù)。而如果一個函數(shù)不需要傳入任何參數(shù)就可以使用，這種函數(shù)是深受人們喜愛的。在實際開發(fā)中，向函數(shù)傳遞參數(shù)不可避免，但我們應(yīng)該盡量減少函數(shù)接收的參數(shù)數(shù)量。下面舉個非常簡單的示例。有一個畫圖函數(shù)draw，它現(xiàn)在只能繪制正方形，接收了3個參數(shù)，分別是圖形的width、heigth以及square：

        var draw = function( width, height, square ){};

但實際上正方形的面積是可以通過width和height計算出來的，于是我們可以把參數(shù)square從draw函數(shù)中去掉：

        var draw = function( width, height ){
            var square = width * height;
        };

假設(shè)以后這個draw函數(shù)開始支持繪制圓形，我們需要把參數(shù)width和height換成半徑radius，但圖形的面積square始終不應(yīng)該由客戶傳入，而是應(yīng)該在draw函數(shù)內(nèi)部，由傳入的參數(shù)加上一定的規(guī)則計算得來。此時，我們可以使用策略模式，讓draw函數(shù)成為一個支持繪制多種圖形的函數(shù)

3.少用三目運算符

有一些程序員喜歡大規(guī)模地使用三目運算符，來代替?zhèn)鹘y(tǒng)的if、else。理由是三目運算符性能高，代碼量少。不過，這兩個理由其實都很難站得住腳。

即使我們假設(shè)三目運算符的效率真的比if、else高，這點差距也是完全可以忽略不計的。在實際的開發(fā)中，即使把一段代碼循環(huán)一百萬次，使用三目運算符和使用if、else的時間開銷處在同一個級別里。

同樣，相比損失的代碼可讀性和可維護性，三目運算符節(jié)省的代碼量也可以忽略不計。讓JS文件加載更快的辦法有很多種，如壓縮、緩存、使用CDN和分域名等。把注意力只放在使用三目運算符節(jié)省的字符數(shù)量上，無異于一個300斤重的人把超重的原因歸罪于頭皮屑。

如果條件分支邏輯簡單且清晰，這無礙我們使用三目運算符：

        var global = typeof window ! == "undefined" ? window : this;

但如果條件分支邏輯非常復(fù)雜，如下段代碼所示，那我們最好的選擇還是按部就班地編寫if、else。if、else語句的好處很多，一是閱讀相對容易，二是修改的時候比修改三目運算符周圍的代碼更加方便：

        if ( ! aup || ! bup ) {
            return a === doc ? -1 :
              b === doc ? 1 :
              aup ? -1 :
              bup ? 1 :
              sortInput ?
              ( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
              0;
        }

4.合理使用鏈式調(diào)用

經(jīng)常使用jQuery的程序員相當習慣鏈式調(diào)用方法，在JavaScript中，可以很容易地實現(xiàn)方法的鏈式調(diào)用，即讓方法調(diào)用結(jié)束后返回對象自身，如下代碼所示：

        var User = function(){
            this.id = null;
            this.name = null;
        };

        User.prototype.setId = function( id ){
            this.id = id;
            return this;
        };

        User.prototype.setName = function( name ){
            this.name = name;
            return this;
        };

        console.log( new User().setId( 1314 ).setName( 'sven' ) );

或者：

        var User = {
            id: null,
            name: null,
            setId: function( id ){
              this.id = id;
              return this;
            },
            setName: function( name ){
              this.name = name;
              return this;
            }
        };

        console.log( User.setId( 1314 ).setName( 'sven' ) );

使用鏈式調(diào)用的方式并不會造成太多閱讀上的困難，也確實能省下一些字符和中間變量，但節(jié)省下來的字符數(shù)量同樣是微不足道的。鏈式調(diào)用帶來的壞處就是在調(diào)試的時候非常不方便，如果我們知道一條鏈中有錯誤出現(xiàn)，必須得先把這條鏈拆開才能加上一些調(diào)試log或者增加斷點，這樣才能定位錯誤出現(xiàn)的地方。

如果該鏈條的結(jié)構(gòu)相對穩(wěn)定，后期不易發(fā)生修改，那么使用鏈式調(diào)用無可厚非。但如果該鏈條很容易發(fā)生變化，導(dǎo)致調(diào)試和維護困難，那么還是建議使用普通調(diào)用的形式：

        var user = new User();

        user.setId( 1314 );
        user.setName( 'sven' );

5.分解大型類

HTML5版“街頭霸王”的第一版代碼中，負責創(chuàng)建游戲人物的Spirit類非常龐大，不僅要負責創(chuàng)建人物精靈，還包括了人物的攻擊、防御等動作方法，代碼如下：

        var Spirit = function( name ){
            this.name = name;
        };

        Spirit.prototype.attack = function( type ){    // 攻擊
            if ( type === 'waveBoxing' ){
              console.log( this.name + '：使用波動拳’ );
            }else if( type === 'whirlKick' ){
                console.log( this.name + '：使用旋風腿’ );
            }
        };

        var spirit = new Spirit( 'RYU' );

        spirit.attack( 'waveBoxing' );      // 輸出：RYU：使用波動拳
        spirit.attack( 'whirlKick' );    // 輸出：RYU：使用旋風腿

后來發(fā)現(xiàn)，Spirit.prototype.attack這個方法實現(xiàn)是太龐大了，實際上它完全有必要作為一個單獨的類存在。面向?qū)ο笤O(shè)計鼓勵將行為分布在合理數(shù)量的更小對象之中：

        var Attack = function( spirit ){
            this.spirit = spirit;
        };

        Attack.prototype.start = function( type ){
            return this.list[ type ].call( this );
        };

        Attack.prototype.list = {
            waveBoxing: function(){
              console.log( this.spirit.name + '：使用波動拳’ );
            },
            whirlKick: function(){
              console.log( this.spirit.name + '：使用旋風腿’ );
            }
        };

現(xiàn)在的Spirit類變得精簡了很多，不再包括各種各樣的攻擊方法，而是把攻擊動作委托給Attack類的對象來執(zhí)行，這段代碼也是策略模式的運用之一：

        var Spirit = function( name ){
            this.name = name;
            this.attackObj = new Attack( this );
        };

        Spirit.prototype.attack = function( type ){    // 攻擊
            this.attackObj.start( type );
        };

        var spirit = new Spirit( 'RYU' );

        spirit.attack( 'waveBoxing' );    // 輸出：RYU：使用波動拳
        spirit.attack( 'whirlKick' );    // 輸出：RYU：使用旋風腿

6.用return退出多重循環(huán)

假設(shè)在函數(shù)體內(nèi)有一個兩重循環(huán)語句，我們需要在內(nèi)層循環(huán)中判斷，當達到某個臨界條件時退出外層的循環(huán)。我們大多數(shù)時候會引入一個控制標記變量：

        var func = function(){
            var flag = false;
            for ( var i = 0; i < 10; i++ ){
              for ( var j = 0; j < 10; j++ ){
                  if ( i * j >30 ){
                      flag = true;
                      break;
                  }
              }
              if ( flag === true ){
                  break;
              }
            }
        };

第二種做法是設(shè)置循環(huán)標記：

        var func = function(){
            outerloop:
            for ( var i = 0; i < 10; i++ ){
              innerloop:
              for ( var j = 0; j < 10; j++ ){
                  if ( i * j >30 ){
                      break outerloop;
                  }
              }
            }
        };

這兩種做法無疑都讓人頭暈?zāi)垦?，更簡單的做法是在需要中止循環(huán)的時候直接退出整個方法：

        var func = function(){
            for ( var i = 0; i < 10; i++ ){
              for ( var j = 0; j < 10; j++ ){
                  if ( i * j >30 ){
                      return;
                  }
              }
            }
        };

當然用return直接退出方法會帶來一個問題，如果在循環(huán)之后還有一些將被執(zhí)行的代碼呢？如果我們提前退出了整個方法，這些代碼就得不到被執(zhí)行的機會：

        var func = function(){
            for ( var i = 0; i < 10; i++ ){
              for ( var j = 0; j < 10; j++ ){
                  if ( i * j >30 ){
                      return;
                  }
              }
            }
            console.log( i );    // 這句代碼沒有機會被執(zhí)行
        };

為了解決這個問題，我們可以把循環(huán)后面的代碼放到return后面，如果代碼比較多，就應(yīng)該把它們提煉成一個單獨的函數(shù)：

        var print = function( i ){
            console.log( i );
        };

        var func = function(){
            for ( var i = 0; i < 10; i++ ){
              for ( var j = 0; j < 10; j++ ){
                  if ( i * j >30 ){
                      return print( i );
                  }
              }
            }
        };
        func();